@dodlhuat/basix 1.4.3 → 1.5.0

package/js/lightbox.js

@@ -5,6 +5,7 @@ class Lightbox {
     closeable;
     onOpen;
     onClose;
+    iconBasePath;
     wrapper = null;
     imgEl = null;
     captionEl = null;
@@ -22,6 +23,7 @@ class Lightbox {
         this.closeable = options.closeable ?? true;
         this.onOpen = options.onOpen;
         this.onClose = options.onClose;
+        this.iconBasePath = options.iconBasePath ?? 'svg-icons/';
     }
     show() {
         this.hide();
@@ -233,8 +235,9 @@ class Lightbox {
         }, { signal: this.listeners.signal });
     }
     buildTemplate() {
+        const icon = (name) => `<svg class="icon-svg" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#${name}"/></svg>`;
         return `
-            ${this.closeable ? '<button class="lightbox-close" aria-label="Close lightbox"><span class="icon icon-close"></span></button>' : ''}
+            ${this.closeable ? `<button class="lightbox-close" aria-label="Close lightbox">${icon('close')}</button>` : ''}
             <div class="lightbox" role="document">
                 <div class="lightbox-img-wrap">
                     <div class="lightbox-spinner"><div class="spinner"></div></div>
@@ -244,15 +247,15 @@ class Lightbox {
                 <div class="lightbox-counter" hidden></div>
             </div>
             <button class="lightbox-prev" aria-label="Previous image" hidden>
-                <span class="icon icon-navigate_before"></span>
+                ${icon('chevron_left')}
             </button>
             <button class="lightbox-next" aria-label="Next image" hidden>
-                <span class="icon icon-navigate_next"></span>
+                ${icon('chevron_right')}
             </button>
             <div class="lightbox-background"></div>
         `;
     }
