@besaitech/ng-design-system 0.0.37 → 0.0.38

package/fesm2022/besaitech-ng-design-system.mjs

@@ -3156,6 +3156,7 @@ class SdsSelect {
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -3169,6 +3170,8 @@ class SdsSelect {
     trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     panelEl = null;
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    filled = computed(() => this.appearance() === 'filled', ...(ngDevMode ? [{ debugName: "filled" }] : []));
+    onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
     normalizedOptions = computed(() => this.options().map((o) => this.norm(o)), ...(ngDevMode ? [{ debugName: "normalizedOptions" }] : []));
     filteredOptions = computed(() => {
         const f = this.filterText().trim().toLowerCase();
@@ -3182,9 +3185,26 @@ class SdsSelect {
     activeDescId = computed(() => this.highlightedIndex() >= 0 ? this.optionId(this.highlightedIndex()) : null, ...(ngDevMode ? [{ debugName: "activeDescId" }] : []));
     wrapperClasses = computed(() => {
         const parts = [SIZES$4[this.size()]];
-        parts.push(this.error()
-            ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
-            : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
+        if (this.filled()) {
+            // border-transparent (not border-0) so a filled field is the same height as a bordered one when a
+            // form mixes them — mirrors sds-input's filled appearance.
+            parts.push('border-transparent bg-muted text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus:ring-2 focus:ring-danger/25'
+                : 'focus:ring-2 focus:ring-brand-500/25');
+        }
+        else if (this.onBrand()) {
+            parts.push('bg-white/10 text-white');
+            parts.push(this.error()
+                ? 'border-danger focus:ring-2 focus:ring-danger/25'
+                : 'border-white/15 focus:border-white/40 focus:ring-2 focus:ring-white/20');
+        }
+        else {
+            parts.push('bg-white text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
+                : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
+        }
         parts.push(this.isDisabled()
             ? 'opacity-60 cursor-not-allowed pointer-events-none'
             : 'cursor-pointer');
@@ -3470,7 +3490,7 @@ class SdsSelect {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
         ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
@@ -3490,7 +3510,7 @@ class SdsSelect {
         [attr.aria-haspopup]="'listbox'"
         [attr.aria-activedescendant]="open() ? activeDescId() : null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-        class="relative flex items-center rounded-control border bg-white transition-colors focus:outline-none"
+        class="relative flex items-center rounded-control border transition-colors focus:outline-none"
         [class]="wrapperClasses()"
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
@@ -3515,7 +3535,7 @@ class SdsSelect {
         }
 
         <span
-          class="mr-3 ml-1 shrink-0 text-ink-soft transition-transform duration-150"
+          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center text-ink-soft transition-transform duration-150"
           [class.rotate-180]="open()"
         >
           <sds-icon name="chevron-down" [size]="18" />
@@ -3610,7 +3630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-haspopup]="'listbox'"
         [attr.aria-activedescendant]="open() ? activeDescId() : null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-        class="relative flex items-center rounded-control border bg-white transition-colors focus:outline-none"
+        class="relative flex items-center rounded-control border transition-colors focus:outline-none"
         [class]="wrapperClasses()"
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
@@ -3635,7 +3655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
 
         <span
-          class="mr-3 ml-1 shrink-0 text-ink-soft transition-transform duration-150"
+          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center text-ink-soft transition-transform duration-150"
           [class.rotate-180]="open()"
         >
           <sds-icon name="chevron-down" [size]="18" />
@@ -3699,7 +3719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SIZES$3 = {
     sm: 'min-h-9 text-sm',
@@ -5494,7 +5514,7 @@ class SdsPaginator {
         </label>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsSelect, selector: "sds-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "label", "ariaLabel", "hint", "error", "size", "disabled", "clearable", "filter", "filterPlaceholder", "emptyMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsSelect, selector: "sds-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "label", "ariaLabel", "hint", "error", "size", "appearance", "disabled", "clearable", "filter", "filterPlaceholder", "emptyMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsPaginator, decorators: [{
             type: Component,