@akcelik/strct 1.19.0 → 1.20.0

package/fesm2022/akcelik-strct.mjs

@@ -7469,6 +7469,331 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+let selectCounter = 0;
+/**
+ * Select-only combobox (APG pattern): a real button trigger wearing the shared
+ * `.strct-control` look, opening a token-styled listbox — so the option list
+ * matches the theme instead of the OS popup a native `<select>` shows.
+ * CVA-compatible; options are non-filterable (reach for `strct-combobox` when
+ * the list needs typing to narrow).
+ *
+ *   <strct-field label="Region">
+ *     <strct-select [options]="regions" [(ngModel)]="region" placeholder="Pick a region" />
+ *   </strct-field>
+ *
+ * Keyboard follows the native select: ArrowDown/Up and Enter/Space open,
+ * arrows move (skipping disabled options), Home/End jump, typing jumps to the
+ * matching label (typeahead), Enter/Space commit, Escape/Tab close without
+ * committing. The selected option carries a leading ✓ and gets the highlight
+ * when reopening — the same select ergonomics as `strct-dropdown-item
+ * [selected]`.
+ */
+class StrctSelect {
+    host = inject(ElementRef);
+    listId = `strct-sel-${++selectCounter}`;
+    /** Available options (set `disabled: true` on an option to gray it out). */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Muted text shown while no value is selected (localizable). */
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the listbox (localizable). */
+    listLabel = input('', ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
+    /** Text shown when `options` is empty (localizable). */
+    emptyText = input('No options', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Static disable flag (forms also drive it via setDisabledState). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => this.options().find((o) => o.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    /** Typeahead buffer — clears half a second after the last keystroke. */
+    typed = '';
+    typedTimer = null;
+    onChange = () => { };
+    onTouched = () => { };
+    toggle() {
+        if (this.open())
+            this.close();
+        else
+            this.openList();
+    }
+    openList() {
+        if (this.isDisabled() || this.disabled())
+            return;
+        this.open.set(true);
+        this.activeIndex.set(this.initialIndex());
+        this.scrollActiveIntoView();
+    }
+    close() {
+        this.open.set(false);
+    }
+    onKeydown(event) {
+        const key = event.key;
+        const opts = this.options();
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault();
+            if (!this.open())
+                return this.openList();
+            this.move(key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (key === 'Home' || key === 'End') {
+            if (!this.open())
+                return;
+            event.preventDefault();
+            this.moveTo(key === 'Home' ? 0 : opts.length - 1, key === 'Home' ? 1 : -1);
+        }
+        else if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            if (!this.open())
+                return this.openList();
+            const opt = opts[this.activeIndex()];
+            if (opt && !opt.disabled)
+                this.commit(opt);
+        }
+        else if (key === 'Escape') {
+            if (this.open()) {
+                event.preventDefault();
+                this.close();
+            }
+        }
+        else if (key === 'Tab') {
+            this.close();
+        }
+        else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            this.typeahead(key);
+        }
+    }
+    /**
+     * Native-select typeahead: letters accumulate into a prefix that jumps to
+     * the matching label; repeating one letter cycles its matches instead.
+     */
+    typeahead(char) {
+        const lower = char.toLowerCase();
+        if (this.typedTimer)
+            clearTimeout(this.typedTimer);
+        this.typedTimer = setTimeout(() => (this.typed = ''), 500);
+        const repeatCycle = this.typed.length > 0 && [...this.typed].every((c) => c === lower);
+        this.typed += lower;
+        const prefix = repeatCycle ? lower : this.typed;
+        const opts = this.options();
+        if (!opts.length)
+            return;
+        const wasOpen = this.open();
+        if (!wasOpen)
+            this.openList();
+        const from = this.activeIndex();
+        for (let step = repeatCycle || !wasOpen ? 1 : 0; step <= opts.length; step++) {
+            const i = (from + step) % opts.length;
+            const opt = opts[i];
+            if (!opt.disabled && opt.label.toLowerCase().startsWith(prefix)) {
+                this.activeIndex.set(i);
+                this.scrollActiveIntoView();
+                return;
+            }
+        }
+    }
+    move(delta) {
+        const opts = this.options();
+        if (!opts.length)
+            return;
+        let i = this.activeIndex();
+        let guard = opts.length;
+        do {
+            i = (i + delta + opts.length) % opts.length;
+        } while (opts[i].disabled && --guard > 0);
+        this.activeIndex.set(i);
+        this.scrollActiveIntoView();
+    }
+    /** Jump to `index`, walking `dir` past disabled options. */
+    moveTo(index, dir) {
+        const opts = this.options();
+        let i = index;
+        for (let n = 0; n < opts.length && opts[i]?.disabled; n++) {
+            i = (i + dir + opts.length) % opts.length;
+        }
+        if (opts[i] && !opts[i].disabled) {
+            this.activeIndex.set(i);
+            this.scrollActiveIntoView();
+        }
+    }
+    pick(opt, event) {
+        event.preventDefault(); // keep focus on the trigger button
+        if (opt.disabled)
+            return;
+        this.commit(opt);
+    }
+    commit(opt) {
+        this.value.set(opt.value);
+        this.close();
+        this.onChange(opt.value);
+        this.onTouched();
+    }
+    onBlur() {
+        // Any mousedown inside the list preventDefaults, so focus never leaves
+        // the trigger mid-interaction; outside clicks close via onDocClick and
+        // Tab closes in onKeydown — blur only marks the control touched.
+        this.onTouched();
+    }
+    /** Highlight starts on the selected option — or the first enabled one. */
+    initialIndex() {
+        const opts = this.options();
+        const sel = opts.findIndex((o) => o.value === this.value() && !o.disabled);
+        if (sel >= 0)
+            return sel;
+        const first = opts.findIndex((o) => !o.disabled);
+        return first < 0 ? 0 : first;
+    }
+    scrollActiveIntoView() {
+        setTimeout(() => {
+            document
+                .getElementById(`${this.listId}-${this.activeIndex()}`)
+                ?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    onDocClick(event) {
+        if (this.open() && !this.host.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSelect, isStandalone: true, selector: "strct-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-sel" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctSelect), multi: true },
+        ], ngImport: i0, template: `
+    <button
+      #btn
+      type="button"
+      strctField
+      class="strct-control strct-sel__btn"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? listId : null"
+      [attr.aria-activedescendant]="open() ? listId + '-' + activeIndex() : null"
+      [disabled]="isDisabled() || disabled()"
+      (click)="toggle()"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur()"
+    >
+      <span class="strct-sel__value" [class.strct-sel__value--placeholder]="!selectedOption()">
+        {{ selectedOption()?.label ?? placeholder() }}
+      </span>
+      <strct-icon class="strct-sel__caret" strictName="chevronDown" [size]="14" />
+    </button>
+    @if (open()) {
+      <div
+        class="strct-sel__list"
+        role="listbox"
+        [id]="listId"
+        [attr.aria-label]="listLabel() || null"
+        [strctOverlay]="btn"
+        strctOverlayPlacement="bottom-start"
+        [strctOverlayMatchWidth]="true"
+        (mousedown)="$event.preventDefault()"
+      >
+        @for (opt of options(); track opt.value; let i = $index) {
+          <div
+            class="strct-sel__opt"
+            [id]="listId + '-' + i"
+            [class.strct-sel__opt--highlight]="i === activeIndex()"
+            [class.strct-sel__opt--selected]="opt.value === value()"
+            role="option"
+            [attr.aria-selected]="opt.value === value()"
+            [attr.aria-disabled]="opt.disabled || null"
+            (mousedown)="pick(opt, $event)"
+            (mousemove)="!opt.disabled && activeIndex.set(i)"
+          >
+            <span class="strct-sel__check" aria-hidden="true">
+              @if (opt.value === value()) {
+                <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
+              }
+            </span>
+            {{ opt.label }}
+          </div>
+        } @empty {
+          <div class="strct-sel__empty">{{ emptyText() }}</div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".strct-sel{position:relative;display:block;width:100%}.strct-sel__btn{display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer}.strct-sel__btn:disabled{cursor:not-allowed}.strct-sel__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sel__value--placeholder{color:var(--t3)}.strct-sel__caret{flex:none;color:var(--t3)}.strct-sel__list{z-index:200;max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-sel__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-sel__opt--highlight{background:var(--bg-3)}.strct-sel__opt--selected{font-weight:600;background:var(--acc-s)}.strct-sel__opt--selected.strct-sel__opt--highlight{background:var(--acc-m)}.strct-sel__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-sel__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-sel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctOverlay], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctSelect), multi: true },
+                    ], template: `
+    <button
+      #btn
+      type="button"
+      strctField
+      class="strct-control strct-sel__btn"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? listId : null"
+      [attr.aria-activedescendant]="open() ? listId + '-' + activeIndex() : null"
+      [disabled]="isDisabled() || disabled()"
+      (click)="toggle()"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur()"
+    >
+      <span class="strct-sel__value" [class.strct-sel__value--placeholder]="!selectedOption()">
+        {{ selectedOption()?.label ?? placeholder() }}
+      </span>
+      <strct-icon class="strct-sel__caret" strictName="chevronDown" [size]="14" />
+    </button>
+    @if (open()) {
+      <div
+        class="strct-sel__list"
+        role="listbox"
+        [id]="listId"
+        [attr.aria-label]="listLabel() || null"
+        [strctOverlay]="btn"
+        strctOverlayPlacement="bottom-start"
+        [strctOverlayMatchWidth]="true"
+        (mousedown)="$event.preventDefault()"
+      >
+        @for (opt of options(); track opt.value; let i = $index) {
+          <div
+            class="strct-sel__opt"
+            [id]="listId + '-' + i"
+            [class.strct-sel__opt--highlight]="i === activeIndex()"
+            [class.strct-sel__opt--selected]="opt.value === value()"
+            role="option"
+            [attr.aria-selected]="opt.value === value()"
+            [attr.aria-disabled]="opt.disabled || null"
+            (mousedown)="pick(opt, $event)"
+            (mousemove)="!opt.disabled && activeIndex.set(i)"
+          >
+            <span class="strct-sel__check" aria-hidden="true">
+              @if (opt.value === value()) {
+                <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
+              }
+            </span>
+            {{ opt.label }}
+          </div>
+        } @empty {
+          <div class="strct-sel__empty">{{ emptyText() }}</div>
+        }
+      </div>
+    }
+  `, host: { class: 'strct-sel' }, styles: [".strct-sel{position:relative;display:block;width:100%}.strct-sel__btn{display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer}.strct-sel__btn:disabled{cursor:not-allowed}.strct-sel__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sel__value--placeholder{color:var(--t3)}.strct-sel__caret{flex:none;color:var(--t3)}.strct-sel__list{z-index:200;max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-sel__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-sel__opt--highlight{background:var(--bg-3)}.strct-sel__opt--selected{font-weight:600;background:var(--acc-s)}.strct-sel__opt--selected.strct-sel__opt--highlight{background:var(--acc-m)}.strct-sel__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-sel__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-sel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 const MONTHS = [
     'January',
     'February',
@@ -15992,5 +16317,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, strctComputeDiff, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, strctComputeDiff, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone };
 //# sourceMappingURL=akcelik-strct.mjs.map