@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-form-field.mjs

@@ -0,0 +1,230 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, input, Directive, InjectionToken, booleanAttribute, inject, ElementRef, viewChild, contentChild, contentChildren, computed, HostListener } from '@angular/core';
+
+class Label {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Label, isStandalone: true, selector: "ngs-label", host: { classAttribute: "ngs-label" }, ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Label, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-label', host: {
+                        'class': 'ngs-label',
+                    }, template: "<ng-content/>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class FormFieldControl {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormFieldControl });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormFieldControl, decorators: [{
+            type: Injectable
+        }] });
+
+class Hint {
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Hint, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Hint, isStandalone: true, selector: "ngs-hint", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-hint-end": "align() === \"end\"" }, classAttribute: "ngs-hint" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host.ngs-hint-end{margin-left:auto}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Hint, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-hint', standalone: true, host: {
+                        'class': 'ngs-hint',
+                        '[class.ngs-hint-end]': 'align() === "end"',
+                    }, template: "<ng-content />\n", styles: [":host{display:block}:host.ngs-hint-end{margin-left:auto}\n"] }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+class Error {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Error, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Error, isStandalone: true, selector: "ngs-error", host: { attributes: { "role": "alert" }, classAttribute: "ngs-error" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;color:var(--ngs-form-field-error-color, var(--input-error))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Error, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-error', standalone: true, host: {
+                        'class': 'ngs-error',
+                        'role': 'alert',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;color:var(--ngs-form-field-error-color, var(--input-error))}\n"] }]
+        }] });
+
+class Prefix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Prefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: Prefix, isStandalone: true, selector: "[ngsPrefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Prefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsPrefix]',
+                }]
+        }] });
+class TextPrefix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TextPrefix, isStandalone: true, selector: "[ngsTextPrefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTextPrefix]',
+                }]
+        }] });
+class IconPrefix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IconPrefix, isStandalone: true, selector: "[ngsIconPrefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIconPrefix]',
+                }]
+        }] });
+class IconButtonPrefix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconButtonPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IconButtonPrefix, isStandalone: true, selector: "[ngsIconButtonPrefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconButtonPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIconButtonPrefix]',
+                }]
+        }] });
+class Suffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Suffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: Suffix, isStandalone: true, selector: "[ngsSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Suffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsSuffix]',
+                }]
+        }] });
+class TextSuffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TextSuffix, isStandalone: true, selector: "[ngsTextSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTextSuffix]',
+                }]
+        }] });
+class IconSuffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IconSuffix, isStandalone: true, selector: "[ngsIconSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIconSuffix]',
+                }]
+        }] });
+class IconButtonSuffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconButtonSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IconButtonSuffix, isStandalone: true, selector: "[ngsIconButtonSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IconButtonSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIconButtonSuffix]',
+                }]
+        }] });
+
+const FORM_FIELD = new InjectionToken('FORM_FIELD');
+
+class FormField {
+    subscriptHiddenIfEmpty = input(false, { ...(ngDevMode ? { debugName: "subscriptHiddenIfEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    elementRef = inject(ElementRef);
+    wrapper = viewChild.required('wrapper');
+    container = viewChild.required('container');
+    control = contentChild(FormFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    labelChild = contentChild(Label, ...(ngDevMode ? [{ debugName: "labelChild" }] : /* istanbul ignore next */ []));
+    prefixChildren = contentChildren(Prefix, ...(ngDevMode ? [{ debugName: "prefixChildren" }] : /* istanbul ignore next */ []));
+    iconPrefixChildren = contentChildren(IconPrefix, ...(ngDevMode ? [{ debugName: "iconPrefixChildren" }] : /* istanbul ignore next */ []));
+    iconButtonPrefixChildren = contentChildren(IconButtonPrefix, ...(ngDevMode ? [{ debugName: "iconButtonPrefixChildren" }] : /* istanbul ignore next */ []));
+    textPrefixChildren = contentChildren(TextPrefix, ...(ngDevMode ? [{ debugName: "textPrefixChildren" }] : /* istanbul ignore next */ []));
+    suffixChildren = contentChildren(Suffix, ...(ngDevMode ? [{ debugName: "suffixChildren" }] : /* istanbul ignore next */ []));
+    iconSuffixChildren = contentChildren(IconSuffix, ...(ngDevMode ? [{ debugName: "iconSuffixChildren" }] : /* istanbul ignore next */ []));
+    iconButtonSuffixChildren = contentChildren(IconButtonSuffix, ...(ngDevMode ? [{ debugName: "iconButtonSuffixChildren" }] : /* istanbul ignore next */ []));
+    textSuffixChildren = contentChildren(TextSuffix, ...(ngDevMode ? [{ debugName: "textSuffixChildren" }] : /* istanbul ignore next */ []));
+    hintChildren = contentChildren(Hint, ...(ngDevMode ? [{ debugName: "hintChildren" }] : /* istanbul ignore next */ []));
+    errorChildren = contentChildren(Error, ...(ngDevMode ? [{ debugName: "errorChildren" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => {
+        const control = this.control();
+        if (!control) {
+            return false;
+        }
+        if (control.required) {
+            return true;
+        }
+        const ngControl = control.ngControl;
+        if (ngControl && ngControl.control && ngControl.control.validator) {
+            const validator = ngControl.control.validator({});
+            if (validator && validator['required']) {
+                return true;
+            }
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    shouldLabelFloat() {
+        return !!this.control()?.shouldLabelFloat;
+    }
+    _onClick(event) {
+        const target = event.target;
+        const wrapper = this.wrapper().nativeElement;
+        const isInsideWrapper = wrapper.contains(target);
+        if (!isInsideWrapper) {
+            return;
+        }
+        const isIconButton = !!target.closest('.ngs-icon-button') || !!target.closest('[ngsIconButton]');
+        const isToggle = !!target.closest('ngs-datepicker-toggle') || !!target.closest('ngs-date-range-picker');
+        if (this.control()?.focused || isIconButton || isToggle) {
+            return;
+        }
+        this.focus();
+        event.stopPropagation();
+    }
+    focus() {
+        const control = this.control();
+        if (control && !control.disabled) {
+            control.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormField, isStandalone: true, selector: "ngs-form-field", inputs: { subscriptHiddenIfEmpty: { classPropertyName: "subscriptHiddenIfEmpty", publicName: "subscriptHiddenIfEmpty", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onClick($event)" }, properties: { "class.ngs-form-field-disabled": "control()?.disabled", "class.ngs-form-field-invalid": "control()?.errorState", "class.ngs-form-field-should-float": "shouldLabelFloat()", "class.ngs-form-field-has-label": "labelChild()", "class.ngs-form-field-empty": "control()?.empty", "class.ngs-form-field-focused": "control()?.focused", "class.ngs-form-field-subscript-hidden-if-empty": "subscriptHiddenIfEmpty()", "class.ngs-form-field-has-icon-prefix": "iconPrefixChildren().length > 0", "class.ngs-form-field-has-icon-button-prefix": "iconButtonPrefixChildren().length > 0", "class.ngs-form-field-has-icon-suffix": "iconSuffixChildren().length > 0", "class.ngs-form-field-has-icon-button-suffix": "iconButtonSuffixChildren().length > 0" }, classAttribute: "ngs-form-field" }, providers: [
+            {
+                provide: FORM_FIELD,
+                useExisting: FormField
+            }
+        ], queries: [{ propertyName: "control", first: true, predicate: FormFieldControl, descendants: true, isSignal: true }, { propertyName: "labelChild", first: true, predicate: Label, descendants: true, isSignal: true }, { propertyName: "prefixChildren", predicate: Prefix, isSignal: true }, { propertyName: "iconPrefixChildren", predicate: IconPrefix, isSignal: true }, { propertyName: "iconButtonPrefixChildren", predicate: IconButtonPrefix, isSignal: true }, { propertyName: "textPrefixChildren", predicate: TextPrefix, isSignal: true }, { propertyName: "suffixChildren", predicate: Suffix, isSignal: true }, { propertyName: "iconSuffixChildren", predicate: IconSuffix, isSignal: true }, { propertyName: "iconButtonSuffixChildren", predicate: IconButtonSuffix, isSignal: true }, { propertyName: "textSuffixChildren", predicate: TextSuffix, isSignal: true }, { propertyName: "hintChildren", predicate: Hint, isSignal: true }, { propertyName: "errorChildren", predicate: Error, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], exportAs: ["ngsFormField"], ngImport: i0, template: "<div class=\"ngs-form-field-wrapper\" #wrapper>\n  <div class=\"ngs-form-field-container\" #container>\n    @if (prefixChildren().length > 0) {\n      <div class=\"ngs-form-field-prefix\">\n        <ng-content select=\"[ngsPrefix]\"/>\n      </div>\n    }\n\n    @if (iconPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-prefix\">\n        <ng-content select=\"[ngsIconPrefix]\"/>\n      </div>\n    }\n\n    @if (iconButtonPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-button-prefix\">\n        <ng-content select=\"[ngsIconButtonPrefix]\"/>\n      </div>\n    }\n\n    @if (textPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-text-prefix\">\n        <ng-content select=\"[ngsTextPrefix]\"/>\n      </div>\n    }\n\n    <div class=\"ngs-form-field-infix\">\n      @if (labelChild()) {\n        <label class=\"ngs-form-field-label\" [attr.for]=\"control()?.id\">\n          <ng-content select=\"ngs-label\"/>\n\n          @if (isRequired()) {\n            <span class=\"ngs-form-field-required-marker\">*</span>\n          }\n        </label>\n      }\n      <ng-content/>\n    </div>\n\n    @if (textSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-text-suffix\">\n        <ng-content select=\"[ngsTextSuffix]\"/>\n      </div>\n    }\n\n    @if (iconButtonSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-button-suffix\">\n        <ng-content select=\"[ngsIconButtonSuffix]\"/>\n      </div>\n    }\n\n    @if (iconSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-suffix\">\n        <ng-content select=\"[ngsIconSuffix]\"/>\n      </div>\n    }\n\n    @if (suffixChildren().length > 0) {\n      <div class=\"ngs-form-field-suffix\">\n        <ng-content select=\"[ngsSuffix]\"/>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"subscript-wrapper\">\n  @if (control()?.errorState && errorChildren().length > 0) {\n    <ng-content select=\"ngs-error\"/>\n  } @else if (hintChildren().length > 0) {\n    <div class=\"ngs-form-field-hint-wrapper\">\n      <ng-content select=\"ngs-hint\"/>\n    </div>\n  }\n</div>\n", styles: [":host{--ngs-form-field-color: var(--input-color);--ngs-form-field-border-color: var(--input-border-color);--ngs-form-field-border-width: 1px;--ngs-form-field-border-radius: calc(var(--spacing, .25rem) * 3);--ngs-form-field-padding-x: .75rem;--ngs-form-field-padding-y: 1.75rem;--ngs-form-field-bg: var(--color-surface);--ngs-form-field-disabled-bg: var(--color-surface-container-low);--ngs-form-field-label-color: var(--input-label-color);--ngs-form-field-error-color: var(--input-error);--ngs-form-field-container-min-height: 50px;--ngs-form-field-infix-min-height: 50px;--ngs-form-field-infix-padding-top: 23px;--ngs-form-field-infix-padding-bottom: 8px;display:block;width:var(--ngs-form-field-width, 100%)}:host.ngs-form-field-disabled{cursor:default}:host.ngs-form-field-disabled .ngs-form-field-container{background:var(--color-on-surface);border-color:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled .ngs-form-field-container{background:color-mix(in srgb,var(--color-on-surface),transparent 95%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled .ngs-form-field-container{border-color:color-mix(in srgb,var(--color-on-surface),transparent 90%)}}:host.ngs-form-field-disabled .ngs-form-field-label{color:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled .ngs-form-field-label{color:color-mix(in srgb,var(--color-on-surface),transparent 62%)}}:host.ngs-form-field-disabled ::ng-deep input{color:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled ::ng-deep input{color:color-mix(in srgb,var(--color-on-surface),transparent 62%)}}:host.ngs-form-field-focused .ngs-form-field-container{border-color:var(--input-outlined-border-focus);box-shadow:0 0 0 1px var(--input-outlined-border-focus)}:host.ngs-form-field-focused .ngs-form-field-label{color:var(--ngs-form-field-color)}:host.ngs-form-field-invalid .ngs-form-field-container{border-color:var(--ngs-form-field-error-color)}:host.ngs-form-field-invalid.ngs-form-field-focused .ngs-form-field-container{box-shadow:0 0 0 1px var(--ngs-form-field-error-color)}:host.ngs-form-field-invalid .ngs-form-field-label{color:var(--ngs-form-field-error-color)}:host .ngs-form-field-wrapper{display:flex;flex-direction:column}:host .ngs-form-field-container{position:relative;border:var(--ngs-form-field-border-width) solid var(--ngs-form-field-border-color);border-radius:var(--ngs-form-field-border-radius);background:var(--ngs-form-field-bg);padding:0 var(--ngs-form-field-padding-x);transition:border-color .2s,box-shadow .2s;min-height:var(--ngs-form-field-container-min-height);display:flex;align-items:center}:host .ngs-form-field-container:has(.ngs-form-field-icon-prefix){padding-left:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-field-container:has(.ngs-form-field-icon-button-prefix){padding-left:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-field-container:has(.ngs-form-field-icon-suffix){padding-right:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-field-container:has(.ngs-form-field-icon-button-suffix){padding-right:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-field-infix{flex:1;position:relative;padding:var(--ngs-form-field-infix-padding-top) 0 var(--ngs-form-field-infix-padding-bottom) 0;min-width:0;min-height:var(--ngs-form-field-infix-min-height);display:flex;flex-direction:column;overflow:hidden}:host:not(.ngs-form-field-has-label) .ngs-form-field-infix{padding:8px 0;display:flex;justify-content:center}:host:not(.ngs-form-field-has-label) .ngs-form-field-text-prefix,:host:not(.ngs-form-field-has-label) .ngs-form-field-text-suffix{padding:8px 0}:host .ngs-form-field-label{position:absolute;left:0;transform:translateY(-50%);top:calc(var(--ngs-form-field-container-min-height) / 2);transform-origin:left top;font-size:var(--input-font-size);color:var(--ngs-form-field-label-color);transition:transform .2s ease,font-size .2s ease,color .2s ease,top .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex;align-items:center;gap:.125rem;pointer-events:none;z-index:1;-webkit-user-select:none;user-select:none}:host .ngs-form-field-required-marker{color:var(--ngs-form-field-error-color)}:host.ngs-form-field-should-float .ngs-form-field-label{top:4px;font-size:var(--input-label-float-font-size);transform:translateY(0)}:host ::ng-deep input{line-height:var(--input-line-height);outline:none!important;text-align:var(--ngs-form-field-input-text-align, start)}:host ::ng-deep input::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep textarea{min-height:22px;line-height:var(--input-line-height);outline:none!important;text-align:var(--ngs-form-field-input-text-align, start)}:host ::ng-deep textarea[ngsTextareaAutoSize]{resize:none!important}:host ::ng-deep textarea::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep .ngs-input,:host ::ng-deep .ngs-chip-input,:host ::ng-deep .ngs-phone-input,:host ::ng-deep .ngs-number-input,:host ::ng-deep ngs-select{width:100%;border:none!important;background:transparent!important;padding:0!important;color:inherit;outline:none!important;display:block}:host ::ng-deep .ngs-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep .ngs-chip-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep .ngs-phone-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep .ngs-number-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep ngs-select:not(textarea):not(ngs-select):not(.ngs-chip-input){height:20px}:host ::ng-deep .ngs-input::placeholder,:host ::ng-deep .ngs-chip-input::placeholder,:host ::ng-deep .ngs-phone-input::placeholder,:host ::ng-deep .ngs-number-input::placeholder,:host ::ng-deep ngs-select::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep ngs-chip-grid:empty{display:none}:host ::ng-deep ngs-chip-grid{margin:calc(var(--spacing, .25rem) * 1) 0}:host ::ng-deep .ngs-date-range-input{width:100%;border:none!important;background:transparent!important;padding:0!important;font-size:var(--input-font-size);line-height:var(--input-line-height);color:inherit;outline:none!important;display:flex;height:20px}:host ::ng-deep .ngs-date-range-input::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep input{resize:none;font-size:var(--input-font-size);line-height:var(--input-line-height)}:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-chip-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-chip-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-phone-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-phone-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-number-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-number-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep ngs-select::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep ngs-select .ngs-select-placeholder{opacity:0!important;color:transparent!important}:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-date-range-input::placeholder{opacity:0!important;color:transparent!important}:host .ngs-form-field-prefix,:host .ngs-form-field-icon-prefix,:host .ngs-form-field-icon-button-prefix,:host .ngs-form-field-suffix,:host .ngs-form-field-icon-suffix,:host .ngs-form-field-icon-button-suffix,:host .ngs-form-field-text-prefix,:host .ngs-form-field-text-suffix{display:flex;align-items:center}:host .ngs-form-field-prefix,:host .ngs-form-field-icon-prefix,:host .ngs-form-field-icon-button-prefix,:host .ngs-form-field-text-prefix{margin-right:.5rem}:host .ngs-form-field-suffix,:host .ngs-form-field-icon-suffix,:host .ngs-form-field-icon-button-suffix,:host .ngs-form-field-text-suffix{margin-left:.5rem}:host .ngs-form-field-text-prefix,:host .ngs-form-field-text-suffix{color:var(--ngs-form-field-label-color);white-space:nowrap;font-size:var(--input-font-size);line-height:var(--input-line-height);padding-top:var(--ngs-form-field-infix-padding-top);padding-bottom:var(--ngs-form-field-infix-padding-bottom)}:host .subscript-wrapper{margin-top:.25rem;padding:0 .5rem;font-size:.75rem;min-height:calc(var(--spacing, .25rem) * 5.5)}:host.ngs-form-field-subscript-hidden-if-empty .subscript-wrapper:empty{display:none}:host .ngs-form-field-error{display:none}:host .ngs-form-field-hint-wrapper{display:flex;justify-content:space-between;color:var(--ngs-form-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-field', exportAs: 'ngsFormField', imports: [], providers: [
+                        {
+                            provide: FORM_FIELD,
+                            useExisting: FormField
+                        }
+                    ], host: {
+                        'class': 'ngs-form-field',
+                        '[class.ngs-form-field-disabled]': 'control()?.disabled',
+                        '[class.ngs-form-field-invalid]': 'control()?.errorState',
+                        '[class.ngs-form-field-should-float]': 'shouldLabelFloat()',
+                        '[class.ngs-form-field-has-label]': 'labelChild()',
+                        '[class.ngs-form-field-empty]': 'control()?.empty',
+                        '[class.ngs-form-field-focused]': 'control()?.focused',
+                        '[class.ngs-form-field-subscript-hidden-if-empty]': 'subscriptHiddenIfEmpty()',
+                        '[class.ngs-form-field-has-icon-prefix]': 'iconPrefixChildren().length > 0',
+                        '[class.ngs-form-field-has-icon-button-prefix]': 'iconButtonPrefixChildren().length > 0',
+                        '[class.ngs-form-field-has-icon-suffix]': 'iconSuffixChildren().length > 0',
+                        '[class.ngs-form-field-has-icon-button-suffix]': 'iconButtonSuffixChildren().length > 0',
+                    }, template: "<div class=\"ngs-form-field-wrapper\" #wrapper>\n  <div class=\"ngs-form-field-container\" #container>\n    @if (prefixChildren().length > 0) {\n      <div class=\"ngs-form-field-prefix\">\n        <ng-content select=\"[ngsPrefix]\"/>\n      </div>\n    }\n\n    @if (iconPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-prefix\">\n        <ng-content select=\"[ngsIconPrefix]\"/>\n      </div>\n    }\n\n    @if (iconButtonPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-button-prefix\">\n        <ng-content select=\"[ngsIconButtonPrefix]\"/>\n      </div>\n    }\n\n    @if (textPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-text-prefix\">\n        <ng-content select=\"[ngsTextPrefix]\"/>\n      </div>\n    }\n\n    <div class=\"ngs-form-field-infix\">\n      @if (labelChild()) {\n        <label class=\"ngs-form-field-label\" [attr.for]=\"control()?.id\">\n          <ng-content select=\"ngs-label\"/>\n\n          @if (isRequired()) {\n            <span class=\"ngs-form-field-required-marker\">*</span>\n          }\n        </label>\n      }\n      <ng-content/>\n    </div>\n\n    @if (textSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-text-suffix\">\n        <ng-content select=\"[ngsTextSuffix]\"/>\n      </div>\n    }\n\n    @if (iconButtonSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-button-suffix\">\n        <ng-content select=\"[ngsIconButtonSuffix]\"/>\n      </div>\n    }\n\n    @if (iconSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-suffix\">\n        <ng-content select=\"[ngsIconSuffix]\"/>\n      </div>\n    }\n\n    @if (suffixChildren().length > 0) {\n      <div class=\"ngs-form-field-suffix\">\n        <ng-content select=\"[ngsSuffix]\"/>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"subscript-wrapper\">\n  @if (control()?.errorState && errorChildren().length > 0) {\n    <ng-content select=\"ngs-error\"/>\n  } @else if (hintChildren().length > 0) {\n    <div class=\"ngs-form-field-hint-wrapper\">\n      <ng-content select=\"ngs-hint\"/>\n    </div>\n  }\n</div>\n", styles: [":host{--ngs-form-field-color: var(--input-color);--ngs-form-field-border-color: var(--input-border-color);--ngs-form-field-border-width: 1px;--ngs-form-field-border-radius: calc(var(--spacing, .25rem) * 3);--ngs-form-field-padding-x: .75rem;--ngs-form-field-padding-y: 1.75rem;--ngs-form-field-bg: var(--color-surface);--ngs-form-field-disabled-bg: var(--color-surface-container-low);--ngs-form-field-label-color: var(--input-label-color);--ngs-form-field-error-color: var(--input-error);--ngs-form-field-container-min-height: 50px;--ngs-form-field-infix-min-height: 50px;--ngs-form-field-infix-padding-top: 23px;--ngs-form-field-infix-padding-bottom: 8px;display:block;width:var(--ngs-form-field-width, 100%)}:host.ngs-form-field-disabled{cursor:default}:host.ngs-form-field-disabled .ngs-form-field-container{background:var(--color-on-surface);border-color:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled .ngs-form-field-container{background:color-mix(in srgb,var(--color-on-surface),transparent 95%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled .ngs-form-field-container{border-color:color-mix(in srgb,var(--color-on-surface),transparent 90%)}}:host.ngs-form-field-disabled .ngs-form-field-label{color:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled .ngs-form-field-label{color:color-mix(in srgb,var(--color-on-surface),transparent 62%)}}:host.ngs-form-field-disabled ::ng-deep input{color:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-form-field-disabled ::ng-deep input{color:color-mix(in srgb,var(--color-on-surface),transparent 62%)}}:host.ngs-form-field-focused .ngs-form-field-container{border-color:var(--input-outlined-border-focus);box-shadow:0 0 0 1px var(--input-outlined-border-focus)}:host.ngs-form-field-focused .ngs-form-field-label{color:var(--ngs-form-field-color)}:host.ngs-form-field-invalid .ngs-form-field-container{border-color:var(--ngs-form-field-error-color)}:host.ngs-form-field-invalid.ngs-form-field-focused .ngs-form-field-container{box-shadow:0 0 0 1px var(--ngs-form-field-error-color)}:host.ngs-form-field-invalid .ngs-form-field-label{color:var(--ngs-form-field-error-color)}:host .ngs-form-field-wrapper{display:flex;flex-direction:column}:host .ngs-form-field-container{position:relative;border:var(--ngs-form-field-border-width) solid var(--ngs-form-field-border-color);border-radius:var(--ngs-form-field-border-radius);background:var(--ngs-form-field-bg);padding:0 var(--ngs-form-field-padding-x);transition:border-color .2s,box-shadow .2s;min-height:var(--ngs-form-field-container-min-height);display:flex;align-items:center}:host .ngs-form-field-container:has(.ngs-form-field-icon-prefix){padding-left:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-field-container:has(.ngs-form-field-icon-button-prefix){padding-left:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-field-container:has(.ngs-form-field-icon-suffix){padding-right:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-field-container:has(.ngs-form-field-icon-button-suffix){padding-right:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-field-infix{flex:1;position:relative;padding:var(--ngs-form-field-infix-padding-top) 0 var(--ngs-form-field-infix-padding-bottom) 0;min-width:0;min-height:var(--ngs-form-field-infix-min-height);display:flex;flex-direction:column;overflow:hidden}:host:not(.ngs-form-field-has-label) .ngs-form-field-infix{padding:8px 0;display:flex;justify-content:center}:host:not(.ngs-form-field-has-label) .ngs-form-field-text-prefix,:host:not(.ngs-form-field-has-label) .ngs-form-field-text-suffix{padding:8px 0}:host .ngs-form-field-label{position:absolute;left:0;transform:translateY(-50%);top:calc(var(--ngs-form-field-container-min-height) / 2);transform-origin:left top;font-size:var(--input-font-size);color:var(--ngs-form-field-label-color);transition:transform .2s ease,font-size .2s ease,color .2s ease,top .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex;align-items:center;gap:.125rem;pointer-events:none;z-index:1;-webkit-user-select:none;user-select:none}:host .ngs-form-field-required-marker{color:var(--ngs-form-field-error-color)}:host.ngs-form-field-should-float .ngs-form-field-label{top:4px;font-size:var(--input-label-float-font-size);transform:translateY(0)}:host ::ng-deep input{line-height:var(--input-line-height);outline:none!important;text-align:var(--ngs-form-field-input-text-align, start)}:host ::ng-deep input::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep textarea{min-height:22px;line-height:var(--input-line-height);outline:none!important;text-align:var(--ngs-form-field-input-text-align, start)}:host ::ng-deep textarea[ngsTextareaAutoSize]{resize:none!important}:host ::ng-deep textarea::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep .ngs-input,:host ::ng-deep .ngs-chip-input,:host ::ng-deep .ngs-phone-input,:host ::ng-deep .ngs-number-input,:host ::ng-deep ngs-select{width:100%;border:none!important;background:transparent!important;padding:0!important;color:inherit;outline:none!important;display:block}:host ::ng-deep .ngs-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep .ngs-chip-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep .ngs-phone-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep .ngs-number-input:not(textarea):not(ngs-select):not(.ngs-chip-input),:host ::ng-deep ngs-select:not(textarea):not(ngs-select):not(.ngs-chip-input){height:20px}:host ::ng-deep .ngs-input::placeholder,:host ::ng-deep .ngs-chip-input::placeholder,:host ::ng-deep .ngs-phone-input::placeholder,:host ::ng-deep .ngs-number-input::placeholder,:host ::ng-deep ngs-select::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep ngs-chip-grid:empty{display:none}:host ::ng-deep ngs-chip-grid{margin:calc(var(--spacing, .25rem) * 1) 0}:host ::ng-deep .ngs-date-range-input{width:100%;border:none!important;background:transparent!important;padding:0!important;font-size:var(--input-font-size);line-height:var(--input-line-height);color:inherit;outline:none!important;display:flex;height:20px}:host ::ng-deep .ngs-date-range-input::placeholder{color:var(--ngs-form-field-label-color);transition:opacity .2s}:host ::ng-deep input{resize:none;font-size:var(--input-font-size);line-height:var(--input-line-height)}:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-chip-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-chip-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-phone-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-phone-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-number-input::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-number-input .ngs-select-placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep ngs-select::placeholder,:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep ngs-select .ngs-select-placeholder{opacity:0!important;color:transparent!important}:host.ngs-form-field-has-label:not(.ngs-form-field-should-float) ::ng-deep .ngs-date-range-input::placeholder{opacity:0!important;color:transparent!important}:host .ngs-form-field-prefix,:host .ngs-form-field-icon-prefix,:host .ngs-form-field-icon-button-prefix,:host .ngs-form-field-suffix,:host .ngs-form-field-icon-suffix,:host .ngs-form-field-icon-button-suffix,:host .ngs-form-field-text-prefix,:host .ngs-form-field-text-suffix{display:flex;align-items:center}:host .ngs-form-field-prefix,:host .ngs-form-field-icon-prefix,:host .ngs-form-field-icon-button-prefix,:host .ngs-form-field-text-prefix{margin-right:.5rem}:host .ngs-form-field-suffix,:host .ngs-form-field-icon-suffix,:host .ngs-form-field-icon-button-suffix,:host .ngs-form-field-text-suffix{margin-left:.5rem}:host .ngs-form-field-text-prefix,:host .ngs-form-field-text-suffix{color:var(--ngs-form-field-label-color);white-space:nowrap;font-size:var(--input-font-size);line-height:var(--input-line-height);padding-top:var(--ngs-form-field-infix-padding-top);padding-bottom:var(--ngs-form-field-infix-padding-bottom)}:host .subscript-wrapper{margin-top:.25rem;padding:0 .5rem;font-size:.75rem;min-height:calc(var(--spacing, .25rem) * 5.5)}:host.ngs-form-field-subscript-hidden-if-empty .subscript-wrapper:empty{display:none}:host .ngs-form-field-error{display:none}:host .ngs-form-field-hint-wrapper{display:flex;justify-content:space-between;color:var(--ngs-form-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { subscriptHiddenIfEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptHiddenIfEmpty", required: false }] }], wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormFieldControl), { isSignal: true }] }], labelChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Label), { isSignal: true }] }], prefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Prefix), { isSignal: true }] }], iconPrefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconPrefix), { isSignal: true }] }], iconButtonPrefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconButtonPrefix), { isSignal: true }] }], textPrefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextPrefix), { isSignal: true }] }], suffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Suffix), { isSignal: true }] }], iconSuffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconSuffix), { isSignal: true }] }], iconButtonSuffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconButtonSuffix), { isSignal: true }] }], textSuffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextSuffix), { isSignal: true }] }], hintChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Hint), { isSignal: true }] }], errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Error), { isSignal: true }] }], _onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+const FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken('FORM_FIELD_DEFAULT_OPTIONS');
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Error, FORM_FIELD, FORM_FIELD_DEFAULT_OPTIONS, FormField, FormFieldControl, Hint, IconButtonPrefix, IconButtonSuffix, IconPrefix, IconSuffix, Label, Prefix, Suffix, TextPrefix, TextSuffix };
+//# sourceMappingURL=ngstarter-ui-components-form-field.mjs.map

