codexly-ui 0.1.10 → 0.1.12

package/fesm2022/codexly-ui.mjs

@@ -174,7 +174,7 @@ const CLX_FONT_CATALOG = [
     {
         label: 'Inter',
         value: 'Inter',
-        googleUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
     },
     {
         label: 'Poppins',
@@ -216,6 +216,71 @@ const CLX_FONT_CATALOG = [
         value: 'Open Sans',
         googleUrl: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
     },
+    {
+        label: 'Work Sans',
+        value: 'Work Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Manrope',
+        value: 'Manrope',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Sora',
+        value: 'Sora',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Outfit',
+        value: 'Outfit',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Rubik',
+        value: 'Rubik',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Source Sans 3',
+        value: 'Source Sans 3',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Space Grotesk',
+        value: 'Space Grotesk',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Merriweather',
+        value: 'Merriweather',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap',
+    },
+    {
+        label: 'Playfair Display',
+        value: 'Playfair Display',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+    },
+    {
+        label: 'Lora',
+        value: 'Lora',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'PT Serif',
+        value: 'PT Serif',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+    },
+    {
+        label: 'Caveat',
+        value: 'Caveat',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap',
+    },
+    {
+        label: 'Dancing Script',
+        value: 'Dancing Script',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap',
+    },
 ];
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
@@ -4452,11 +4517,18 @@ class ClxSelectComponent {
     _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _loadedFonts = new Set();
     _scrollStrategy = this._sso.reposition();
     constructor() {
         this._searchQuery = toSignal(this._searchControl.valueChanges.pipe(startWith(''), map(v => v ?? '')), { initialValue: '' });
         if (this._ngControl)
             this._ngControl.valueAccessor = this;
+        effect(() => {
+            const family = this._displayFontFamily();
+            if (family)
+                this._loadPreviewFont(family);
+        });
         // Async autocomplete: debounce + switchMap sobre el search control
         this._searchControl.valueChanges.pipe(debounceTime(this.debounceMs()), distinctUntilChanged(), switchMap(query => {
             const q = query ?? '';
@@ -4504,6 +4576,10 @@ class ClxSelectComponent {
         const sel = this._selectedOptions();
         return sel.length ? sel[0].label : this.placeholder();
     }, ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    _displayFontFamily = computed(() => {
+        const sel = this._selectedOptions();
+        return sel.length ? sel[0].previewFontFamily ?? null : null;
+    }, ...(ngDevMode ? [{ debugName: "_displayFontFamily" }] : /* istanbul ignore next */ []));
     _overlayWidth = computed(() => this._overlayWidthPx(), ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
@@ -4554,6 +4630,26 @@ class ClxSelectComponent {
         if (!this.async())
             this._searchControl.setValue('', { emitEvent: false });
         this._isOpen.set(true);
+        for (const opt of this.options()) {
+            if (opt.previewFontFamily)
+                this._loadPreviewFont(opt.previewFontFamily);
+        }
+    }
+    _loadPreviewFont(family) {
+        if (!this._isBrowser || this._loadedFonts.has(family))
+            return;
+        const option = CLX_FONT_CATALOG.find(f => f.value === family);
+        if (!option)
+            return;
+        this._loadedFonts.add(family);
+        const id = `clx-preview-font-${family.replace(/\s+/g, '-').toLowerCase()}`;
+        if (document.getElementById(id))
+            return;
+        const link = document.createElement('link');
+        link.id = id;
+        link.rel = 'stylesheet';
+        link.href = option.googleUrl;
+        document.head.appendChild(link);
     }
     _closePanel() {
         this._isOpen.set(false);
@@ -4663,7 +4759,7 @@ class ClxSelectComponent {
 
       <!-- Single mode: display value -->
       } @else {
-        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
       <!-- Right controls: clear + chevron -->
@@ -4743,7 +4839,7 @@ class ClxSelectComponent {
                 [disabled]="opt.disabled ?? false"
                 (mousedown)="$event.preventDefault()"
                 (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
                 @if (_isSelected(opt.value)) {
                   <span clx-icon name="check" size="xs" class="shrink-0"></span>
                 }
@@ -4810,7 +4906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       <!-- Single mode: display value -->
       } @else {
-        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
       <!-- Right controls: clear + chevron -->
@@ -4890,7 +4986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 [disabled]="opt.disabled ?? false"
                 (mousedown)="$event.preventDefault()"
                 (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
                 @if (_isSelected(opt.value)) {
                   <span clx-icon name="check" size="xs" class="shrink-0"></span>
                 }