ngx-strata 0.4.3-beta.2 → 0.4.3

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, Injector, LOCALE_ID, viewChildren, booleanAttribute, 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, numberAttribute, booleanAttribute, 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';
@@ -2060,12 +2060,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 class StrataInputFieldComponent {
+    hostElement = inject((ElementRef));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    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 */
+    ...(ngDevMode ? [{ debugName: "characterCounterFormatter" }] : /* istanbul ignore next */ []));
     iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : /* istanbul ignore next */ {}), descendants: true });
     inputField = contentChild(StrataNativeInputRefDirective, { ...(ngDevMode ? { debugName: "inputField" } : /* istanbul ignore next */ {}), descendants: true });
     pendingFocus = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pendingFocus" }] : /* istanbul ignore next */ []));
+    currentLength = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
+    nativeMaxLength = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeMaxLength" }] : /* istanbul ignore next */ []));
+    effectiveMaxLength = computed(() => this.maxLength() ?? this.nativeMaxLength(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []));
+    counterText = computed(() => {
+        const current = this.currentLength();
+        const max = this.effectiveMaxLength();
+        const formatter = this.characterCounterFormatter();
+        if (formatter) {
+            return formatter(current, max);
+        }
+        if (max !== undefined) {
+            return `${current} / ${max}`;
+        }
+        return `${current}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterText" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const input = this.inputField();
@@ -2077,27 +2101,67 @@ class StrataInputFieldComponent {
     }
     ngAfterViewInit() {
         setTimeout(() => this.iconComponents().forEach((icon) => icon.size.set('sm')), 1);
+        this.syncNativeState();
+    }
+    ngAfterContentChecked() {
+        this.syncNativeState();
+    }
+    onNativeInput() {
+        this.syncNativeState();
     }
     focus() {
         this.pendingFocus.set(true);
     }
     blur() {
-        this.inputField()?.el.nativeElement.blur();
+        this.nativeInput?.blur();
     }
     get nativeInput() {
-        return this.inputField()?.el.nativeElement;
+        return (this.inputField()?.el.nativeElement ??
+            this.hostElement.nativeElement.querySelector('input, textarea') ??
+            undefined);
+    }
+    syncNativeState() {
+        const input = this.nativeInput;
+        if (!input) {
+            return;
+        }
+        const explicitMax = this.maxLength();
+        if (explicitMax !== undefined) {
+            const maxStr = String(explicitMax);
+            if (input.getAttribute('maxlength') !== maxStr) {
+                input.setAttribute('maxlength', maxStr);
+            }
+            if (input.value.length > explicitMax) {
+                input.value = input.value.slice(0, explicitMax);
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        else {
+            const attr = input.getAttribute('maxlength');
+            const parsed = attr !== null && attr !== '' ? parseInt(attr, 10) : undefined;
+            const validMax = parsed !== undefined && !isNaN(parsed) && parsed >= 0 ? parsed : undefined;
+            if (this.nativeMaxLength() !== validMax) {
+                this.nativeMaxLength.set(validMax);
+            }
+        }
+        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.2.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 } }, host: { 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" });
+    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" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-input-field', imports: [], host: {
                         '[class.st-size-sm]': 'size() === "sm"',
                         '[class.st-size-md]': 'size() === "md"',
-                        '[class.st-size-lg]': 'size() === "lg"'
-                    }, 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" }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
+                        '[class.st-size-lg]': 'size() === "lg"',
+                        '(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), { ...{
                             descendants: true
                         }, isSignal: true }] }] } });
 
@@ -3997,7 +4061,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"] }, { 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", "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,