package/fesm2022/ngstarter-ui-components-form-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-form-field.mjs","sources":["../../../projects/components/form-field/src/label/label.ts","../../../projects/components/form-field/src/label/label.html","../../../projects/components/form-field/src/form-field-control.ts","../../../projects/components/form-field/src/hint/hint.ts","../../../projects/components/form-field/src/hint/hint.html","../../../projects/components/form-field/src/error/error.ts","../../../projects/components/form-field/src/error/error.html","../../../projects/components/form-field/src/prefix-suffix/prefix-suffix.ts","../../../projects/components/form-field/src/form-field-token.ts","../../../projects/components/form-field/src/form-field/form-field.ts","../../../projects/components/form-field/src/form-field/form-field.html","../../../projects/components/form-field/src/form-field/form-field-errors.ts","../../../projects/components/form-field/ngstarter-ui-components-form-field.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-label',\n  templateUrl: './label.html',\n  styleUrl: './label.scss',\n  host: {\n    'class': 'ngs-label',\n  }\n})\nexport class Label {\n}\n","<ng-content/>\n","import { Injectable } from '@angular/core';\n\n@Injectable()\nexport abstract class FormFieldControl<T> {\n  abstract value: T | null;\n  abstract readonly stateChanges: any;\n  abstract readonly id: string;\n  abstract readonly placeholder: string | undefined;\n  abstract readonly ngControl: any;\n  abstract readonly focused: boolean;\n  abstract readonly empty: boolean;\n  abstract readonly shouldLabelFloat: boolean;\n  abstract readonly required: boolean;\n  abstract readonly disabled: boolean;\n  abstract readonly errorState: boolean;\n  abstract focus(): void;\n}\n","import { Component, input } from '@angular/core';\n\n@Component({\n  selector: 'ngs-hint',\n  standalone: true,\n  templateUrl: './hint.html',\n  styleUrl: './hint.scss',\n  host: {\n    'class': 'ngs-hint',\n    '[class.ngs-hint-end]': 'align() === \"end\"',\n  }\n})\nexport class Hint {\n  align = input<'start' | 'end'>('start');\n}\n","<ng-content />\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-error',\n  standalone: true,\n  templateUrl: './error.html',\n  styleUrl: './error.scss',\n  host: {\n    'class': 'ngs-error',\n    'role': 'alert',\n  }\n})\nexport class Error {}\n","<ng-content />\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngsPrefix]',\n})\nexport class Prefix {}\n\n@Directive({\n  selector: '[ngsTextPrefix]',\n})\nexport class TextPrefix {}\n\n@Directive({\n  selector: '[ngsIconPrefix]',\n})\nexport class IconPrefix {}\n\n@Directive({\n  selector: '[ngsIconButtonPrefix]',\n})\nexport class IconButtonPrefix {}\n\n@Directive({\n  selector: '[ngsSuffix]',\n})\nexport class Suffix {}\n\n@Directive({\n  selector: '[ngsTextSuffix]',\n})\nexport class TextSuffix {}\n\n@Directive({\n  selector: '[ngsIconSuffix]',\n})\nexport class IconSuffix {}\n\n@Directive({\n  selector: '[ngsIconButtonSuffix]',\n})\nexport class IconButtonSuffix {}\n","import { InjectionToken } from '@angular/core';\n\nexport const FORM_FIELD = new InjectionToken<any>('FORM_FIELD');\n","import {\n  booleanAttribute,\n  Component,\n  contentChild,\n  contentChildren,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  viewChild,\n  computed,\n} from '@angular/core';\nimport { FormFieldControl } from '../form-field-control';\nimport { Label } from '../label/label';\nimport { FORM_FIELD } from '../form-field-token';\nimport { Prefix, Suffix, TextPrefix, TextSuffix, IconPrefix, IconButtonPrefix, IconSuffix, IconButtonSuffix } from '../prefix-suffix/prefix-suffix';\nimport { Hint } from '../hint/hint';\nimport { Error } from '../error/error';\n\n@Component({\n  selector: 'ngs-form-field',\n  exportAs: 'ngsFormField',\n  templateUrl: './form-field.html',\n  styleUrl: './form-field.scss',\n  imports: [],\n  providers: [\n    {\n      provide: FORM_FIELD,\n      useExisting: FormField\n    }\n  ],\n  host: {\n    'class': 'ngs-form-field',\n    '[class.ngs-form-field-disabled]': 'control()?.disabled',\n    '[class.ngs-form-field-invalid]': 'control()?.errorState',\n    '[class.ngs-form-field-should-float]': 'shouldLabelFloat()',\n    '[class.ngs-form-field-has-label]': 'labelChild()',\n    '[class.ngs-form-field-empty]': 'control()?.empty',\n    '[class.ngs-form-field-focused]': 'control()?.focused',\n    '[class.ngs-form-field-subscript-hidden-if-empty]': 'subscriptHiddenIfEmpty()',\n    '[class.ngs-form-field-has-icon-prefix]': 'iconPrefixChildren().length > 0',\n    '[class.ngs-form-field-has-icon-button-prefix]': 'iconButtonPrefixChildren().length > 0',\n    '[class.ngs-form-field-has-icon-suffix]': 'iconSuffixChildren().length > 0',\n    '[class.ngs-form-field-has-icon-button-suffix]': 'iconButtonSuffixChildren().length > 0',\n  }\n})\nexport class FormField {\n  subscriptHiddenIfEmpty = input(false, {\n    transform: booleanAttribute\n  });\n  elementRef = inject(ElementRef);\n  wrapper = viewChild.required<ElementRef>('wrapper');\n  container = viewChild.required<ElementRef>('container');\n  control = contentChild(FormFieldControl);\n  labelChild = contentChild(Label);\n  prefixChildren = contentChildren(Prefix);\n  iconPrefixChildren = contentChildren(IconPrefix);\n  iconButtonPrefixChildren = contentChildren(IconButtonPrefix);\n  textPrefixChildren = contentChildren(TextPrefix);\n  suffixChildren = contentChildren(Suffix);\n  iconSuffixChildren = contentChildren(IconSuffix);\n  iconButtonSuffixChildren = contentChildren(IconButtonSuffix);\n  textSuffixChildren = contentChildren(TextSuffix);\n  hintChildren = contentChildren(Hint);\n  errorChildren = contentChildren(Error);\n  isRequired = computed(() => {\n    const control = this.control();\n    if (!control) {\n      return false;\n    }\n\n    if (control.required) {\n      return true;\n    }\n\n    const ngControl = control.ngControl;\n    if (ngControl && ngControl.control && ngControl.control.validator) {\n      const validator = ngControl.control.validator({} as any);\n      if (validator && validator['required']) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n\n  shouldLabelFloat(): boolean {\n    return !!this.control()?.shouldLabelFloat;\n  }\n\n  @HostListener('click', ['$event'])\n  protected _onClick(event: MouseEvent): void {\n    const target = event.target as HTMLElement;\n    const wrapper = this.wrapper().nativeElement;\n    const isInsideWrapper = wrapper.contains(target);\n\n    if (!isInsideWrapper) {\n      return;\n    }\n\n    const isIconButton = !!target.closest('.ngs-icon-button') || !!target.closest('[ngsIconButton]');\n    const isToggle = !!target.closest('ngs-datepicker-toggle') || !!target.closest('ngs-date-range-picker');\n\n    if (this.control()?.focused || isIconButton || isToggle) {\n      return;\n    }\n\n    this.focus();\n    event.stopPropagation();\n  }\n\n  focus(): void {\n    const control = this.control();\n    if (control && !control.disabled) {\n      control.focus();\n    }\n  }\n}\n","<div class=\"ngs-form-field-wrapper\" #wrapper>\n  <div class=\"ngs-form-field-container\" #container>\n    @if (prefixChildren().length > 0) {\n      <div class=\"ngs-form-field-prefix\">\n        <ng-content select=\"[ngsPrefix]\"/>\n      </div>\n    }\n\n    @if (iconPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-prefix\">\n        <ng-content select=\"[ngsIconPrefix]\"/>\n      </div>\n    }\n\n    @if (iconButtonPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-button-prefix\">\n        <ng-content select=\"[ngsIconButtonPrefix]\"/>\n      </div>\n    }\n\n    @if (textPrefixChildren().length > 0) {\n      <div class=\"ngs-form-field-text-prefix\">\n        <ng-content select=\"[ngsTextPrefix]\"/>\n      </div>\n    }\n\n    <div class=\"ngs-form-field-infix\">\n      @if (labelChild()) {\n        <label class=\"ngs-form-field-label\" [attr.for]=\"control()?.id\">\n          <ng-content select=\"ngs-label\"/>\n\n          @if (isRequired()) {\n            <span class=\"ngs-form-field-required-marker\">*</span>\n          }\n        </label>\n      }\n      <ng-content/>\n    </div>\n\n    @if (textSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-text-suffix\">\n        <ng-content select=\"[ngsTextSuffix]\"/>\n      </div>\n    }\n\n    @if (iconButtonSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-button-suffix\">\n        <ng-content select=\"[ngsIconButtonSuffix]\"/>\n      </div>\n    }\n\n    @if (iconSuffixChildren().length > 0) {\n      <div class=\"ngs-form-field-icon-suffix\">\n        <ng-content select=\"[ngsIconSuffix]\"/>\n      </div>\n    }\n\n    @if (suffixChildren().length > 0) {\n      <div class=\"ngs-form-field-suffix\">\n        <ng-content select=\"[ngsSuffix]\"/>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"subscript-wrapper\">\n  @if (control()?.errorState && errorChildren().length > 0) {\n    <ng-content select=\"ngs-error\"/>\n  } @else if (hintChildren().length > 0) {\n    <div class=\"ngs-form-field-hint-wrapper\">\n      <ng-content select=\"ngs-hint\"/>\n    </div>\n  }\n</div>\n","import { InjectionToken } from '@angular/core';\n\nexport interface FormFieldDefaultOptions {\n  appearance?: 'fill' | 'outline';\n  color?: string;\n  hideRequiredMarker?: boolean;\n  floatLabel?: 'always' | 'auto';\n  subscriptHiddenIfEmpty?: boolean;\n}\n\nexport const FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken<FormFieldDefaultOptions>(\n  'FORM_FIELD_DEFAULT_OPTIONS'\n);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-form-renderer-autocomplete-many-field-BKQVlZHV.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { inject, input, viewChild, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Autocomplete, AutocompleteTrigger } from '@ngstarter-ui/components/autocomplete';
+import { Option } from '@ngstarter-ui/components/option';
+import { ChipGrid, ChipInput, ChipRemove, ChipRow } from '@ngstarter-ui/components/chips';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { Error, FormField, Hint, Label } from '@ngstarter-ui/components/form-field';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { startWith, tap, debounceTime, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { ProgressSpinner } from '@ngstarter-ui/components/spinner';
+import { AsyncPipe } from '@angular/common';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+class AutocompleteManyField {
+    httpClient = inject(HttpClient);
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    separatorKeysCodes = [ENTER, COMMA];
+    chipsCtrl = new FormControl('');
+    input = viewChild.required('input');
+    value = [];
+    filteredOptions$;
+    isLoading = false;
+    ngOnInit() {
+        this.filteredOptions$ = this.chipsCtrl.valueChanges.pipe(startWith(''), tap(() => this.isLoading = true), debounceTime(300), distinctUntilChanged(), switchMap((query) => {
+            if (!query || !query.trim()) {
+                return of([]);
+            }
+            const params = new HttpParams().set('query', query || '');
+            return this.httpClient.get(this.config().payload?.['autocompleteUrl'], {
+                params
+            });
+        }), tap(() => this.isLoading = false));
+    }
+    getErrorMessage() {
+        const errors = this.control().errors;
+        if (!errors) {
+            return '';
+        }
+        const errorKey = Object.keys(errors)[0];
+        const validator = this.config().validators?.find((v) => v.type === errorKey);
+        return validator?.message || 'Некорректное значение';
+    }
+    get options() {
+        return this.config()?.payload?.['options'] || [];
+    }
+    get bindValue() {
+        return this.config().bindValue || 'id';
+    }
+    get bindName() {
+        return this.config().bindName || 'name';
+    }
+    add(event) {
+        const name = (event.value || '').trim();
+        const hasValue = this.value.find(v => v[this.bindName].toLowerCase() === name.toLowerCase());
+        if (name && !hasValue) {
+            this.value.push({
+                [this.bindValue]: null,
+                [this.bindName]: name,
+            });
+        }
+        event.chipInput.clear();
+        this.chipsCtrl.setValue(null);
+        this.isLoading = false;
+        this.calculateControlValue();
+    }
+    remove(chip) {
+        const index = this.value.indexOf(chip);
+        if (index >= 0) {
+            this.value.splice(index, 1);
+            this.calculateControlValue();
+        }
+    }
+    onSelected(event) {
+        const hasValue = this.value.find(v => v[this.bindName].toLowerCase() === event.option.value[this.bindName].toLowerCase());
+        if (!hasValue) {
+            this.value.push(event.option.value);
+        }
+        this.input().nativeElement.value = '';
+        this.chipsCtrl.setValue(null);
+        this.calculateControlValue();
+        this.isLoading = false;
+    }
+    calculateControlValue() {
+        const value = this.value.map(v => {
+            const itemValue = v[this.bindValue];
+            if (itemValue) {
+                return {
+                    [this.bindValue]: itemValue,
+                };
+            }
+            return v;
+        });
+        this.control().setValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutocompleteManyField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AutocompleteManyField, isStandalone: true, selector: "ngs-autocomplete-many-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <ngs-chip-grid #chipGrid>\n      @for (option of value; track option) {\n        <ngs-chip-row (removed)=\"remove(option)\">\n          {{ option[bindName] }}\n          <button ngsChipRemove>\n            <ngs-icon name=\"fluent:dismiss-circle-24-regular\"/>\n          </button>\n        </ngs-chip-row>\n      }\n    </ngs-chip-grid>\n    <input [placeholder]=\"config().placeholder\"\n           #input\n           maxlength=\"30\"\n           [formControl]=\"chipsCtrl\"\n           [ngsChipInputFor]=\"chipGrid\"\n           [ngsAutocomplete]=\"autocomplete\"\n           [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n           (chipInputTokenEnd)=\"add($event)\">\n    @if (isLoading) {\n      <div class=\"loader\">\n        <ngs-progress-spinner\n          mode=\"indeterminate\"\n          [diameter]=\"20\"/>\n      </div>\n    }\n    <ngs-autocomplete #autocomplete=\"ngsAutocomplete\" (optionSelected)=\"onSelected($event)\">\n      @for (option of filteredOptions$ | async; track option) {\n        <ngs-option [value]=\"option\">{{ option[bindName] }}</ngs-option>\n      }\n\n      @if (!(filteredOptions$ | async)?.length && !isLoading && chipsCtrl.value) {\n        <ngs-option disabled>\n          No search results found.\n        </ngs-option>\n      }\n    </ngs-autocomplete>\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}:host .loader{position:absolute;right:0;top:50%;transform:translateY(-50%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "component", type: Autocomplete, selector: "ngs-autocomplete", inputs: ["aria-label", "aria-labelledby", "autoActiveFirstOption", "autoSelectActiveOption", "class", "disableRipple", "displayWith", "hideSingleSelectionIndicator", "panelWidth", "requireSelection"], outputs: ["closed", "opened", "optionActivated", "optionSelected"], exportAs: ["ngsAutocomplete"] }, { kind: "directive", type: AutocompleteTrigger, selector: "[ngsAutocomplete]", inputs: ["ngsAutocomplete"], exportAs: ["ngsAutocompleteTrigger"] }, { kind: "component", type: ChipGrid, selector: "ngs-chip-grid", inputs: ["id", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: ChipInput, selector: "input[ngsChipInputFor]", inputs: ["ngsChipInputFor", "ngsChipInputSeparatorKeyCodes", "ngsChipInputAddOnBlur"], outputs: ["chipInputTokenEnd"] }, { kind: "directive", type: ChipRemove, selector: "ngs-chip-remove, [ngsChipRemove]" }, { kind: "component", type: ChipRow, selector: "ngs-chip-row", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: Error, selector: "ngs-error" }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutocompleteManyField, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-autocomplete-many-field', imports: [
+                        FormsModule,
+                        Autocomplete,
+                        AutocompleteTrigger,
+                        ChipGrid,
+                        ChipInput,
+                        ChipRemove,
+                        ChipRow,
+                        Error,
+                        FormField,
+                        Hint,
+                        Icon,
+                        Label,
+                        Option,
+                        ReactiveFormsModule,
+                        ProgressSpinner,
+                        AsyncPipe
+                    ], template: "@if (control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <ngs-chip-grid #chipGrid>\n      @for (option of value; track option) {\n        <ngs-chip-row (removed)=\"remove(option)\">\n          {{ option[bindName] }}\n          <button ngsChipRemove>\n            <ngs-icon name=\"fluent:dismiss-circle-24-regular\"/>\n          </button>\n        </ngs-chip-row>\n      }\n    </ngs-chip-grid>\n    <input [placeholder]=\"config().placeholder\"\n           #input\n           maxlength=\"30\"\n           [formControl]=\"chipsCtrl\"\n           [ngsChipInputFor]=\"chipGrid\"\n           [ngsAutocomplete]=\"autocomplete\"\n           [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n           (chipInputTokenEnd)=\"add($event)\">\n    @if (isLoading) {\n      <div class=\"loader\">\n        <ngs-progress-spinner\n          mode=\"indeterminate\"\n          [diameter]=\"20\"/>\n      </div>\n    }\n    <ngs-autocomplete #autocomplete=\"ngsAutocomplete\" (optionSelected)=\"onSelected($event)\">\n      @for (option of filteredOptions$ | async; track option) {\n        <ngs-option [value]=\"option\">{{ option[bindName] }}</ngs-option>\n      }\n\n      @if (!(filteredOptions$ | async)?.length && !isLoading && chipsCtrl.value) {\n        <ngs-option disabled>\n          No search results found.\n        </ngs-option>\n      }\n    </ngs-autocomplete>\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}:host .loader{position:absolute;right:0;top:50%;transform:translateY(-50%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+export { AutocompleteManyField };
+//# sourceMappingURL=ngstarter-ui-components-form-renderer-autocomplete-many-field-BKQVlZHV.mjs.map

package/fesm2022/ngstarter-ui-components-form-renderer-autocomplete-many-field-BKQVlZHV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-form-renderer-autocomplete-many-field-BKQVlZHV.mjs","sources":["../../../projects/components/form-renderer/src/fields/autocomplete-many-field/autocomplete-many-field.ts","../../../projects/components/form-renderer/src/fields/autocomplete-many-field/autocomplete-many-field.html"],"sourcesContent":["import { Component, ElementRef, inject, input, OnInit, viewChild } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport {\n  Autocomplete,\n  AutocompleteSelectedEvent,\n  AutocompleteTrigger\n} from '@ngstarter-ui/components/autocomplete';\nimport { Option } from '@ngstarter-ui/components/option';\nimport { ChipGrid, ChipInput, ChipInputEvent, ChipRemove, ChipRow } from '@ngstarter-ui/components/chips';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\nimport { Error, FormField, Hint, Label } from '@ngstarter-ui/components/form-field';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { catchError, debounceTime, distinctUntilChanged, Observable, of, startWith, switchMap, tap } from 'rxjs';\nimport { ProgressSpinner } from '@ngstarter-ui/components/spinner';\nimport { AsyncPipe } from '@angular/common';\nimport { HttpClient, HttpParams } from '@angular/common/http';\n\n@Component({\n  selector: 'ngs-autocomplete-many-field',\n  imports: [\n    FormsModule,\n    Autocomplete,\n    AutocompleteTrigger,\n    ChipGrid,\n    ChipInput,\n    ChipRemove,\n    ChipRow,\n    Error,\n    FormField,\n    Hint,\n    Icon,\n    Label,\n    Option,\n    ReactiveFormsModule,\n    ProgressSpinner,\n    AsyncPipe\n  ],\n  templateUrl: './autocomplete-many-field.html',\n  styleUrl: './autocomplete-many-field.scss'\n})\nexport class AutocompleteManyField implements OnInit {\n  private httpClient = inject(HttpClient);\n\n  control = input.required<FormControl>();\n  config = input.required<ComponentConfig>();\n\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n  readonly chipsCtrl = new FormControl('');\n  readonly input = viewChild.required<ElementRef<HTMLInputElement>>('input');\n  readonly value: any[] = [];\n\n  filteredOptions$!: Observable<any[]>;\n  isLoading = false;\n\n  ngOnInit() {\n    this.filteredOptions$ = this.chipsCtrl.valueChanges.pipe(\n      startWith(''),\n      tap(() => this.isLoading = true),\n      debounceTime(300),\n      distinctUntilChanged(),\n      switchMap((query: any) => {\n        if (!query || !query.trim()) {\n          return of([]);\n        }\n        const params = new HttpParams().set('query', query || '');\n        return this.httpClient.get<any[]>(this.config().payload?.['autocompleteUrl'], {\n          params\n        });\n      }),\n      tap(() => this.isLoading = false)\n    );\n  }\n\n  getErrorMessage(): string {\n    const errors = this.control().errors;\n\n    if (!errors) {\n      return '';\n    }\n\n    const errorKey = Object.keys(errors)[0];\n    const validator = this.config().validators?.find((v: any) => v.type === errorKey);\n    return validator?.message || 'Некорректное значение';\n  }\n\n  get options() {\n    return this.config()?.payload?.['options'] || [];\n  }\n\n  get bindValue() {\n    return this.config().bindValue || 'id';\n  }\n\n  get bindName() {\n    return this.config().bindName || 'name';\n  }\n\n  add(event: ChipInputEvent): void {\n    const name = (event.value || '').trim();\n    const hasValue = this.value.find(\n      v => v[this.bindName].toLowerCase() === name.toLowerCase()\n    );\n\n    if (name && !hasValue) {\n      this.value.push({\n        [this.bindValue]: null,\n        [this.bindName]: name,\n      });\n    }\n\n    event.chipInput!.clear();\n    this.chipsCtrl.setValue(null);\n    this.isLoading = false;\n    this.calculateControlValue();\n  }\n\n  remove(chip: any): void {\n    const index = this.value.indexOf(chip);\n\n    if (index >= 0) {\n      this.value.splice(index, 1);\n      this.calculateControlValue();\n    }\n  }\n\n  onSelected(event: AutocompleteSelectedEvent): void {\n    const hasValue = this.value.find(\n      v => v[this.bindName].toLowerCase() === (event.option.value as any)[this.bindName].toLowerCase()\n    );\n\n    if (!hasValue) {\n      this.value.push(event.option.value);\n    }\n\n    this.input().nativeElement.value = '';\n    this.chipsCtrl.setValue(null);\n    this.calculateControlValue();\n    this.isLoading = false;\n  }\n\n  private calculateControlValue() {\n    const value = this.value.map(v => {\n      const itemValue = v[this.bindValue];\n\n      if (itemValue) {\n        return {\n          [this.bindValue]: itemValue,\n        };\n      }\n\n      return v;\n    });\n    this.control().setValue(value);\n  }\n}\n","@if (control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <ngs-chip-grid #chipGrid>\n      @for (option of value; track option) {\n        <ngs-chip-row (removed)=\"remove(option)\">\n          {{ option[bindName] }}\n          <button ngsChipRemove>\n            <ngs-icon name=\"fluent:dismiss-circle-24-regular\"/>\n          </button>\n        </ngs-chip-row>\n      }\n    </ngs-chip-grid>\n    <input [placeholder]=\"config().placeholder\"\n           #input\n           maxlength=\"30\"\n           [formControl]=\"chipsCtrl\"\n           [ngsChipInputFor]=\"chipGrid\"\n           [ngsAutocomplete]=\"autocomplete\"\n           [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n           (chipInputTokenEnd)=\"add($event)\">\n    @if (isLoading) {\n      <div class=\"loader\">\n        <ngs-progress-spinner\n          mode=\"indeterminate\"\n          [diameter]=\"20\"/>\n      </div>\n    }\n    <ngs-autocomplete #autocomplete=\"ngsAutocomplete\" (optionSelected)=\"onSelected($event)\">\n      @for (option of filteredOptions$ | async; track option) {\n        <ngs-option [value]=\"option\">{{ option[bindName] }}</ngs-option>\n      }\n\n      @if (!(filteredOptions$ | async)?.length && !isLoading && chipsCtrl.value) {\n        <ngs-option disabled>\n          No search results found.\n        </ngs-option>\n      }\n    </ngs-autocomplete>\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Checkbox } from '@ngstarter-ui/components/checkbox';
+
+class CheckboxField {
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CheckboxField, isStandalone: true, selector: "ngs-checkbox-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if(control() && config()) {\n  <ngs-checkbox [formControl]=\"control()\">\n    {{ config().label }}\n  </ngs-checkbox>\n}\n", styles: [":host{display:block;margin-bottom:calc(var(--spacing, .25rem) * 3)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxField, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-checkbox-field', imports: [
+                        Checkbox,
+                        ReactiveFormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(control() && config()) {\n  <ngs-checkbox [formControl]=\"control()\">\n    {{ config().label }}\n  </ngs-checkbox>\n}\n", styles: [":host{display:block;margin-bottom:calc(var(--spacing, .25rem) * 3)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
+
+export { CheckboxField };
+//# sourceMappingURL=ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs.map

package/fesm2022/ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs","sources":["../../../projects/components/form-renderer/src/fields/checkbox-field/checkbox-field.ts","../../../projects/components/form-renderer/src/fields/checkbox-field/checkbox-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { Checkbox } from '@ngstarter-ui/components/checkbox';\n\n@Component({\n  selector: 'ngs-checkbox-field',\n  imports: [\n    Checkbox,\n    ReactiveFormsModule\n  ],\n  templateUrl: './checkbox-field.html',\n  styleUrl: './checkbox-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxField {\n  control = input.required<FormControl>();\n  config = input.required<ComponentConfig>();\n}\n","@if(control() && config()) {\n  <ngs-checkbox [formControl]=\"control()\">\n    {{ config().label }}\n  </ngs-checkbox>\n}\n"],"names":[],"mappings":";;;;;;MAea,aAAa,CAAA;AACxB,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAe;AACvC,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAmB;uGAF/B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf1B,8HAKA,EAAA,MAAA,EAAA,CAAA,0IAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDGI,QAAQ,yaACR,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMV,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,OAAA,EACrB;wBACP,QAAQ;wBACR;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8HAAA,EAAA,MAAA,EAAA,CAAA,0IAAA,CAAA,EAAA;;;;;"}

package/fesm2022/ngstarter-ui-components-form-renderer-datepicker-field-Bzc0TPO9.mjs

@@ -0,0 +1,44 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Hint, Suffix, Error, Label, FormField } from '@ngstarter-ui/components/form-field';
+import { DatepickerToggle, Datepicker, DatepickerInput, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';
+import { Input } from '@ngstarter-ui/components/input';
+
+class DatepickerField {
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    getErrorMessage() {
+        const errors = this.control().errors;
+        if (!errors)
+            return '';
+        const errorKey = Object.keys(errors)[0];
+        const validator = this.config().validators?.find((v) => v.type === errorKey);
+        return validator?.message || 'Invalid value';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DatepickerField, isStandalone: true, selector: "ngs-datepicker-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            provideNativeDateAdapter()
+        ], exportAs: ["ngsDatepickerField"], ngImport: i0, template: "@if(control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n    <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n    <ngs-datepicker #picker />\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: Suffix, selector: "[ngsSuffix]" }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "component", type: Error, selector: "ngs-error" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerField, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-datepicker-field', exportAs: 'ngsDatepickerField', providers: [
+                        provideNativeDateAdapter()
+                    ], imports: [
+                        Hint,
+                        Input,
+                        Suffix,
+                        DatepickerToggle,
+                        Datepicker,
+                        Error,
+                        Label,
+                        FormField,
+                        ReactiveFormsModule,
+                        DatepickerInput
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n    <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n    <ngs-datepicker #picker />\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
+
+export { DatepickerField };
+//# sourceMappingURL=ngstarter-ui-components-form-renderer-datepicker-field-Bzc0TPO9.mjs.map