@updevs/components 1.0.0-alpha.18 → 1.0.0-alpha.19

package/fesm2022/updevs-components-form-controls-input.mjs

@@ -46,7 +46,6 @@ class InputComponent extends BaseControl {
         this.hostWrapperClasses = '';
         this.type = 'text';
         this.size = 'default';
-        this.isDisabled = false;
         this.isPlainText = false;
         this.isReadOnly = false;
         this.isLoading = false;
@@ -56,7 +55,6 @@ class InputComponent extends BaseControl {
         this.isPrependButton = false;
         this.isAppendButton = false;
         this.isFloating = false;
-        this.isRequired = false;
         this.loaderPosition = 'append';
         this.isValidationStatusLight = false;
         this.layout = 'vertical';
@@ -78,7 +76,7 @@ class InputComponent extends BaseControl {
         this.valueChangedSub = new Subject();
     }
     get shouldDisplayInnerLabel() {
-        return !!this.label
+        return !!this.label()
             && !this.prependIconModel
             && !this.appendIconModel
             && !this.isLoading
@@ -89,7 +87,7 @@ class InputComponent extends BaseControl {
         if (this.layout !== 'horizontal') {
             return 'form-label';
         }
-        return ColumnSizeHelper.getClasses('col-form-label', ColumnSizeHelper.getSizeClasses(this.labelColSize, 3));
+        return ColumnSizeHelper.getClasses('col-form-label', ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3));
     }
     ngOnInit() {
         this.updateClasses();
@@ -140,11 +138,11 @@ class InputComponent extends BaseControl {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: InputComponent, selector: "upd-input", inputs: { type: "type", mask: "mask", maskConfig: "maskConfig", value: "value", size: "size", customClasses: "customClasses", wrapperClasses: "wrapperClasses", name: "name", maxLength: "maxLength", isDisabled: "isDisabled", isPlainText: "isPlainText", isReadOnly: "isReadOnly", isLoading: "isLoading", isRound: "isRound", isFlush: "isFlush", isInputGroupFlat: "isInputGroupFlat", isPrependButton: "isPrependButton", isAppendButton: "isAppendButton", isFloating: "isFloating", isRequired: "isRequired", loaderPosition: "loaderPosition", prependIconModel: "prependIconModel", appendIconModel: "appendIconModel", isValidationStatusLight: "isValidationStatusLight", layout: "layout", labelColSize: "labelColSize" }, outputs: { valueChange: "valueChange", blurred: "blurred", keyDown: "keyDown", keyDownEsc: "keyDownEsc", keyUpEnter: "keyUpEnter" }, host: { properties: { "class": "this.hostWrapperClasses" } }, queries: [{ propertyName: "appendTemplate", first: true, predicate: InputAppendDirective, descendants: true }, { propertyName: "prependTemplate", first: true, predicate: InputPrependDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (!hintText && !hintTemplate()) {\n        @if (shouldDisplayInnerLabel && !isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n\n        <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n        @if (shouldDisplayInnerLabel && isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <label [ngClass]=\"labelSizeClasses\" [class.required]=\"isRequired\">{{ labelText }}</label>\n    }\n</ng-template>\n", styles: [".input-group-text .form-check>.form-check-input{margin:0!important}.input-group-text>upd-checkbox{height:16px!important}.input-group-text .form-check{margin:0!important;padding-left:0!important;min-height:16px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i3.MaskDirective, selector: "[updMask]", inputs: ["updMask", "updMaskConfig", "specialCharacters", "patterns", "prefix", "thousandSeparator", "decimalMarker", "suffix", "shownMaskExpression", "removeSpecialCharacters", "placeholderCharacter", "isHiddenInput", "showMaskTyped", "showTemplate", "clearIfNoMatch", "shouldValidate", "shouldTriggerOnMaskChange", "allowNegativeNumbers", "leadZeroDateTime", "separatorLimit", "updateMaskValueSubject"], outputs: ["maskFilled"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: InputComponent, selector: "upd-input", inputs: { type: "type", mask: "mask", maskConfig: "maskConfig", value: "value", size: "size", customClasses: "customClasses", wrapperClasses: "wrapperClasses", maxLength: "maxLength", isPlainText: "isPlainText", isReadOnly: "isReadOnly", isLoading: "isLoading", isRound: "isRound", isFlush: "isFlush", isInputGroupFlat: "isInputGroupFlat", isPrependButton: "isPrependButton", isAppendButton: "isAppendButton", isFloating: "isFloating", loaderPosition: "loaderPosition", prependIconModel: "prependIconModel", appendIconModel: "appendIconModel", isValidationStatusLight: "isValidationStatusLight", layout: "layout" }, outputs: { valueChange: "valueChange", blurred: "blurred", keyDown: "keyDown", keyDownEsc: "keyDownEsc", keyUpEnter: "keyUpEnter" }, host: { properties: { "class": "this.hostWrapperClasses" } }, queries: [{ propertyName: "appendTemplate", first: true, predicate: InputAppendDirective, descendants: true }, { propertyName: "prependTemplate", first: true, predicate: InputPrependDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (!hintText && !hintTemplate()) {\n        @if (shouldDisplayInnerLabel && !isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n\n        <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n        @if (shouldDisplayInnerLabel && isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <label [ngClass]=\"labelSizeClasses\" [class.required]=\"isRequired()\">{{ labelText }}</label>\n    }\n</ng-template>\n", styles: [".input-group-text .form-check>.form-check-input{margin:0!important}.input-group-text>upd-checkbox{height:16px!important}.input-group-text .form-check{margin:0!important;padding-left:0!important;min-height:16px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i3.MaskDirective, selector: "[updMask]", inputs: ["updMask", "updMaskConfig", "specialCharacters", "patterns", "prefix", "thousandSeparator", "decimalMarker", "suffix", "shownMaskExpression", "removeSpecialCharacters", "placeholderCharacter", "isHiddenInput", "showMaskTyped", "showTemplate", "clearIfNoMatch", "shouldValidate", "shouldTriggerOnMaskChange", "allowNegativeNumbers", "leadZeroDateTime", "separatorLimit", "updateMaskValueSubject"], outputs: ["maskFilled"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-input', encapsulation: ViewEncapsulation.None, template: "@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (!hintText && !hintTemplate()) {\n        @if (shouldDisplayInnerLabel && !isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n\n        <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n        @if (shouldDisplayInnerLabel && isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <label [ngClass]=\"labelSizeClasses\" [class.required]=\"isRequired\">{{ labelText }}</label>\n    }\n</ng-template>\n", styles: [".input-group-text .form-check>.form-check-input{margin:0!important}.input-group-text>upd-checkbox{height:16px!important}.input-group-text .form-check{margin:0!important;padding-left:0!important;min-height:16px!important}\n"] }]
+            args: [{ selector: 'upd-input', encapsulation: ViewEncapsulation.None, template: "@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (!hintText && !hintTemplate()) {\n        @if (shouldDisplayInnerLabel && !isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n\n        <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n        @if (shouldDisplayInnerLabel && isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <label [ngClass]=\"labelSizeClasses\" [class.required]=\"isRequired()\">{{ labelText }}</label>\n    }\n</ng-template>\n", styles: [".input-group-text .form-check>.form-check-input{margin:0!important}.input-group-text>upd-checkbox{height:16px!important}.input-group-text .form-check{margin:0!important;padding-left:0!important;min-height:16px!important}\n"] }]
         }], propDecorators: { hostWrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -168,12 +166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Input
             }], wrapperClasses: [{
                 type: Input
-            }], name: [{
-                type: Input
             }], maxLength: [{
                 type: Input
-            }], isDisabled: [{
-                type: Input
             }], isPlainText: [{
                 type: Input
             }], isReadOnly: [{
@@ -192,8 +186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Input
             }], isFloating: [{
                 type: Input
-            }], isRequired: [{
-                type: Input
             }], loaderPosition: [{
                 type: Input
             }], prependIconModel: [{
@@ -204,8 +196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Input
             }], layout: [{
                 type: Input
-            }], labelColSize: [{
-                type: Input
             }], valueChange: [{
                 type: Output
             }], blurred: [{

package/fesm2022/updevs-components-form-controls-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"updevs-components-form-controls-input.mjs","sources":["../../../../libs/components/form-controls/input/src/directives/input-append.directive.ts","../../../../libs/components/form-controls/input/src/directives/input-prepend.directive.ts","../../../../libs/components/form-controls/input/src/input.component.ts","../../../../libs/components/form-controls/input/src/input.component.html","../../../../libs/components/form-controls/input/src/upd-input.module.ts","../../../../libs/components/form-controls/input/src/updevs-components-form-controls-input.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updInputAppend]'\n})\nexport class InputAppendDirective {\n    readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updInputPrepend]'\n})\nexport class InputPrependDirective {\n    readonly templateRef = inject(TemplateRef<any>);\n}\n","import {\n    Component,\n    ViewEncapsulation,\n    Input,\n    SimpleChanges,\n    OnInit,\n    OnChanges,\n    ContentChild,\n    HostBinding,\n    Output,\n    EventEmitter\n} from '@angular/core';\nimport { IconModel } from '@updevs/icons';\nimport { UpdMaskConfig } from '@updevs/sdk/mask';\nimport { ComponentSizeType, HorizontalVerticalType, RowColumnSize, ColumnSizeHelper } from '@updevs/components';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\nimport { Subject } from 'rxjs';\n\nimport { InputType } from './types/input.type';\nimport { InputAppendDirective } from './directives/input-append.directive';\nimport { InputPrependDirective } from './directives/input-prepend.directive';\nimport { LoaderPositionType } from './types/loader-position.type';\n\n@Component({\n    selector: 'upd-input',\n    templateUrl: './input.component.html',\n    styleUrls: ['./input.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class InputComponent extends BaseControl implements OnInit, OnChanges {\n    @HostBinding('class') hostWrapperClasses = '';\n    @ContentChild(InputAppendDirective) appendTemplate?: InputAppendDirective;\n    @ContentChild(InputPrependDirective) prependTemplate?: InputPrependDirective;\n\n    @Input() type: InputType = 'text';\n    @Input() mask?: string;\n    @Input() maskConfig?: UpdMaskConfig;\n    @Input() value?: any;\n    @Input() size: ComponentSizeType = 'default';\n    @Input() customClasses?: string;\n    @Input() wrapperClasses?: string;\n    @Input() name?: string;\n    @Input() maxLength?: number;\n    @Input() isDisabled = false;\n    @Input() isPlainText = false;\n    @Input() isReadOnly = false;\n    @Input() isLoading = false;\n    @Input() isRound = false;\n    @Input() isFlush = false;\n    @Input() isInputGroupFlat = false;\n    @Input() isPrependButton = false;\n    @Input() isAppendButton = false;\n    @Input() isFloating = false;\n    @Input() isRequired = false;\n    @Input() loaderPosition: LoaderPositionType = 'append';\n    @Input() prependIconModel?: IconModel;\n    @Input() appendIconModel?: IconModel;\n    @Input() isValidationStatusLight = false;\n    @Input() layout: HorizontalVerticalType = 'vertical';\n    @Input() labelColSize?: RowColumnSize;\n\n    @Output() readonly valueChange = new EventEmitter<any>();\n    @Output() readonly blurred = new EventEmitter<void>();\n    /**\n     * Emitted when any key is pressed.\n     */\n    @Output() readonly keyDown = new EventEmitter<any>();\n    /**\n     * Emitted when the ESC key is pressed.\n     */\n    @Output() readonly keyDownEsc = new EventEmitter<void>();\n    /**\n     * Emitted when the ENTER key is released.\n     */\n    @Output() readonly keyUpEnter = new EventEmitter<void>();\n\n    classes: string[] = [];\n    get shouldDisplayInnerLabel(): boolean {\n        return !!this.label\n            && !this.prependIconModel\n            && !this.appendIconModel\n            && !this.isLoading\n            && !this.appendTemplate\n            && !this.prependTemplate;\n    }\n    get labelSizeClasses(): string {\n        if (this.layout !== 'horizontal') {\n            return 'form-label';\n        }\n\n        return ColumnSizeHelper.getClasses(\n            'col-form-label',\n            ColumnSizeHelper.getSizeClasses(this.labelColSize, 3)\n        );\n    }\n\n    readonly valueChangedSub = new Subject<string>();\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.updateClasses();\n\n        if (changes['value'] && !!this.mask) {\n            this.valueChangedSub.next(changes['value'].currentValue);\n        }\n    }\n\n    onInputChange(evt: Event): void {\n        if (!evt.target) {\n            return;\n        }\n\n        this.valueChange.emit((evt.target as any).value);\n    }\n\n    private updateClasses(): void {\n        const lClasses: string[] = !this.isPlainText ? ['form-control'] : ['form-control-plaintext'];\n\n        if (this.isRound) {\n            lClasses.push('form-control-rounded');\n        }\n\n        if (this.isFlush) {\n            lClasses.push('form-control-flush');\n        }\n\n        if (this.size !== 'default') {\n            lClasses.push(`form-control-${this.size === 'large' ? 'lg' : 'sm'}`);\n        }\n\n        if (!!this.validationStatus()) {\n            const statusCls = `is-${this.validationStatus()}`;\n            lClasses.push(statusCls);\n\n            if (this.isValidationStatusLight) {\n                lClasses.push(`${statusCls}-lite`);\n            }\n        }\n\n        if (this.layout === 'horizontal') {\n            this.hostWrapperClasses = 'row';\n        }\n\n        if (!!this.wrapperClasses) {\n            this.hostWrapperClasses += ` ${this.wrapperClasses}`;\n        }\n\n        if (this.isFloating) {\n            this.hostWrapperClasses += ' form-floating';\n        }\n\n        this.classes = [\n            ...lClasses,\n            ...(this.customClasses || '').split(' '),\n            this.layout === 'horizontal' ? 'col' : ''\n        ];\n    }\n}\n","@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (!hintText && !hintTemplate()) {\n        @if (shouldDisplayInnerLabel && !isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n\n        <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n        @if (shouldDisplayInnerLabel && isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <label [ngClass]=\"labelSizeClasses\" [class.required]=\"isRequired\">{{ labelText }}</label>\n    }\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdMaskModule } from '@updevs/sdk/mask';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport { InputComponent } from './input.component';\nimport { InputAppendDirective } from './directives/input-append.directive';\nimport { InputPrependDirective } from './directives/input-prepend.directive';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdIconsModule,\n        UpdMaskModule,\n        UpdPopoverModule\n    ],\n    declarations: [\n        InputComponent,\n        InputAppendDirective,\n        InputPrependDirective\n    ],\n    exports: [\n        InputComponent,\n        InputAppendDirective,\n        InputPrependDirective\n    ]\n})\nexport class UpdInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"updevs-components-form-controls-input.mjs","sources":["../../../../libs/components/form-controls/input/src/directives/input-append.directive.ts","../../../../libs/components/form-controls/input/src/directives/input-prepend.directive.ts","../../../../libs/components/form-controls/input/src/input.component.ts","../../../../libs/components/form-controls/input/src/input.component.html","../../../../libs/components/form-controls/input/src/upd-input.module.ts","../../../../libs/components/form-controls/input/src/updevs-components-form-controls-input.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updInputAppend]'\n})\nexport class InputAppendDirective {\n    readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updInputPrepend]'\n})\nexport class InputPrependDirective {\n    readonly templateRef = inject(TemplateRef<any>);\n}\n","import {\n    Component,\n    ViewEncapsulation,\n    Input,\n    SimpleChanges,\n    OnInit,\n    OnChanges,\n    ContentChild,\n    HostBinding,\n    Output,\n    EventEmitter\n} from '@angular/core';\nimport { IconModel } from '@updevs/icons';\nimport { UpdMaskConfig } from '@updevs/sdk/mask';\nimport { ComponentSizeType, HorizontalVerticalType, ColumnSizeHelper } from '@updevs/components';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\nimport { Subject } from 'rxjs';\n\nimport { InputType } from './types/input.type';\nimport { InputAppendDirective } from './directives/input-append.directive';\nimport { InputPrependDirective } from './directives/input-prepend.directive';\nimport { LoaderPositionType } from './types/loader-position.type';\n\n@Component({\n    selector: 'upd-input',\n    templateUrl: './input.component.html',\n    styleUrls: ['./input.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class InputComponent extends BaseControl implements OnInit, OnChanges {\n    @HostBinding('class') hostWrapperClasses = '';\n    @ContentChild(InputAppendDirective) appendTemplate?: InputAppendDirective;\n    @ContentChild(InputPrependDirective) prependTemplate?: InputPrependDirective;\n\n    @Input() type: InputType = 'text';\n    @Input() mask?: string;\n    @Input() maskConfig?: UpdMaskConfig;\n    @Input() value?: any;\n    @Input() size: ComponentSizeType = 'default';\n    @Input() customClasses?: string;\n    @Input() wrapperClasses?: string;\n    @Input() maxLength?: number;\n    @Input() isPlainText = false;\n    @Input() isReadOnly = false;\n    @Input() isLoading = false;\n    @Input() isRound = false;\n    @Input() isFlush = false;\n    @Input() isInputGroupFlat = false;\n    @Input() isPrependButton = false;\n    @Input() isAppendButton = false;\n    @Input() isFloating = false;\n    @Input() loaderPosition: LoaderPositionType = 'append';\n    @Input() prependIconModel?: IconModel;\n    @Input() appendIconModel?: IconModel;\n    @Input() isValidationStatusLight = false;\n    @Input() layout: HorizontalVerticalType = 'vertical';\n\n    @Output() readonly valueChange = new EventEmitter<any>();\n    @Output() readonly blurred = new EventEmitter<void>();\n    /**\n     * Emitted when any key is pressed.\n     */\n    @Output() readonly keyDown = new EventEmitter<any>();\n    /**\n     * Emitted when the ESC key is pressed.\n     */\n    @Output() readonly keyDownEsc = new EventEmitter<void>();\n    /**\n     * Emitted when the ENTER key is released.\n     */\n    @Output() readonly keyUpEnter = new EventEmitter<void>();\n\n    classes: string[] = [];\n    get shouldDisplayInnerLabel(): boolean {\n        return !!this.label()\n            && !this.prependIconModel\n            && !this.appendIconModel\n            && !this.isLoading\n            && !this.appendTemplate\n            && !this.prependTemplate;\n    }\n    get labelSizeClasses(): string {\n        if (this.layout !== 'horizontal') {\n            return 'form-label';\n        }\n\n        return ColumnSizeHelper.getClasses(\n            'col-form-label',\n            ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3)\n        );\n    }\n\n    readonly valueChangedSub = new Subject<string>();\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.updateClasses();\n\n        if (changes['value'] && !!this.mask) {\n            this.valueChangedSub.next(changes['value'].currentValue);\n        }\n    }\n\n    onInputChange(evt: Event): void {\n        if (!evt.target) {\n            return;\n        }\n\n        this.valueChange.emit((evt.target as any).value);\n    }\n\n    private updateClasses(): void {\n        const lClasses: string[] = !this.isPlainText ? ['form-control'] : ['form-control-plaintext'];\n\n        if (this.isRound) {\n            lClasses.push('form-control-rounded');\n        }\n\n        if (this.isFlush) {\n            lClasses.push('form-control-flush');\n        }\n\n        if (this.size !== 'default') {\n            lClasses.push(`form-control-${this.size === 'large' ? 'lg' : 'sm'}`);\n        }\n\n        if (!!this.validationStatus()) {\n            const statusCls = `is-${this.validationStatus()}`;\n            lClasses.push(statusCls);\n\n            if (this.isValidationStatusLight) {\n                lClasses.push(`${statusCls}-lite`);\n            }\n        }\n\n        if (this.layout === 'horizontal') {\n            this.hostWrapperClasses = 'row';\n        }\n\n        if (!!this.wrapperClasses) {\n            this.hostWrapperClasses += ` ${this.wrapperClasses}`;\n        }\n\n        if (this.isFloating) {\n            this.hostWrapperClasses += ' form-floating';\n        }\n\n        this.classes = [\n            ...lClasses,\n            ...(this.customClasses || '').split(' '),\n            this.layout === 'horizontal' ? 'col' : ''\n        ];\n    }\n}\n","@if (!!appendTemplate || !!prependTemplate) {\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div class=\"input-group\" [class.input-group-flat]=\"isInputGroupFlat\">\n        @if (!!prependTemplate) {\n            @if (!isPrependButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"prependTemplate.templateRef\"></ng-template>\n            }\n        }\n\n        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n        @if (!!appendTemplate) {\n            @if (!isAppendButton) {\n                <div class=\"input-group-text\">\n                    <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"appendTemplate.templateRef\"></ng-template>\n            }\n        }\n    </div>\n} @else if (!!prependIconModel || !!appendIconModel || isLoading) {\n    <ng-template [ngTemplateOutlet]=\"inputIconTpl\"></ng-template>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n}\n\n<ng-template #inputTpl>\n    @if (!hintText && !hintTemplate()) {\n        @if (shouldDisplayInnerLabel && !isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n\n        <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n\n        @if (shouldDisplayInnerLabel && isFloating) {\n            <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        }\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"basicInputTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #inputIconTpl>\n    <ng-template [ngTemplateOutlet]=\"labelTpl\"></ng-template>\n    <div [class.col]=\"layout === 'horizontal'\" [class.input-icon]=\"layout === 'vertical'\">\n        @if (layout === 'horizontal') {\n            <div class=\"input-icon\">\n                <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"inputIconBaseTpl\"></ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputIconBaseTpl>\n    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {\n        <span class=\"input-icon-addon\">\n            @if (!!prependIconModel) {\n                <upd-icon [model]=\"prependIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n\n    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {\n        <span class=\"input-icon-addon\">\n            @if (!!appendIconModel) {\n                <upd-icon [model]=\"appendIconModel\"></upd-icon>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"loaderTpl\"></ng-template>\n            }\n        </span>\n    }\n</ng-template>\n\n<ng-template #loaderTpl>\n    <div class=\"spinner-border spinner-border-sm text-muted\" role=\"status\"></div>\n</ng-template>\n\n<ng-template #basicInputTpl>\n    @if (!!mask) {\n        <input [updMask]=\"mask\" [updMaskConfig]=\"maskConfig\" [updateMaskValueSubject]=\"valueChangedSub\" [attr.type]=\"type\"\n            [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\" [value]=\"value || ''\"\n            [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\" (blur)=\"blurred.emit()\"\n            (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\" (keyup.enter)=\"keyUpEnter.emit()\" />\n    } @else {\n        <input [attr.type]=\"type\" [attr.maxlength]=\"maxLength\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [placeholder]=\"placeholderText\"\n            [value]=\"value || ''\" [attr.name]=\"name()\" [attr.readonly]=\"isReadOnly ? '' : undefined\" (input)=\"onInputChange($event)\"\n            (blur)=\"blurred.emit()\" (keydown)=\"keyDown.emit($event)\" (keydown.escape)=\"keyDownEsc.emit()\"\n            (keyup.enter)=\"keyUpEnter.emit()\" />\n    }\n\n    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {\n        @for (desc of validationStatusTexts; track desc) {\n            <div class=\"invalid-feedback\">{{ desc }}</div>\n        }\n    }\n</ng-template>\n\n<ng-template #labelTpl>\n    @if (!!labelText) {\n        <label [ngClass]=\"labelSizeClasses\" [class.required]=\"isRequired()\">{{ labelText }}</label>\n    }\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdMaskModule } from '@updevs/sdk/mask';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport { InputComponent } from './input.component';\nimport { InputAppendDirective } from './directives/input-append.directive';\nimport { InputPrependDirective } from './directives/input-prepend.directive';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdIconsModule,\n        UpdMaskModule,\n        UpdPopoverModule\n    ],\n    declarations: [\n        InputComponent,\n        InputAppendDirective,\n        InputPrependDirective\n    ],\n    exports: [\n        InputComponent,\n        InputAppendDirective,\n        InputPrependDirective\n    ]\n})\nexport class UpdInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/updevs-components-form-controls-radio.mjs

@@ -11,7 +11,6 @@ class RadioComponent extends BaseControl {
     constructor() {
         super(...arguments);
         this.wrapperClasses = '';
-        this.isDisabled = false;
         this.isChecked = false;
         this.isInline = false;
         this.selected = new EventEmitter();
@@ -32,11 +31,11 @@ class RadioComponent extends BaseControl {
         this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: RadioComponent, selector: "upd-radio", inputs: { wrapperClasses: "wrapperClasses", value: "value", customClasses: "customClasses", name: "name", isDisabled: "isDisabled", isChecked: "isChecked", isInline: "isInline" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input type=\"radio\" (change)=\"selected.emit()\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [value]=\"value\" [attr.name]=\"name\"\n        [attr.readonly]=\"isDisabled ? '' : undefined\" [checked]=\"isChecked\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: RadioComponent, selector: "upd-radio", inputs: { wrapperClasses: "wrapperClasses", value: "value", customClasses: "customClasses", isChecked: "isChecked", isInline: "isInline" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input type=\"radio\" (change)=\"selected.emit()\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [value]=\"value\" [attr.name]=\"name()\"\n        [attr.readonly]=\"isDisabled() ? '' : undefined\" [checked]=\"isChecked\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-radio', encapsulation: ViewEncapsulation.None, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input type=\"radio\" (change)=\"selected.emit()\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [value]=\"value\" [attr.name]=\"name\"\n        [attr.readonly]=\"isDisabled ? '' : undefined\" [checked]=\"isChecked\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n\n" }]
+            args: [{ selector: 'upd-radio', encapsulation: ViewEncapsulation.None, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input type=\"radio\" (change)=\"selected.emit()\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [value]=\"value\" [attr.name]=\"name()\"\n        [attr.readonly]=\"isDisabled() ? '' : undefined\" [checked]=\"isChecked\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n\n" }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -46,10 +45,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Input
             }], customClasses: [{
                 type: Input
-            }], name: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], isChecked: [{
                 type: Input
             }], isInline: [{

package/fesm2022/updevs-components-form-controls-radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"updevs-components-form-controls-radio.mjs","sources":["../../../../libs/components/form-controls/radio/src/radio.component.ts","../../../../libs/components/form-controls/radio/src/radio.component.html","../../../../libs/components/form-controls/radio/src/upd-radio.module.ts","../../../../libs/components/form-controls/radio/src/updevs-components-form-controls-radio.ts"],"sourcesContent":["import { Component, OnInit, OnChanges, Input, HostBinding, ViewEncapsulation, Output, EventEmitter } from '@angular/core';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\n\n@Component({\n    selector: 'upd-radio',\n    templateUrl: './radio.component.html',\n    styleUrls: ['./radio.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class RadioComponent extends BaseControl implements OnInit, OnChanges {\n    @HostBinding('class') @Input() wrapperClasses = '';\n\n    @Input() value?: any;\n    @Input() customClasses?: string;\n    @Input() name?: string;\n    @Input() isDisabled = false;\n    @Input() isChecked = false;\n    @Input() isInline = false;\n\n    @Output() readonly selected = new EventEmitter<void>();\n\n    classes: string[] = [];\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(): void {\n        this.updateClasses();\n    }\n\n    private updateClasses(): void {\n        const lClasses: string[] = ['form-check-input'];\n\n        if (!!this.validationStatus()) {\n            const statusCls = `is-${this.validationStatus()}`;\n            lClasses.push(statusCls);\n        }\n\n        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];\n    }\n}\n","<label class=\"form-check\" [class.form-check-inline]=\"isInline\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input type=\"radio\" (change)=\"selected.emit()\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [value]=\"value\" [attr.name]=\"name\"\n        [attr.readonly]=\"isDisabled ? '' : undefined\" [checked]=\"isChecked\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport { RadioComponent } from './radio.component';\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdPopoverModule,\n        ReactiveFormsModule\n    ],\n    declarations: [\n        RadioComponent\n    ],\n    exports: [\n        RadioComponent\n    ]\n})\nexport class UpdRadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"updevs-components-form-controls-radio.mjs","sources":["../../../../libs/components/form-controls/radio/src/radio.component.ts","../../../../libs/components/form-controls/radio/src/radio.component.html","../../../../libs/components/form-controls/radio/src/upd-radio.module.ts","../../../../libs/components/form-controls/radio/src/updevs-components-form-controls-radio.ts"],"sourcesContent":["import { Component, OnInit, OnChanges, Input, HostBinding, ViewEncapsulation, Output, EventEmitter } from '@angular/core';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\n\n@Component({\n    selector: 'upd-radio',\n    templateUrl: './radio.component.html',\n    styleUrls: ['./radio.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class RadioComponent extends BaseControl implements OnInit, OnChanges {\n    @HostBinding('class') @Input() wrapperClasses = '';\n\n    @Input() value?: any;\n    @Input() customClasses?: string;\n    @Input() isChecked = false;\n    @Input() isInline = false;\n\n    @Output() readonly selected = new EventEmitter<void>();\n\n    classes: string[] = [];\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(): void {\n        this.updateClasses();\n    }\n\n    private updateClasses(): void {\n        const lClasses: string[] = ['form-check-input'];\n\n        if (!!this.validationStatus()) {\n            const statusCls = `is-${this.validationStatus()}`;\n            lClasses.push(statusCls);\n        }\n\n        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];\n    }\n}\n","<label class=\"form-check\" [class.form-check-inline]=\"isInline\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input type=\"radio\" (change)=\"selected.emit()\" [disabled]=\"isDisabled()\" [ngClass]=\"classes\" [value]=\"value\" [attr.name]=\"name()\"\n        [attr.readonly]=\"isDisabled() ? '' : undefined\" [checked]=\"isChecked\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport { RadioComponent } from './radio.component';\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdPopoverModule,\n        ReactiveFormsModule\n    ],\n    declarations: [\n        RadioComponent\n    ],\n    exports: [\n        RadioComponent\n    ]\n})\nexport class UpdRadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AASM,MAAO,cAAe,SAAQ,WAAW,CAAA;AAN/C,IAAA,WAAA,GAAA;;QAOmC,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QAI1C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAClB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEP,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,YAAY,EAAQ,CAAC;QAEvD,IAAO,CAAA,OAAA,GAAa,EAAE,CAAC;AAoB1B,KAAA;IAlBG,QAAQ,GAAA;QACJ,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IAED,WAAW,GAAA;QACP,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IAEO,aAAa,GAAA;AACjB,QAAA,MAAM,QAAQ,GAAa,CAAC,kBAAkB,CAAC,CAAC;AAEhD,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE;YAC3B,MAAM,SAAS,GAAG,CAAM,GAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC;AAClD,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5B;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;KAC1E;8GA7BQ,cAAc,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,sUCT3B,20CAmCA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,yBAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,wBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FD1Ba,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;+BACI,WAAW,EAAA,aAAA,EAGN,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,20CAAA,EAAA,CAAA;8BAGN,cAAc,EAAA,CAAA;sBAA5C,WAAW;uBAAC,OAAO,CAAA;;sBAAG,KAAK;gBAEnB,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEa,QAAQ,EAAA,CAAA;sBAA1B,MAAM;;;MEGE,cAAc,CAAA;8GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAAd,cAAc,EAAA,YAAA,EAAA,CANnB,cAAc,CAAA,EAAA,OAAA,EAAA,CALd,YAAY;YACZ,gBAAgB;AAChB,YAAA,mBAAmB,aAMnB,cAAc,CAAA,EAAA,CAAA,CAAA,EAAA;AAGT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAXnB,YAAY;YACZ,gBAAgB;YAChB,mBAAmB,CAAA,EAAA,CAAA,CAAA,EAAA;;2FASd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAb1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,gBAAgB;wBAChB,mBAAmB;AACtB,qBAAA;AACD,oBAAA,YAAY,EAAE;wBACV,cAAc;AACjB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,cAAc;AACjB,qBAAA;AACJ,iBAAA,CAAA;;;ACnBD;;AAEG;;;;"}

package/fesm2022/updevs-components-form-controls-select.mjs

@@ -58,10 +58,6 @@ class BaseSelectComponent extends BaseControl {
         this.searchBox = viewChild('searchBox', { read: ElementRef });
         this.searchBoxChild = viewChild('searchBoxChild', { read: ElementRef });
         this.list = viewChild('list', { read: ElementRef });
-        /**
-         * Name of the HTML component.
-         */
-        this.name = input();
         /**
          * Select items.
          * If provided, the select will be considered static.
@@ -93,8 +89,6 @@ class BaseSelectComponent extends BaseControl {
         this.shouldAutoSearch = input(Defaults.shouldAutoSearch);
         this.shouldCloseOnOutsideClick = input(Defaults.shouldCloseOnOutsideClick);
         this.layout = input(Defaults.layout);
-        this.labelColSize = input();
-        this.isDisabled = input(false); // TODO: implementar.
         this.layoutClasses = computed(() => this.layout() === 'horizontal' ? ['col', 'align-self-center'] : []);
         this.isLoading = false;
         this.localItems = [];
@@ -229,7 +223,7 @@ class BaseSelectComponent extends BaseControl {
         this.renderer.setStyle(ddElement, 'width', `${Math.abs(componentBox.width)}px`, RendererStyleFlags2.Important);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.1.0", type: BaseSelectComponent, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, observable: { classPropertyName: "observable", publicName: "observable", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounce: { classPropertyName: "typeaheadDebounce", publicName: "typeaheadDebounce", isSignal: true, isRequired: false, transformFunction: null }, shouldAutoSearch: { classPropertyName: "shouldAutoSearch", publicName: "shouldAutoSearch", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, labelColSize: { classPropertyName: "labelColSize", publicName: "labelColSize", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownOpenStatusChange: "dropdownOpenStatusChange" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBoxChild", first: true, predicate: ["searchBoxChild"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.1.0", type: BaseSelectComponent, inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, observable: { classPropertyName: "observable", publicName: "observable", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounce: { classPropertyName: "typeaheadDebounce", publicName: "typeaheadDebounce", isSignal: true, isRequired: false, transformFunction: null }, shouldAutoSearch: { classPropertyName: "shouldAutoSearch", publicName: "shouldAutoSearch", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownOpenStatusChange: "dropdownOpenStatusChange" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBoxChild", first: true, predicate: ["searchBoxChild"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseSelectComponent, decorators: [{
             type: Directive
@@ -286,7 +280,7 @@ class SelectComponent extends BaseSelectComponent {
         this.selectedItem.emit(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectComponent, selector: "upd-select", inputs: { useSystemStyle: "useSystemStyle", shouldShowClearButton: "shouldShowClearButton", isCompact: "isCompact", selected: "selected" }, outputs: { selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (!labelText && (!!hintText || !!hintTemplate())) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                        [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                        ?\n                    </span>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (!labelText && (!!hintText || !!hintTemplate())) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span>{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon [model]=\"{tablerIcon:'chevron-down'}\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems; track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout", "labelColSize"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectComponent, selector: "upd-select", inputs: { useSystemStyle: "useSystemStyle", shouldShowClearButton: "shouldShowClearButton", isCompact: "isCompact", selected: "selected" }, outputs: { selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (!labelText && (!!hintText || !!hintTemplate())) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                        [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                        ?\n                    </span>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (!labelText && (!!hintText || !!hintTemplate())) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span>{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon [model]=\"{tablerIcon:'chevron-down'}\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems; track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -359,7 +353,7 @@ class SelectMultipleComponent extends BaseSelectComponent {
         this._setupLocalItems(this._localBackupItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectMultipleComponent, selector: "upd-select-multiple", outputs: { selectedItems: "selectedItems", selectedIds: "selectedIds" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout", "labelColSize"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectMultipleComponent, selector: "upd-select-multiple", outputs: { selectedItems: "selectedItems", selectedIds: "selectedIds" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,