Merge pull request #415 from statikbe/KarelJanVanHaute/issue400

Load more ts component is not loaded
statikbe · Feb 12, 2025 · 6cf339a · 6cf339a
2 parents cbbb4f0 + 2bc0685
commit 6cf339a
Show file tree

Hide file tree

Showing 44 changed files with 1,909 additions and 818 deletions.
diff --git a/tailoff/css/site/tailwind.config.js b/tailoff/css/site/tailwind.config.js
@@ -1,18 +1,18 @@
-import defaultTheme from "tailwindcss/defaultTheme";
-import colorShade from "../../tailwind/color-shades";
+import defaultTheme from 'tailwindcss/defaultTheme';
+import colorShade from '../../tailwind/color-shades';
 
 const siteColors = {
     primary: {
-        DEFAULT: "#C22A1B",
-        contrast: "#ffffff",
-        hover: "#f27266",
-        hoverContrast: "#ffffff",
+        DEFAULT: '#C22A1B',
+        contrast: '#ffffff',
+        hover: '#f27266',
+        hoverContrast: '#ffffff',
     },
     secondary: {
-        DEFAULT: "#0409a6",
-        contrast: "#ffffff",
-        hover: "#050cd8",
-        hoverContrast: "#ffffff",
+        DEFAULT: '#0409a6',
+        contrast: '#ffffff',
+        hover: '#050cd8',
+        hoverContrast: '#ffffff',
     },
 };
 
@@ -25,69 +25,69 @@ export default {
     ],
     theme: {
         borderWidth: {
-            DEFAULT: "1px",
-            0: "0",
-            1: "1px",
-            2: "2px",
-            3: "3px",
+            DEFAULT: '1px',
+            0: '0',
+            1: '1px',
+            2: '2px',
+            3: '3px',
         },
         container: {
             center: true,
-            padding: defaultTheme.spacing["4"],
+            padding: defaultTheme.spacing['4'],
         },
         fontFamily: {
-            accent: "serif",
-            base: "sans-serif",
+            accent: 'serif',
+            base: 'sans-serif',
         },
         screens: {
-            xs: "480px",
-            sm: "660px",
-            md: "820px",
-            lg: "980px",
-            xl: "1200px",
+            xs: '480px',
+            sm: '660px',
+            md: '820px',
+            lg: '980px',
+            xl: '1200px',
         },
         extend: {
             colors: {
                 ...siteColors,
-                black: "#333333",
-                "pitch-black": "#000000",
-                light: "#f5f5f5",
+                'black': '#333333',
+                'pitch-black': '#000000',
+                'light': '#f5f5f5',
             },
             screens: {
-                print: { raw: "print" },
+                print: { raw: 'print' },
             },
             minWidth: {
-                searchbox: "225px",
+                searchbox: '225px',
             },
             maxWidth: {
-                flyout: "90vw",
-                modal: "725px",
-                logo: "150px",
+                flyout: '90vw',
+                modal: '725px',
+                logo: '150px',
             },
             fontSize: {
-                xs: ["0.75rem", "1rem"], // 12px - 16px
-                sm: ["0.875rem", "1.25rem"], // 14px - 20px
-                base: ["1rem", "1.5rem"], // 16px - 24px
-                lg: ["1.125rem", "1.75rem"], // 18px - 28px
-                xl: ["1.25rem", "1.75rem"], // 20px - 28px
-                "2xl": ["1.5rem", "2rem"], // 24px - 32px
-                "3xl": ["1.875rem", "2.25rem"], // 30px - 36px
-                "4xl": ["2.25rem", "2.5rem"], // 36px - 40px
-                "5xl": ["3rem", "1"], // 48px - 1
-                "6xl": ["3.75rem", "1"], // 60px - 1
-                "7xl": ["4.5rem", "1"], // 72px - 1
-                "8xl": ["6rem", "1"], // 96px - 1
-                "9xl": ["8rem", "1"], // 128px - 1
+                'xs': ['0.75rem', '1rem'], // 12px - 16px
+                'sm': ['0.875rem', '1.25rem'], // 14px - 20px
+                'base': ['1rem', '1.5rem'], // 16px - 24px
+                'lg': ['1.125rem', '1.75rem'], // 18px - 28px
+                'xl': ['1.25rem', '1.75rem'], // 20px - 28px
+                '2xl': ['1.5rem', '2rem'], // 24px - 32px
+                '3xl': ['1.875rem', '2.25rem'], // 30px - 36px
+                '4xl': ['2.25rem', '2.5rem'], // 36px - 40px
+                '5xl': ['3rem', '1'], // 48px - 1
+                '6xl': ['3.75rem', '1'], // 60px - 1
+                '7xl': ['4.5rem', '1'], // 72px - 1
+                '8xl': ['6rem', '1'], // 96px - 1
+                '9xl': ['8rem', '1'], // 128px - 1
             },
             zIndex: {
-                99: "99",
-                100: "100",
+                99: '99',
+                100: '100',
             },
             boxShadow: {
-                card: "0 0 30px 0 rgba(0,0,0,0.15)",
+                card: '0 0 30px 0 rgba(0,0,0,0.15)',
             },
             inset: {
-                "1/2": "50%",
+                '1/2': '50%',
             },
         },
     },

