@kouji-ui/components 0.4.0 → 0.4.1

package/fesm2022/kouji-ui-components.mjs

@@ -10840,21 +10840,21 @@ class KjSelectComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: KjSelectComponent, isStandalone: true, selector: "kj-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabled() ? '' : null", "attr.data-multiple": "multiple() ? '' : null", "attr.data-size": "kjSize() === 'md' ? null : kjSize()" }, classAttribute: "kj-select" }, queries: [{ propertyName: "options", predicate: i0.forwardRef(() => KjOptionComponent), isSignal: true }], hostDirectives: [{ directive: i1.KjSelect, inputs: ["kjSelectValue", "value"], outputs: ["kjSelectValueChange", "valueChange"] }], ngImport: i0, template: `
     <button type="button" kjSelectTrigger #trig="kjSelectTrigger" class="kj-select-trigger" aria-haspopup="listbox" [disabled]="disabled() || null" [kjMultiple]="multiple()">
       <span class="kj-select-trigger-label">{{ displayLabel() }}</span>
-      <span class="kj-select-trigger-caret" aria-hidden="true">▾</span>
+      <span kjIcon="chevron-down" class="kj-select-trigger-caret" aria-hidden="true"></span>
     </button>
     <kj-select-content [kjFor]="trig" class="kj-select-content">
       <ng-content />
     </kj-select-content>
-  `, isInline: true, styles: ["@layer kj.component{.kj-select{position:relative;display:inline-block;min-width:12rem}.kj-select-trigger{--kj-select-trigger-height: 2.25rem;width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);background:var(--kj-bg-field);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-select-trigger-height);font:.875rem var(--kj-font-sans);cursor:pointer}.kj-select[data-size=xs] .kj-select-trigger{--kj-select-trigger-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);gap:var(--kj-space-xs)}.kj-select[data-size=sm] .kj-select-trigger{--kj-select-trigger-height: 2rem;font-size:.8125rem}.kj-select[data-size=lg] .kj-select-trigger{--kj-select-trigger-height: 2.75rem;font-size:1rem}.kj-select[data-size=xs]{min-width:0}.kj-select-trigger:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px}.kj-select[data-disabled] .kj-select-trigger{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-select-content{box-sizing:border-box;min-width:12rem;width:max-content;background:var(--kj-bg-elevated);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / .12));padding:4px;max-height:16rem;overflow:auto;z-index:100}.kj-select-content[hidden]{display:none}.kj-option{padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-selector);cursor:pointer;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans)}.kj-option:hover{background:var(--kj-bg-field)}.kj-option[aria-selected=true]{background:color-mix(in oklab,var(--kj-bg-primary) 12%,transparent);color:var(--kj-fg-primary);font-weight:600}.kj-option[aria-selected=true]:hover{background:color-mix(in oklab,var(--kj-bg-primary) 18%,transparent)}}\n"], dependencies: [{ kind: "directive", type: KjSelectTrigger, selector: "[kjSelectTrigger]", inputs: ["kjMultiple", "kjDisabled"], exportAs: ["kjSelectTrigger"] }, { kind: "component", type: KjSelectContent, selector: "kj-select-content", inputs: ["kjSide", "kjAlign", "kjOffset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kj.component{.kj-select{position:relative;display:inline-block;min-width:12rem}.kj-select-trigger{--kj-select-trigger-height: 2.25rem;width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);background:var(--kj-bg-field);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-select-trigger-height);font:.875rem var(--kj-font-sans);cursor:pointer}.kj-select[data-size=xs] .kj-select-trigger{--kj-select-trigger-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);gap:var(--kj-space-xs)}.kj-select[data-size=sm] .kj-select-trigger{--kj-select-trigger-height: 2rem;font-size:.8125rem}.kj-select[data-size=lg] .kj-select-trigger{--kj-select-trigger-height: 2.75rem;font-size:1rem}.kj-select[data-size=xs]{min-width:0}.kj-select-trigger-caret{font-size:.875em;color:var(--kj-fg-muted);flex:none}.kj-select-trigger:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px}.kj-select[data-disabled] .kj-select-trigger{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-select-content{box-sizing:border-box;min-width:12rem;width:max-content;background:var(--kj-bg-elevated);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / .12));padding:4px;max-height:16rem;overflow:auto;z-index:100}.kj-select-content[hidden]{display:none}.kj-option{padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-selector);cursor:pointer;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans)}.kj-option:hover{background:var(--kj-bg-field)}.kj-option[aria-selected=true]{background:color-mix(in oklab,var(--kj-bg-primary) 12%,transparent);color:var(--kj-fg-primary);font-weight:600}.kj-option[aria-selected=true]:hover{background:color-mix(in oklab,var(--kj-bg-primary) 18%,transparent)}}\n"], dependencies: [{ kind: "directive", type: KjIconDirective, selector: "span[kjIcon], i[kjIcon]", inputs: ["kjIcon", "kjIconLabel", "kjIconColor", "kjIconSize"] }, { kind: "directive", type: KjSelectTrigger, selector: "[kjSelectTrigger]", inputs: ["kjMultiple", "kjDisabled"], exportAs: ["kjSelectTrigger"] }, { kind: "component", type: KjSelectContent, selector: "kj-select-content", inputs: ["kjSide", "kjAlign", "kjOffset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kj-select', standalone: true, hostDirectives: [
                         { directive: KjSelect, inputs: ['kjSelectValue: value'], outputs: ['kjSelectValueChange: valueChange'] },
-                    ], imports: [KjSelectTrigger, KjSelectContent], template: `
+                    ], imports: [KjIconDirective, KjSelectTrigger, KjSelectContent], template: `
     <button type="button" kjSelectTrigger #trig="kjSelectTrigger" class="kj-select-trigger" aria-haspopup="listbox" [disabled]="disabled() || null" [kjMultiple]="multiple()">
       <span class="kj-select-trigger-label">{{ displayLabel() }}</span>
-      <span class="kj-select-trigger-caret" aria-hidden="true">▾</span>
+      <span kjIcon="chevron-down" class="kj-select-trigger-caret" aria-hidden="true"></span>
     </button>
     <kj-select-content [kjFor]="trig" class="kj-select-content">
       <ng-content />
@@ -10864,7 +10864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[attr.data-disabled]': "disabled() ? '' : null",
                         '[attr.data-multiple]': "multiple() ? '' : null",
                         '[attr.data-size]': "kjSize() === 'md' ? null : kjSize()",
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-select{position:relative;display:inline-block;min-width:12rem}.kj-select-trigger{--kj-select-trigger-height: 2.25rem;width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);background:var(--kj-bg-field);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-select-trigger-height);font:.875rem var(--kj-font-sans);cursor:pointer}.kj-select[data-size=xs] .kj-select-trigger{--kj-select-trigger-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);gap:var(--kj-space-xs)}.kj-select[data-size=sm] .kj-select-trigger{--kj-select-trigger-height: 2rem;font-size:.8125rem}.kj-select[data-size=lg] .kj-select-trigger{--kj-select-trigger-height: 2.75rem;font-size:1rem}.kj-select[data-size=xs]{min-width:0}.kj-select-trigger:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px}.kj-select[data-disabled] .kj-select-trigger{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-select-content{box-sizing:border-box;min-width:12rem;width:max-content;background:var(--kj-bg-elevated);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / .12));padding:4px;max-height:16rem;overflow:auto;z-index:100}.kj-select-content[hidden]{display:none}.kj-option{padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-selector);cursor:pointer;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans)}.kj-option:hover{background:var(--kj-bg-field)}.kj-option[aria-selected=true]{background:color-mix(in oklab,var(--kj-bg-primary) 12%,transparent);color:var(--kj-fg-primary);font-weight:600}.kj-option[aria-selected=true]:hover{background:color-mix(in oklab,var(--kj-bg-primary) 18%,transparent)}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-select{position:relative;display:inline-block;min-width:12rem}.kj-select-trigger{--kj-select-trigger-height: 2.25rem;width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);background:var(--kj-bg-field);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-select-trigger-height);font:.875rem var(--kj-font-sans);cursor:pointer}.kj-select[data-size=xs] .kj-select-trigger{--kj-select-trigger-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);gap:var(--kj-space-xs)}.kj-select[data-size=sm] .kj-select-trigger{--kj-select-trigger-height: 2rem;font-size:.8125rem}.kj-select[data-size=lg] .kj-select-trigger{--kj-select-trigger-height: 2.75rem;font-size:1rem}.kj-select[data-size=xs]{min-width:0}.kj-select-trigger-caret{font-size:.875em;color:var(--kj-fg-muted);flex:none}.kj-select-trigger:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px}.kj-select[data-disabled] .kj-select-trigger{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-select-content{box-sizing:border-box;min-width:12rem;width:max-content;background:var(--kj-bg-elevated);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / .12));padding:4px;max-height:16rem;overflow:auto;z-index:100}.kj-select-content[hidden]{display:none}.kj-option{padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-selector);cursor:pointer;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans)}.kj-option:hover{background:var(--kj-bg-field)}.kj-option[aria-selected=true]{background:color-mix(in oklab,var(--kj-bg-primary) 12%,transparent);color:var(--kj-fg-primary);font-weight:600}.kj-option[aria-selected=true]:hover{background:color-mix(in oklab,var(--kj-bg-primary) 18%,transparent)}}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => forwardRef(() => KjOptionComponent)), { isSignal: true }] }] } });
 /**
  * Single option row.