codexly-ui 0.1.11 → 0.1.13

package/fesm2022/codexly-ui.mjs

@@ -281,6 +281,46 @@ const CLX_FONT_CATALOG = [
         value: 'Dancing Script',
         googleUrl: 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap',
     },
+    {
+        label: 'Cinzel',
+        value: 'Cinzel',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap',
+    },
+    {
+        label: 'Berkshire Swash',
+        value: 'Berkshire Swash',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap',
+    },
+    {
+        label: 'JetBrains Mono',
+        value: 'JetBrains Mono',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Orbitron',
+        value: 'Orbitron',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap',
+    },
+    {
+        label: 'UnifrakturMaguntia',
+        value: 'UnifrakturMaguntia',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap',
+    },
+    {
+        label: 'Pirata One',
+        value: 'Pirata One',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Pirata+One&display=swap',
+    },
+    {
+        label: 'Press Start 2P',
+        value: 'Press Start 2P',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+    },
+    {
+        label: 'Bungee',
+        value: 'Bungee',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Bungee&display=swap',
+    },
 ];
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
@@ -4517,11 +4557,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 ?? '';
@@ -4569,6 +4616,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 */ []));
@@ -4619,6 +4670,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);
@@ -4728,7 +4799,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 -->
@@ -4808,7 +4879,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>
                 }
@@ -4875,7 +4946,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 -->
@@ -4955,7 +5026,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>
                 }