diff --git a/tailoff/js/components/accordion.component.ts b/tailoff/js/components/accordion.component.ts
@@ -1,4 +1,4 @@
-export class AccordionComponent {
+export default class AccordionComponent {
   constructor() {
     this.initAccordions();
   }

diff --git a/tailoff/js/components/ajaxPaging.component.ts b/tailoff/js/components/ajaxPaging.component.ts
@@ -1,4 +1,4 @@
-export class AjaxPagingComponent {
+export default class AjaxPagingComponent {
   constructor() {
     const pagings = document.querySelectorAll('.js-ajax-paging');
     Array.from(pagings).forEach((paging) => {

diff --git a/tailoff/js/components/ajaxSearch.component.ts b/tailoff/js/components/ajaxSearch.component.ts
@@ -7,7 +7,7 @@ import { SiteLang } from '../utils/site-lang';
 import { Formatter } from '../utils/formater';
 import { computePosition, size, shift, flip } from '@floating-ui/dom';
 
-export class AjaxSearchComponent {
+export default class AjaxSearchComponent {
   constructor() {
     Array.from(document.querySelectorAll('[data-s-ajax-search], [data-s-ajax-search-callback]')).forEach(
       (search, index) => {

diff --git a/tailoff/js/components/autocomplete.component.ts b/tailoff/js/components/autocomplete.component.ts
@@ -9,7 +9,7 @@ interface AutocompleteOption {
   value: string;
 }
 
-export class AutocompleteComponent {
+export default class AutocompleteComponent {
   constructor() {
     Array.from(document.querySelectorAll('[data-s-autocomplete]')).forEach((autocomplete) => {
       if (autocomplete.tagName === 'SELECT') {

diff --git a/tailoff/js/components/chip.component.ts b/tailoff/js/components/chip.component.ts
@@ -2,7 +2,7 @@ import { A11yUtils } from '../utils/a11y';
 import { SiteLang } from '../utils/site-lang';
 import { computePosition, flip, shift, size, autoUpdate } from '@floating-ui/dom';
 
-export class ChipComponent {
+export default class ChipComponent {
   constructor() {
     const chips = Array.from(document.querySelectorAll('[data-s-chip]'));
     chips.forEach((chip, index) => {

diff --git a/tailoff/js/components/ckeEditor.component.ts b/tailoff/js/components/ckeEditor.component.ts
@@ -1,77 +1,75 @@
-export class ckeEditorComponent {
+export default class ckeEditorComponent {
   constructor() {
     this.init();
   }
 
   private async init() {
-    const ckeEditor = document.querySelectorAll(
-      ".js-cke-editor"
-    ) as NodeListOf<HTMLElement>;
+    const ckeEditor = document.querySelectorAll('.js-cke-editor') as NodeListOf<HTMLElement>;
     if (!ckeEditor) return;
 
-    const ClassicEditor = await import("@ckeditor/ckeditor5-build-classic");
+    const ClassicEditor = await import('@ckeditor/ckeditor5-build-classic');
 
     ckeEditor.forEach((editor) => {
-      let toolbar = ["heading", "bold", "italic", "insertImage", "link"];
-      if (editor.hasAttribute("data-cke-editor-style")) {
-        if (editor.getAttribute("data-cke-editor-style") === "compact") {
-          toolbar = ["bold", "italic", "numberedList", "bulletedList"];
+      let toolbar = ['heading', 'bold', 'italic', 'insertImage', 'link'];
+      if (editor.hasAttribute('data-cke-editor-style')) {
+        if (editor.getAttribute('data-cke-editor-style') === 'compact') {
+          toolbar = ['bold', 'italic', 'numberedList', 'bulletedList'];
         }
       }
       ClassicEditor.default
         .create(editor, {
           toolbar: toolbar,
           simpleUpload: {
-            uploadUrl: "statik/wiki/upload-image",
+            uploadUrl: 'statik/wiki/upload-image',
           },
           heading: {
             options: [
               {
-                model: "paragraph",
-                title: "Paragraph",
-                class: "ck-heading_paragraph",
+                model: 'paragraph',
+                title: 'Paragraph',
+                class: 'ck-heading_paragraph',
               },
               {
-                model: "heading1",
-                view: "h1",
-                title: "Heading 1",
-                class: "ck-heading_heading1",
+                model: 'heading1',
+                view: 'h1',
+                title: 'Heading 1',
+                class: 'ck-heading_heading1',
               },
               {
-                model: "heading2",
-                view: "h2",
-                title: "Heading 2",
-                class: "ck-heading_heading2",
+                model: 'heading2',
+                view: 'h2',
+                title: 'Heading 2',
+                class: 'ck-heading_heading2',
               },
               {
-                model: "heading3",
-                view: "h3",
-                title: "Heading 3",
-                class: "ck-heading_heading3",
+                model: 'heading3',
+                view: 'h3',
+                title: 'Heading 3',
+                class: 'ck-heading_heading3',
               },
               {
-                model: "heading4",
-                view: "h4",
-                title: "Heading 4",
-                class: "ck-heading_heading4",
+                model: 'heading4',
+                view: 'h4',
+                title: 'Heading 4',
+                class: 'ck-heading_heading4',
               },
               {
-                model: "heading5",
-                view: "h5",
-                title: "Heading 5",
-                class: "ck-heading_heading5",
+                model: 'heading5',
+                view: 'h5',
+                title: 'Heading 5',
+                class: 'ck-heading_heading5',
               },
               {
-                model: "heading6",
-                view: "h6",
-                title: "Heading 6",
-                class: "ck-heading_heading6",
+                model: 'heading6',
+                view: 'h6',
+                title: 'Heading 6',
+                class: 'ck-heading_heading6',
               },
             ],
           },
         })
         .then((editor) => {
-          editor.model.document.on("change", () => {
+          editor.model.document.on('change', () => {
             const data = editor.getData();
             editor.sourceElement.innerHTML = data;
           });

diff --git a/tailoff/js/components/datepicker.component.ts b/tailoff/js/components/datepicker.component.ts
@@ -6,7 +6,7 @@ import { SiteLang } from '../utils/site-lang';
 
 const lang = SiteLang.getLang();
 
-export class DatePickerComponent {
+export default class DatePickerComponent {
   constructor() {
     const pickers = document.querySelectorAll('.js-date-picker');
     if (pickers.length > 0) {

diff --git a/tailoff/js/components/dropdown.component.ts b/tailoff/js/components/dropdown.component.ts
@@ -1,7 +1,7 @@
 import { DOMHelper } from '../utils/domHelper';
 import { computePosition, flip, shift, size, autoUpdate } from '@floating-ui/dom';
 
-export class DropdownComponent {
+export default class DropdownComponent {
   constructor() {
     const dropdowns = Array.from(document.querySelectorAll('.js-dropdown'));
     dropdowns.forEach((dropdown, index) => {