ngx-strata 0.4.3 → 0.4.4

package/fesm2022/ngx-strata.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, DestroyRef, Pipe, HostBinding, Component, contentChildren, forwardRef, contentChild, HostListener, ViewContainerRef, viewChild, numberAttribute, booleanAttribute, Injector, LOCALE_ID, viewChildren, ContentChildren, TemplateRef } from '@angular/core';
+import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, DestroyRef, Pipe, HostBinding, Component, contentChildren, forwardRef, contentChild, HostListener, ViewContainerRef, viewChild, booleanAttribute, numberAttribute, Injector, LOCALE_ID, viewChildren, ContentChildren, TemplateRef } from '@angular/core';
 import { Observable, tap, map, fromEvent, switchMap, filter } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -2063,6 +2063,7 @@ class StrataInputFieldComponent {
     hostElement = inject((ElementRef));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : booleanAttribute(value) });
     maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value) });
     showCharacterCounter = input(false, { ...(ngDevMode ? { debugName: "showCharacterCounter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     characterCounterFormatter = input(undefined, /* @ts-ignore */
@@ -2075,8 +2076,12 @@ class StrataInputFieldComponent {
     ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
     nativeMaxLength = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nativeMaxLength" }] : /* istanbul ignore next */ []));
+    nativeDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeDisabled" }] : /* istanbul ignore next */ []));
     effectiveMaxLength = computed(() => this.maxLength() ?? this.nativeMaxLength(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => (this.disabled() ?? false) || this.nativeDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     counterText = computed(() => {
         const current = this.currentLength();
         const max = this.effectiveMaxLength();
@@ -2098,6 +2103,16 @@ class StrataInputFieldComponent {
                 this.pendingFocus.set(false);
             }
         });
+        effect(() => {
+            const explicitDisabled = this.disabled();
+            const input = this.nativeInput;
+            if (input && explicitDisabled !== undefined && input.disabled !== explicitDisabled) {
+                input.disabled = explicitDisabled;
+                if (this.nativeDisabled() !== explicitDisabled) {
+                    this.nativeDisabled.set(explicitDisabled);
+                }
+            }
+        });
     }
     ngAfterViewInit() {
         setTimeout(() => this.iconComponents().forEach((icon) => icon.size.set('sm')), 1);
@@ -2110,6 +2125,9 @@ class StrataInputFieldComponent {
         this.syncNativeState();
     }
     focus() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
         this.pendingFocus.set(true);
     }
     blur() {
@@ -2144,13 +2162,21 @@ class StrataInputFieldComponent {
                 this.nativeMaxLength.set(validMax);
             }
         }
+        const explicitDisabled = this.disabled();
+        if (explicitDisabled !== undefined && input.disabled !== explicitDisabled) {
+            input.disabled = explicitDisabled;
+        }
+        const isInputDisabled = input.disabled || input.hasAttribute('disabled');
+        if (this.nativeDisabled() !== isInputDisabled) {
+            this.nativeDisabled.set(isInputDisabled);
+        }
         const currentLen = input.value.length;
         if (this.currentLength() !== currentLen) {
             this.currentLength.set(currentLen);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCounter: { classPropertyName: "showCharacterCounter", publicName: "showCharacterCounter", isSignal: true, isRequired: false, transformFunction: null }, characterCounterFormatter: { classPropertyName: "characterCounterFormatter", publicName: "characterCounterFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onNativeInput()", "change": "onNativeInput()" }, properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n@if (showCharacterCounter()) {\n  <div class=\"st-input-field-footer\">\n    <span class=\"st-input-field-counter\" aria-live=\"polite\">{{ counterText() }}</span>\n  </div>\n}\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCounter: { classPropertyName: "showCharacterCounter", publicName: "showCharacterCounter", isSignal: true, isRequired: false, transformFunction: null }, characterCounterFormatter: { classPropertyName: "characterCounterFormatter", publicName: "characterCounterFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onNativeInput()", "change": "onNativeInput()" }, properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n@if (showCharacterCounter()) {\n  <div class=\"st-input-field-footer\">\n    <span class=\"st-input-field-counter\" aria-live=\"polite\">{{ counterText() }}</span>\n  </div>\n}\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, decorators: [{
             type: Component,
@@ -2158,10 +2184,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[class.st-size-sm]': 'size() === "sm"',
                         '[class.st-size-md]': 'size() === "md"',
                         '[class.st-size-lg]': 'size() === "lg"',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
                         '(input)': 'onNativeInput()',
                         '(change)': 'onNativeInput()'
                     }, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n@if (showCharacterCounter()) {\n  <div class=\"st-input-field-footer\">\n    <span class=\"st-input-field-counter\" aria-live=\"polite\">{{ counterText() }}</span>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharacterCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharacterCounter", required: false }] }], characterCounterFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterCounterFormatter", required: false }] }], iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharacterCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharacterCounter", required: false }] }], characterCounterFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterCounterFormatter", required: false }] }], iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
                             descendants: true
                         }, isSignal: true }] }] } });
 
@@ -4061,7 +4089,7 @@ class StrataSingleSelectComponent {
                 useExisting: forwardRef(() => StrataSingleSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n  [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+        ], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n  [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
             type: Component,