codexly-ui 0.1.11 → 0.1.12

package/fesm2022/codexly-ui.mjs

@@ -4517,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 ?? '';
@@ -4569,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 */ []));
@@ -4619,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);
@@ -4728,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 -->
@@ -4808,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>
                 }
@@ -4875,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 -->
@@ -4955,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>
                 }