-    static bind(selector = '[data-lightbox]') {
+    static bind(selector = '[data-lightbox]', iconBasePath) {
         const elements = document.querySelectorAll(selector);
         const groups = new Map();
         elements.forEach((el) => {
@@ -273,6 +276,7 @@ class Lightbox {
                     new Lightbox({
                         images: items.map((i) => i.image),
                         startIndex: idx,
+                        iconBasePath,
                     }).show();
                 });
             });

package/js/modal.d.ts

@@ -5,6 +5,7 @@ interface ModalOptions {
     footer?: string;
     closeable?: boolean;
     type?: ModalType;
+    iconBasePath?: string;
 }
 declare class Modal {
     private content;
@@ -12,6 +13,7 @@ declare class Modal {
     private readonly footer?;
     private readonly closeable;
     private readonly type;
+    private readonly iconBasePath;
     private template;
     private modalWrapper;
     private listeners;

package/js/modal.js

@@ -1,12 +1,12 @@
 import { sanitizeHtml } from './utils.js';
 import { ListenerGroup } from './listeners.js';
-const CLOSE_ICON = '<div class="icon icon-close close"></div>';
 class Modal {
     content;
     header;
     footer;
     closeable;
     type;
+    iconBasePath;
     template;
     modalWrapper = null;
     listeners = new ListenerGroup();
@@ -17,6 +17,7 @@ class Modal {
             this.footer = contentOrOptions.footer;
             this.closeable = contentOrOptions.closeable ?? true;
             this.type = contentOrOptions.type ?? 'default';
+            this.iconBasePath = contentOrOptions.iconBasePath ?? 'svg-icons/';
         }
         else {
             this.content = contentOrOptions;
@@ -24,6 +25,7 @@ class Modal {
             this.footer = footer;
             this.closeable = closeable;
             this.type = type;
+            this.iconBasePath = 'svg-icons/';
         }
         this.template = this.buildTemplate();
     }
@@ -72,7 +74,7 @@ class Modal {
     buildTemplate() {
         const parts = [`<div class="modal modal-${this.type}">`];
         if (this.closeable) {
-            parts.push(CLOSE_ICON);
+            parts.push(`<svg class="icon-svg close" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#close"/></svg>`);
         }
         if (this.header !== undefined) {
             const headerClass = `header ${this.type}-bg`;

package/js/push-menu.d.ts

@@ -6,13 +6,17 @@ interface PushMenuElements {
     controlIcon: HTMLElement | null;
     backdrop: HTMLElement | null;
 }
+interface PushMenuOptions {
+    iconBasePath?: string;
+}
 declare class PushMenu {
+    private static iconBasePath;
     private static elements;
     private static initialized;
     private static panelStack;
     private static listeners;
     private static clickNavListeners;
-    static init(): void;
+    static init(options?: PushMenuOptions): void;
     private static buildPanels;
     private static extractSubPanels;
     static openPanel(panel: HTMLElement): void;
@@ -28,4 +32,4 @@ declare class PushMenu {
     static destroy(): void;
     static refresh(): void;
 }
-export { PushMenu, type PushMenuElements };
+export { PushMenu, type PushMenuElements, type PushMenuOptions };

package/js/push-menu.js

@@ -1,5 +1,6 @@
 import { ListenerGroup } from './listeners.js';
 class PushMenu {
+    static iconBasePath = 'svg-icons/';
     static elements = {
         navigation: null,
         content: null,
@@ -12,11 +13,12 @@ class PushMenu {
     static panelStack = [];
     static listeners = new ListenerGroup();
     static clickNavListeners = null;
-    static init() {
+    static init(options = {}) {
         if (this.initialized) {
             console.warn('PushMenu: Already initialized');
             return;
         }
+        this.iconBasePath = options.iconBasePath ?? 'svg-icons/';
         this.refresh();
         if (!this.elements.navigation || !this.elements.content) {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
@@ -60,7 +62,7 @@ class PushMenu {
                 const backBtn = document.createElement('button');
                 backBtn.classList.add('push-menu-back');
                 backBtn.setAttribute('aria-label', 'Back');
-                backBtn.innerHTML = `<span class="icon icon-navigate_before" aria-hidden="true"></span>`;
+                backBtn.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${PushMenu.iconBasePath}icons.svg#chevron_left"/></svg>`;
                 header.addEventListener('click', () => PushMenu.goBack());
                 const titleEl = document.createElement('span');
                 titleEl.classList.add('push-menu-panel-title');
@@ -76,7 +78,7 @@ class PushMenu {
                 const chevron = document.createElement('span');
                 chevron.classList.add('push-menu-chevron');
                 chevron.setAttribute('aria-hidden', 'true');
-                chevron.innerHTML = `<span class="icon icon-navigate_next" aria-hidden="true"></span>`;
+                chevron.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${PushMenu.iconBasePath}icons.svg#chevron_right"/></svg>`;
                 trigger.appendChild(chevron);
                 if (parentAnchor) {
                     parentAnchor.replaceWith(trigger);
@@ -144,13 +146,16 @@ class PushMenu {
         this.elements.header?.classList.toggle('pushed', !isPushed);
         this.elements.backdrop?.classList.toggle('pushed', !isPushed);
         if (this.elements.controlIcon) {
-            if (isPushed) {
-                this.elements.controlIcon.classList.remove('icon-menu_open');
-                this.elements.controlIcon.classList.add('icon-menu');
+            const iconName = isPushed ? 'menu' : 'menu_open';
+            const useEl = this.elements.controlIcon.querySelector('use');
+            if (useEl) {
+                const existingHref = useEl.getAttribute('href') ?? '';
+                const basePath = existingHref.includes('#') ? existingHref.split('#')[0] : PushMenu.iconBasePath + 'icons.svg';
+                useEl.setAttribute('href', `${basePath}#${iconName}`);
             }
             else {
-                this.elements.controlIcon.classList.add('icon-menu_open');
-                this.elements.controlIcon.classList.remove('icon-menu');
+                this.elements.controlIcon.classList.remove('icon-menu_open', 'icon-menu');
+                this.elements.controlIcon.classList.add(`icon-${iconName}`);
             }
         }
     }

package/js/select.js

@@ -140,7 +140,7 @@ class Select {
         dropdownOptions.className = 'dropdown-options';
         const optionsMenu = document.createElement('div');
         optionsMenu.className = 'dropdown-options-menu hidden';
-        optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
+        optionsMenu.innerHTML = 'Select options<svg class="icon-svg dropdown-options-icon" aria-hidden="true"><use href="svg-icons/icons.svg#close"/></svg>';
         dropdownOptions.appendChild(optionsMenu);
         Array.from(select.options).forEach((opt) => {
             const optDiv = document.createElement('div');

package/js/sidebar-nav.d.ts

@@ -3,6 +3,7 @@ interface SidebarNavOptions {
     breakpoint?: number;
     swipeThreshold?: number;
     swipeEdge?: number;
+    iconBasePath?: string;
 }
 declare class SidebarNav {
     private nav;

package/js/sidebar-nav.js

@@ -15,6 +15,7 @@ class SidebarNav {
             breakpoint: options.breakpoint ?? 768,
             swipeThreshold: options.swipeThreshold ?? 60,
             swipeEdge: options.swipeEdge ?? 20,
+            iconBasePath: options.iconBasePath ?? 'svg-icons/',
         };
         this.nav = container?.querySelector('.sidebar-nav') ?? null;
         this.backdrop = container?.querySelector('.sidebar-backdrop') ?? null;
@@ -47,7 +48,7 @@ class SidebarNav {
         this.closeBtn = document.createElement('button');
         this.closeBtn.className = 'sidebar-close';
         this.closeBtn.setAttribute('aria-label', 'Close navigation');
-        this.closeBtn.innerHTML = '<div class="icon icon-close"></div>';
+        this.closeBtn.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${this.opts.iconBasePath}icons.svg#close"/></svg>`;
         this.closeBtn.addEventListener('click', () => this.close(), sig);
         this.nav?.append(this.closeBtn);
     }

package/js/toast.d.ts

@@ -4,12 +4,14 @@ interface ToastOptions {
     header?: string;
     type?: ToastType;
     closeable?: boolean;
+    iconBasePath?: string;
 }
 declare class Toast {
     private readonly content;
     private readonly header;
     private readonly type?;
     private readonly closeable;
+    private readonly iconBasePath;
     private readonly closureIcon;
     private readonly template;
     private toastElement;

package/js/toast.js

@@ -5,7 +5,8 @@ class Toast {
     header;
     type;
     closeable;
-    closureIcon = '<div class="icon icon-close close"></div>';
+    iconBasePath;
+    closureIcon;
     template;
     toastElement = null;
     timerId = null;
@@ -16,13 +17,16 @@ class Toast {
             this.header = contentOrOptions.header ?? '';
             this.type = contentOrOptions.type;
             this.closeable = contentOrOptions.closeable ?? true;
+            this.iconBasePath = contentOrOptions.iconBasePath ?? 'svg-icons/';
         }
         else {
             this.content = contentOrOptions;
             this.header = header;
             this.type = type;
             this.closeable = closeable;
+            this.iconBasePath = 'svg-icons/';
         }
+        this.closureIcon = `<svg class="icon-svg close" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#close"/></svg>`;
         this.template = this.buildTemplate();
     }
     show(ms) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",
@@ -36,6 +36,7 @@
     "eslint": "^10.5.0",
     "eslint-config-prettier": "^10.1.8",
     "prettier": "^3.8.4",
+    "sass": "^1.100.0",
     "typescript": "^6.0.0",
     "typescript-eslint": "^8.61.0"
   }

package/svg-icons/chevron_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z"/></svg>

package/svg-icons/keyboard_arrow_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z"/></svg>