@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.210

package/Controls/Components/Inputs/AutoCompleteBox/Providers/GoogleFontsProvider.js

@@ -0,0 +1,353 @@
+// #region Imports
+/**
+ * Creates an items provider function for Google Fonts.
+ * This provider can be used with the AutoCompleteBox component to provide
+ * font family suggestions from the Google Fonts API.
+ *
+ * @example
+ * ```typescript
+ * const fontProvider = createGoogleFontsProvider({
+ *   apiKey: 'YOUR_API_KEY',
+ *   sort: 'popularity',
+ *   pageSize: 30
+ * });
+ *
+ * // Use with AutoCompleteBox
+ * element.itemsProvider = fontProvider;
+ * element.displayMemberPath = 'family';
+ * element.valueMemberPath = 'family';
+ * ```
+ *
+ * @public
+ * @param options - The provider options.
+ * @returns An ItemsProviderFn that fetches fonts from the Google Fonts API.
+ */
+export function createGoogleFontsProvider(options) {
+    const { apiKey, sort = 'alpha', subset, pageSize = 50, cache = true } = options;
+    let cachedFonts = null;
+    let cachePromise = null;
+    /**
+     * Fetches all fonts from the Google Fonts API.
+     */
+    const fetchAllFonts = async (signal) => {
+        // Return cached results if available
+        if (cache && cachedFonts) {
+            return cachedFonts;
+        }
+        // Return existing promise if a fetch is in progress
+        if (cache && cachePromise) {
+            return cachePromise;
+        }
+        const fetchPromise = (async () => {
+            const url = new URL('https://www.googleapis.com/webfonts/v1/webfonts');
+            url.searchParams.set('key', apiKey);
+            url.searchParams.set('sort', sort);
+            if (subset) {
+                url.searchParams.set('subset', subset);
+            }
+            const response = await fetch(url.toString(), { signal });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch Google Fonts: ${response.statusText}`);
+            }
+            const data = await response.json();
+            if (cache) {
+                cachedFonts = data.items;
+            }
+            return data.items;
+        })();
+        if (cache) {
+            cachePromise = fetchPromise;
+        }
+        try {
+            return await fetchPromise;
+        }
+        finally {
+            if (cache) {
+                cachePromise = null;
+            }
+        }
+    };
+    /**
+     * Filters fonts based on search text.
+     */
+    const filterFonts = (fonts, searchText) => {
+        if (!searchText || searchText.trim().length === 0) {
+            return fonts.slice(0, pageSize);
+        }
+        const normalizedSearch = searchText.toLowerCase().trim();
+        return fonts
+            .filter((font) => font.family.toLowerCase().includes(normalizedSearch))
+            .slice(0, pageSize);
+    };
+    /**
+     * The items provider function.
+     */
+    return async (request) => {
+        const { searchText, signal } = request;
+        try {
+            const allFonts = await fetchAllFonts(signal);
+            return filterFonts(allFonts, searchText);
+        }
+        catch (error) {
+            // Handle abort errors silently
+            if (error instanceof Error && error.name === 'AbortError') {
+                return [];
+            }
+            throw error;
+        }
+    };
+}
+/**
+ * Clears the cache of the Google Fonts provider.
+ * Call this if you need to refresh the font list.
+ *
+ * @public
+ * @param provider - The provider function to clear cache for.
+ */
+export function clearGoogleFontsCache(provider) {
+    // Note: Due to closure, we cannot directly clear the cache from outside.
+    // Users should recreate the provider if they need fresh data.
+    void provider;
+}
+/**
+ * Loads a Google Font dynamically.
+ * This can be used in combination with the renderItem function to preview fonts.
+ *
+ * @example
+ * ```typescript
+ * element.renderItem = (item: IGoogleFont, index: number) => {
+ *   loadGoogleFont(item.family);
+ *   return html`<span style="font-family: '${item.family}'">${item.family}</span>`;
+ * };
+ * ```
+ *
+ * @public
+ * @param family - The font family name to load.
+ * @param variants - Optional array of variants to load (default: ['regular']).
+ */
+export function loadGoogleFont(family, variants = ['regular']) {
+    const variantsParam = variants
+        .map((v) => v === 'regular' ? '' : v)
+        .filter(Boolean)
+        .join(',');
+    const familyParam = variantsParam
+        ? `${family}:${variantsParam}`
+        : family;
+    const encodedFamily = encodeURIComponent(familyParam);
+    const linkId = `google-font-${encodedFamily.replace(/%20/g, '-').toLowerCase()}`;
+    // Check if already loaded
+    if (document.getElementById(linkId)) {
+        return;
+    }
+    const link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'stylesheet';
+    link.href = `https://fonts.googleapis.com/css2?family=${encodedFamily}&display=swap`;
+    document.head.appendChild(link);
+}
+/**
+ * Creates a simple local fonts provider that doesn't require an API key.
+ * Uses a predefined list of common fonts.
+ *
+ * @example
+ * ```typescript
+ * const fontProvider = createLocalFontsProvider();
+ * element.itemsProvider = fontProvider;
+ * ```
+ *
+ * @public
+ * @returns An ItemsProviderFn that provides a list of common fonts.
+ */
+export function createLocalFontsProvider() {
+    const commonFonts = [
+        {
+            family: 'Arial',
+            category: 'sans-serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Comic Sans MS',
+            category: 'handwriting',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Courier New',
+            category: 'monospace',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Georgia',
+            category: 'serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Helvetica',
+            category: 'sans-serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Impact',
+            category: 'display',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Inter',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Lato',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Montserrat',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Open Sans',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Oswald',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Playfair Display',
+            category: 'serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Poppins',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Roboto',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Source Code Pro',
+            category: 'monospace',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Tahoma',
+            category: 'sans-serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Times New Roman',
+            category: 'serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Trebuchet MS',
+            category: 'sans-serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Ubuntu',
+            category: 'sans-serif',
+            variants: ['regular', '700'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        },
+        {
+            family: 'Verdana',
+            category: 'sans-serif',
+            variants: ['regular'],
+            subsets: ['latin'],
+            version: '',
+            lastModified: '',
+            files: {}
+        }
+    ];
+    return (request) => {
+        const { searchText } = request;
+        if (!searchText || searchText.trim().length === 0) {
+            return commonFonts;
+        }
+        const normalizedSearch = searchText.toLowerCase().trim();
+        return commonFonts.filter((font) => font.family.toLowerCase().includes(normalizedSearch));
+    };
+}
+//# sourceMappingURL=GoogleFontsProvider.js.map

package/Controls/Components/Inputs/AutoCompleteBox/Providers/GoogleFontsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleFontsProvider.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Providers/GoogleFontsProvider.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uCAAuC,IAAI,SAAS,CAoHnE"}
+{"version":3,"file":"AutoCompleteBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uCAAuC,IAAI,SAAS,CAgJnE"}

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.js

@@ -13,11 +13,15 @@ import { css } from '../../../../../Dom/Css';
 export function autoCompleteBoxElementCosmopolitanStyle() {
     return css `
 :host {
-  --autocompletebox-background-color: var(--cosmopolitan-scheme-background);
-  --autocompletebox-border-color: var(--cosmopolitan-scheme-highlight);
-  --autocompletebox-border-radius: var(--cosmopolitan-layout-radius);
-  --autocompletebox-border-style: solid;
-  --autocompletebox-border-width: var(--cosmopolitan-layout-thickness);
+  --autocompletebox-background-color: unset;
+  --autocompletebox-border-color: unset;
+  --autocompletebox-border-radius: unset;
+  --autocompletebox-border-style: unset;
+  --autocompletebox-border-width: unset;
+  --autocompletebox-focus-ring-active-width: 8px;
+  --autocompletebox-focus-ring-color: unset;
+  --autocompletebox-focus-ring-inward-offset: 2px;
+  --autocompletebox-focus-ring-outward-offset: 2px;
   --autocompletebox-font-family: unset;
   --autocompletebox-font-letter-spacing: unset;
   --autocompletebox-font-line-height: unset;
@@ -25,17 +29,13 @@ export function autoCompleteBoxElementCosmopolitanStyle() {
   --autocompletebox-font-text-decoration: unset;
   --autocompletebox-font-text-transform: unset;
   --autocompletebox-font-weight: unset;
-  --autocompletebox-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --autocompletebox-foreground-color: unset;
   --autocompletebox-gap: unset;
   --autocompletebox-padding-bottom: unset;
   --autocompletebox-padding-left: unset;
   --autocompletebox-padding-right: unset;
   --autocompletebox-padding-top: unset;
-  --autocompletebox-shadow-blur: unset;
-  --autocompletebox-shadow-color: unset;
-  --autocompletebox-shadow-offset-x: unset;
-  --autocompletebox-shadow-offset-y: unset;
-  --autocompletebox-shadow-spread: unset;
+  --autocompletebox-shadow: unset;
   --autocompletebox-transition-duration: unset;
   --autocompletebox-transition-mode: unset;
   --autocompletebox-transition-property: unset;
@@ -77,52 +77,80 @@ export function autoCompleteBoxElementCosmopolitanStyle() {
   -webkit-text-decoration: var(--autocompletebox-font-text-decoration);
   text-decoration: var(--autocompletebox-font-text-decoration);
   text-transform: var(--autocompletebox-font-text-transform);
-  padding-top: var(--autocompletebox-padding-top);
-  padding-right: var(--autocompletebox-padding-right);
-  padding-bottom: var(--autocompletebox-padding-bottom);
-  padding-left: var(--autocompletebox-padding-left);
-  gap: var(--autocompletebox-gap);
   transition-duration: var(--autocompletebox-transition-duration);
   transition-timing-function: var(--autocompletebox-transition-mode);
   transition-property: var(--autocompletebox-transition-property);
   translate: var(--autocompletebox-translate);
   background-color: var(--autocompletebox-background-color);
   color: var(--autocompletebox-foreground-color);
+  box-shadow: var(--autocompletebox-shadow);
   border-color: var(--autocompletebox-border-color);
-  border-width: var(--autocompletebox-border-width);
   border-radius: var(--autocompletebox-border-radius);
-  border-style: var(--autocompletebox-border-style);
-  box-shadow: var(--autocompletebox-shadow-offset-x) var(--autocompletebox-shadow-offset-y) var(--autocompletebox-shadow-blur) var(--autocompletebox-shadow-spread) var(--autocompletebox-shadow-color);
-  box-sizing: border-box;
-  display: block;
-  position: relative;
+  cursor: text;
 }
 
-:host input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 6px 8px;
+:host [part="focusRing"] {
+  --focus-ring-color: var(--autocompletebox-focus-ring-color);
+  --focus-ring-active-width: var(--autocompletebox-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--autocompletebox-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--autocompletebox-focus-ring-outward-offset);
 }
 
-:host ul {
-  max-height: var(--max-dropdown-height, 350px);
-  background: var(--background-color, #fff);
+:host [part="input"] {
+  cursor: inherit;
+}
+
+:host [part="input"][readonly]:not([invalid]) {
+  --textbox-border-color: var(--autocompletebox-border-color);
+}
+
+:host [part="input"]::part(suffix) {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
+}
+
+:host [part="caret"] {
+  margin: calc(var(--autocompletebox-gap) / 2);
+  transition-property: transform;
+  transition-duration: .2s;
+  transition-timing-function: ease;
+  transform: rotate(0);
+}
+
+:host [part="popup"] {
+  z-index: 100;
+}
+
+:host [part="projection"] {
+  padding: var(--autocompletebox-padding-top) 0;
+  background: var(--autocompletebox-background-color);
+  border-radius: var(--autocompletebox-border-radius);
   box-sizing: border-box;
-  width: 100%;
   margin: 0;
-  padding: 0;
-  list-style-type: none;
-  position: absolute;
-  overflow: auto;
 }
 
-:host li {
-  cursor: pointer;
-  padding: 8px;
+:host [part="item"] {
+  border-radius: 0;
+}
+
+:host [part="empty"], :host [part="loading"] {
+  padding-top: var(--autocompletebox-padding-top);
+  padding-right: var(--autocompletebox-padding-right);
+  padding-bottom: var(--autocompletebox-padding-bottom);
+  padding-left: var(--autocompletebox-padding-left);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+}
+
+:host([is-drop-down-open]) [part="caret"] {
+  transform: rotate(180deg);
 }
 
-:host li:hover {
-  background-color: var(--hover-background-color, #f0f0f0);
+:host([readonly]) [part="input"] {
+  pointer-events: none;
 }
 
     `;

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,uCAAuC;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AutoCompleteBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,uCAAuC;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8IT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CAyH1D"}
+{"version":3,"file":"AutoCompleteBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CAqM1D"}