@apexara/ng-components 1.0.5 → 1.0.6-test.1

package/fesm2022/apexara-ng-components-chip.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { ApexImageComponent } from '@apexara/ng-components/image';
 
 class ApexChipComponent {
     constructor() {
@@ -7,13 +8,15 @@ class ApexChipComponent {
         this.closeChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexChipComponent, isStandalone: true, selector: "apex-chip", inputs: { closeIcon: "closeIcon" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:28px;display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border-radius:28px;padding:6px 12px}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexChipComponent, isStandalone: true, selector: "apex-chip", inputs: { closeIcon: "closeIcon", options: "options" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n    @if (options && options.iconLeft) {\n        <div class=\"icon left\">\n            <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n        </div>\n    }\n\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (options && options.iconRight) {\n        <div class=\"icon right\">\n            <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n        </div>\n    }\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:var(--apex-chip-height, 28px);display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border:var(--apex-chip-border-width, 0px) solid var(--apex-chip-border-color, transparent);border-radius:var(--apex-chip-border-radius, 28px);padding:var(--apex-chip-padding, 6px 12px)}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon{width:var(--apex-chip-icon-size, 16px);height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.right{margin-left:var(--apex-chip-icon-spacing, 6px)}.icon.left{margin-right:var(--apex-chip-icon-spacing, 6px)}.icon apex-img{max-width:var(--apex-chip-icon-size, 16px);max-height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-chip-left-icon-fill, #FFFFFF);stroke:var(--apex-chip-left-icon-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-chip-right-icon-fill, #FFFFFF);stroke:var(--apex-chip-right-icon-stroke, #ffffff00)}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"], dependencies: [{ kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'apex-chip', template: "<div class=\"container\">\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:28px;display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border-radius:28px;padding:6px 12px}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"] }]
+            args: [{ selector: 'apex-chip', imports: [ApexImageComponent], template: "<div class=\"container\">\n    @if (options && options.iconLeft) {\n        <div class=\"icon left\">\n            <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n        </div>\n    }\n\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (options && options.iconRight) {\n        <div class=\"icon right\">\n            <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n        </div>\n    }\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:var(--apex-chip-height, 28px);display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border:var(--apex-chip-border-width, 0px) solid var(--apex-chip-border-color, transparent);border-radius:var(--apex-chip-border-radius, 28px);padding:var(--apex-chip-padding, 6px 12px)}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon{width:var(--apex-chip-icon-size, 16px);height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.right{margin-left:var(--apex-chip-icon-spacing, 6px)}.icon.left{margin-right:var(--apex-chip-icon-spacing, 6px)}.icon apex-img{max-width:var(--apex-chip-icon-size, 16px);max-height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-chip-left-icon-fill, #FFFFFF);stroke:var(--apex-chip-left-icon-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-chip-right-icon-fill, #FFFFFF);stroke:var(--apex-chip-right-icon-stroke, #ffffff00)}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"] }]
         }], propDecorators: { closeIcon: [{
                 type: Input
+            }], options: [{
+                type: Input
             }], closeChange: [{
                 type: Output
             }] } });

package/fesm2022/apexara-ng-components-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n  selector: 'apex-chip',\n  templateUrl: './chip.component.html',\n  styleUrls: ['./chip.component.css'],\n})\n\nexport class ApexChipComponent {\n\n  @Input() closeIcon = false;\n\n  @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,iBAAiB,CAAA;AAN9B,IAAA,WAAA,GAAA;QAQW,IAAA,CAAA,SAAS,GAAG,KAAK;AAEhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GANY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,kJCR9B,wcAWA,EAAA,MAAA,EAAA,CAAA,ojBAAA,CAAA,EAAA,CAAA,CAAA;;2FDHa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;+BACE,WAAW,EAAA,QAAA,EAAA,wcAAA,EAAA,MAAA,EAAA,CAAA,ojBAAA,CAAA,EAAA;;sBAOpB;;sBAEA;;;AEZH;;AAEG;;;;"}
+{"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexChipOptions {\n  iconLeft?: string;\n  iconRight?: string;\n}\n\n@Component({\n  selector: 'apex-chip',\n  templateUrl: './chip.component.html',\n  styleUrls: ['./chip.component.css'],\n  imports: [ApexImageComponent],\n})\n\nexport class ApexChipComponent {\n\n  @Input() closeIcon = false;\n\n  @Input() options!: ApexChipOptions;\n\n  @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n    @if (options && options.iconLeft) {\n        <div class=\"icon left\">\n            <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n        </div>\n    }\n\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (options && options.iconRight) {\n        <div class=\"icon right\">\n            <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n        </div>\n    }\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAgBa,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,SAAS,GAAG,KAAK;AAIhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GARY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB9B,q3BAuBA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,WAAW,EAAA,OAAA,EAGZ,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAA,q3BAAA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA;;sBAK5B;;sBAEA;;sBAEA;;;AEtBH;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-dialog.mjs

@@ -29,13 +29,13 @@ class ApexDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDialogComponent, deps: [{ token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDialogComponent, isStandalone: true, selector: "apex-dialog", inputs: { closeIcon: "closeIcon" }, outputs: { closeIconClick: "closeIconClick" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "closeIconTemplate", first: true, predicate: ["closeIcon"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n    <div class=\"dialog\">\n        @if (closeIcon) {\n            <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n                <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </div>\n        }\n\n        @if (title) {\n            <span class=\"title\">\n                <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n            </span>\n        }\n    \n        @if (description) {\n            <span class=\"description\">\n                <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n            </span>\n        }\n    \n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n    \n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDialogComponent, isStandalone: true, selector: "apex-dialog", inputs: { closeIcon: "closeIcon" }, outputs: { closeIconClick: "closeIconClick" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "closeIconTemplate", first: true, predicate: ["closeIcon"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n    <div class=\"dialog\">\n        @if (closeIcon) {\n            <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </div>\n        }\n\n        @if (title) {\n            <span class=\"title\">\n                <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n            </span>\n        }\n    \n        @if (description) {\n            <span class=\"description\">\n                <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n            </span>\n        }\n    \n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n    \n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apex-dialog', imports: [
                         NgTemplateOutlet,
-                    ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n    <div class=\"dialog\">\n        @if (closeIcon) {\n            <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n                <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </div>\n        }\n\n        @if (title) {\n            <span class=\"title\">\n                <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n            </span>\n        }\n    \n        @if (description) {\n            <span class=\"description\">\n                <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n            </span>\n        }\n    \n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n    \n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"] }]
+                    ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n    <div class=\"dialog\">\n        @if (closeIcon) {\n            <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </div>\n        }\n\n        @if (title) {\n            <span class=\"title\">\n                <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n            </span>\n        }\n    \n        @if (description) {\n            <span class=\"description\">\n                <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n            </span>\n        }\n    \n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n    \n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OverlayService }], propDecorators: { title: [{
                 type: ContentChild,
                 args: ['title']

package/fesm2022/apexara-ng-components-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-dialog.mjs","sources":["../../../../projects/apexara/ng-components/dialog/src/dialog.component.ts","../../../../projects/apexara/ng-components/dialog/src/dialog.component.html","../../../../projects/apexara/ng-components/dialog/apexara-ng-components-dialog.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nimport { OverlayService } from '@apexara/ng-components/services';\n\n@Component({\n  selector: 'apex-dialog',\n  templateUrl: './dialog.component.html',\n  styleUrls: ['./dialog.component.css'],\n  imports: [\n    NgTemplateOutlet,\n  ],\n})\n\nexport class ApexDialogComponent implements OnDestroy {\n\n  constructor(\n    private elementRef: ElementRef,\n    private overlayService: OverlayService) {\n  }\n\n  @ContentChild('title') title?: TemplateRef<any>;\n  @ContentChild('description') description?: TemplateRef<any>;\n  @ContentChild('content') content?: TemplateRef<any>;\n  @ContentChild('actions') actions?: TemplateRef<any>;\n\n  @ViewChild('closeIcon') closeIconTemplate?: ElementRef;\n\n  @Input() closeIcon: boolean = false;\n\n  @Output() closeIconClick = new EventEmitter<void>();\n\n  public ngAfterViewInit(): void {\n    this.overlayService.appendToOverlay(this.elementRef.nativeElement, true);\n  }\n\n  public ngOnDestroy(): void {\n    this.overlayService.removeFromOverlay(this.elementRef.nativeElement);\n  }\n\n  public onCloseIconClick(): void {\n    this.closeIconClick.emit();\n  }\n\n  public handleKeydown(event: KeyboardEvent): void {\n    if (!(document.activeElement === this.closeIconTemplate?.nativeElement)) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.closeIconClick.emit();\n    }\n  }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n    <div class=\"dialog\">\n        @if (closeIcon) {\n            <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n                <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </div>\n        }\n\n        @if (title) {\n            <span class=\"title\">\n                <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n            </span>\n        }\n    \n        @if (description) {\n            <span class=\"description\">\n                <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n            </span>\n        }\n    \n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n    \n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-dialog.mjs","sources":["../../../../projects/apexara/ng-components/dialog/src/dialog.component.ts","../../../../projects/apexara/ng-components/dialog/src/dialog.component.html","../../../../projects/apexara/ng-components/dialog/apexara-ng-components-dialog.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nimport { OverlayService } from '@apexara/ng-components/services';\n\n@Component({\n  selector: 'apex-dialog',\n  templateUrl: './dialog.component.html',\n  styleUrls: ['./dialog.component.css'],\n  imports: [\n    NgTemplateOutlet,\n  ],\n})\n\nexport class ApexDialogComponent implements OnDestroy {\n\n  constructor(\n    private elementRef: ElementRef,\n    private overlayService: OverlayService) {\n  }\n\n  @ContentChild('title') title?: TemplateRef<any>;\n  @ContentChild('description') description?: TemplateRef<any>;\n  @ContentChild('content') content?: TemplateRef<any>;\n  @ContentChild('actions') actions?: TemplateRef<any>;\n\n  @ViewChild('closeIcon') closeIconTemplate?: ElementRef;\n\n  @Input() closeIcon: boolean = false;\n\n  @Output() closeIconClick = new EventEmitter<void>();\n\n  public ngAfterViewInit(): void {\n    this.overlayService.appendToOverlay(this.elementRef.nativeElement, true);\n  }\n\n  public ngOnDestroy(): void {\n    this.overlayService.removeFromOverlay(this.elementRef.nativeElement);\n  }\n\n  public onCloseIconClick(): void {\n    this.closeIconClick.emit();\n  }\n\n  public handleKeydown(event: KeyboardEvent): void {\n    if (!(document.activeElement === this.closeIconTemplate?.nativeElement)) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.closeIconClick.emit();\n    }\n  }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n    <div class=\"dialog\">\n        @if (closeIcon) {\n            <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </div>\n        }\n\n        @if (title) {\n            <span class=\"title\">\n                <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n            </span>\n        }\n    \n        @if (description) {\n            <span class=\"description\">\n                <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n            </span>\n        }\n    \n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n    \n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAca,mBAAmB,CAAA;IAE9B,WAAA,CACU,UAAsB,EACtB,cAA8B,EAAA;QAD9B,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,cAAc,GAAd,cAAc;QAUf,IAAA,CAAA,SAAS,GAAY,KAAK;AAEzB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,YAAY,EAAQ;IAXnD;IAaO,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC;IAC1E;IAEO,WAAW,GAAA;QAChB,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IACtE;IAEO,gBAAgB,GAAA;AACrB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;IAC5B;AAEO,IAAA,aAAa,CAAC,KAAoB,EAAA;AACvC,QAAA,IAAI,EAAE,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,EAAE;YACvE;QACF;AAEA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;QAC5B;IACF;8GAvCW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdhC,ywCAqCA,EAAA,MAAA,EAAA,CAAA,sqCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIP,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAT/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EAGd;wBACP,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,ywCAAA,EAAA,MAAA,EAAA,CAAA,sqCAAA,CAAA,EAAA;;sBAUA,YAAY;uBAAC,OAAO;;sBACpB,YAAY;uBAAC,aAAa;;sBAC1B,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,SAAS;;sBAEtB,SAAS;uBAAC,WAAW;;sBAErB;;sBAEA;;;AE9BH;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-drawer.mjs

@@ -1,18 +1,8 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, ContentChild, Output, Component } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@apexara/ng-components/services';
 
-const OpenCloseAnimation = trigger('openCloseAnimation', [
-    state('true', style({
-        transform: 'translateX(0%)',
-    })),
-    state('false', style({
-        transform: 'translateX(100%)',
-    })),
-    transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
-]);
 class ApexDrawerComponent {
     constructor(scrollBlockService, changeDetector) {
         this.scrollBlockService = scrollBlockService;
@@ -25,8 +15,10 @@ class ApexDrawerComponent {
         this.scrollBlockService.deactivate();
     }
     ngAfterViewInit() {
-        this.isOpen = true;
-        this.changeDetector.detectChanges();
+        requestAnimationFrame(() => {
+            this.isOpen = true;
+            this.changeDetector.detectChanges();
+        });
     }
     close() {
         if (!this.closeChange) {
@@ -38,13 +30,13 @@ class ApexDrawerComponent {
         }, 250);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDrawerComponent, deps: [{ token: i1.ScrollBlockService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDrawerComponent, isStandalone: true, selector: "apex-drawer", outputs: { closeChange: "closeChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [OpenCloseAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDrawerComponent, isStandalone: true, selector: "apex-drawer", outputs: { closeChange: "closeChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [class.open]=\"isOpen\">\n        <div class=\"close-icon\" tabindex=\"0\" (click)=\"close()\" (keydown.enter)=\"close()\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;position:relative;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.1,1)}.container.open{transform:translate(0)}.close-icon{width:20px;height:20px;position:absolute;top:16px;right:16px;cursor:pointer}.close-icon svg path{stroke:var(--apex-drawer-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-drawer-close-icon-hover-color, #000000)}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'apex-drawer', animations: [OpenCloseAnimation], imports: [
+            args: [{ selector: 'apex-drawer', imports: [
                         NgTemplateOutlet,
-                    ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"] }]
+                    ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [class.open]=\"isOpen\">\n        <div class=\"close-icon\" tabindex=\"0\" (click)=\"close()\" (keydown.enter)=\"close()\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;position:relative;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.1,1)}.container.open{transform:translate(0)}.close-icon{width:20px;height:20px;position:absolute;top:16px;right:16px;cursor:pointer}.close-icon svg path{stroke:var(--apex-drawer-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-drawer-close-icon-hover-color, #000000)}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"] }]
         }], ctorParameters: () => [{ type: i1.ScrollBlockService }, { type: i0.ChangeDetectorRef }], propDecorators: { closeChange: [{
                 type: Output
             }], title: [{

package/fesm2022/apexara-ng-components-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-drawer.mjs","sources":["../../../../projects/apexara/ng-components/drawer/src/drawer.component.ts","../../../../projects/apexara/ng-components/drawer/src/drawer.component.html","../../../../projects/apexara/ng-components/drawer/apexara-ng-components-drawer.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, EventEmitter, Output, AfterViewInit, ChangeDetectorRef } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\nimport { ScrollBlockService } from '@apexara/ng-components/services';\n\nconst OpenCloseAnimation = trigger('openCloseAnimation', [\n  state('true', style({\n      transform: 'translateX(0%)',\n    }),\n  ),\n  state('false', style({\n      transform: 'translateX(100%)',\n    }),\n  ),\n  transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),\n]);\n\n@Component({\n  selector: 'apex-drawer',\n  templateUrl: './drawer.component.html',\n  styleUrls: ['./drawer.component.css'],\n  animations: [OpenCloseAnimation],\n  imports: [\n    NgTemplateOutlet,\n  ],\n})\n\nexport class ApexDrawerComponent implements AfterViewInit, OnDestroy {\n\n  constructor(\n    private scrollBlockService: ScrollBlockService,\n    private changeDetector: ChangeDetectorRef) {\n\n    this.scrollBlockService.activate();\n  }\n\n  public isOpen = false;\n\n  @Output() closeChange = new EventEmitter<void>();\n\n  @ContentChild('title') title?: TemplateRef<any>;\n  @ContentChild('description') description?: TemplateRef<any>;\n  @ContentChild('content') content?: TemplateRef<any>;\n  @ContentChild('actions') actions?: TemplateRef<any>;\n\n  public ngOnDestroy(): void {\n    this.scrollBlockService.deactivate();\n  }\n\n  public ngAfterViewInit(): void {\n    this.isOpen = true;\n\n    this.changeDetector.detectChanges();\n  }\n\n  public close(): void {\n    if (!this.closeChange) {\n      return;\n    }\n\n    this.isOpen = false;\n\n    setTimeout(() => {\n      this.closeChange.emit();\n    }, 250);\n  }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,EAAE;AACvD,IAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAChB,QAAA,SAAS,EAAE,gBAAgB;AAC5B,KAAA,CAAC,CACH;AACD,IAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;AACjB,QAAA,SAAS,EAAE,kBAAkB;AAC9B,KAAA,CAAC,CACH;AACD,IAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAC5E,CAAA,CAAC;MAYW,mBAAmB,CAAA;IAE9B,WAAA,CACU,kBAAsC,EACtC,cAAiC,EAAA;QADjC,IAAA,CAAA,kBAAkB,GAAlB,kBAAkB;QAClB,IAAA,CAAA,cAAc,GAAd,cAAc;QAKjB,IAAA,CAAA,MAAM,GAAG,KAAK;AAEX,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAL9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;IACpC;IAWO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE;IACtC;IAEO,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAElB,QAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;IACrC;IAEO,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QAEnB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB,CAAC,EAAE,GAAG,CAAC;IACT;8GAtCW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,mdC5BhC,i7BA+BA,EAAA,MAAA,EAAA,CAAA,u0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDPI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAFN,CAAC,kBAAkB,CAAC,EAAA,CAAA,CAAA;;2FAMrB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EAGX,CAAC,kBAAkB,CAAC,EAAA,OAAA,EACvB;wBACP,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,i7BAAA,EAAA,MAAA,EAAA,CAAA,u0BAAA,CAAA,EAAA;;sBAcA;;sBAEA,YAAY;uBAAC,OAAO;;sBACpB,YAAY;uBAAC,aAAa;;sBAC1B,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,SAAS;;;AE5CzB;;AAEG;;;;"}
+{"version":3,"file":"apexara-ng-components-drawer.mjs","sources":["../../../../projects/apexara/ng-components/drawer/src/drawer.component.ts","../../../../projects/apexara/ng-components/drawer/src/drawer.component.html","../../../../projects/apexara/ng-components/drawer/apexara-ng-components-drawer.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, EventEmitter, Output, AfterViewInit, ChangeDetectorRef } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nimport { ScrollBlockService } from '@apexara/ng-components/services';\n\n@Component({\n  selector: 'apex-drawer',\n  templateUrl: './drawer.component.html',\n  styleUrls: ['./drawer.component.css'],\n  imports: [\n    NgTemplateOutlet,\n  ],\n})\n\nexport class ApexDrawerComponent implements AfterViewInit, OnDestroy {\n\n  constructor(\n    private scrollBlockService: ScrollBlockService,\n    private changeDetector: ChangeDetectorRef) {\n\n    this.scrollBlockService.activate();\n  }\n\n  public isOpen = false;\n\n  @Output() closeChange = new EventEmitter<void>();\n\n  @ContentChild('title') title?: TemplateRef<any>;\n  @ContentChild('description') description?: TemplateRef<any>;\n  @ContentChild('content') content?: TemplateRef<any>;\n  @ContentChild('actions') actions?: TemplateRef<any>;\n\n  public ngOnDestroy(): void {\n    this.scrollBlockService.deactivate();\n  }\n\n  public ngAfterViewInit(): void {\n    requestAnimationFrame(() => {\n      this.isOpen = true;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public close(): void {\n    if (!this.closeChange) {\n      return;\n    }\n\n    this.isOpen = false;\n\n    setTimeout(() => {\n      this.closeChange.emit();\n    }, 250);\n  }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [class.open]=\"isOpen\">\n        <div class=\"close-icon\" tabindex=\"0\" (click)=\"close()\" (keydown.enter)=\"close()\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAca,mBAAmB,CAAA;IAE9B,WAAA,CACU,kBAAsC,EACtC,cAAiC,EAAA;QADjC,IAAA,CAAA,kBAAkB,GAAlB,kBAAkB;QAClB,IAAA,CAAA,cAAc,GAAd,cAAc;QAKjB,IAAA,CAAA,MAAM,GAAG,KAAK;AAEX,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAL9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;IACpC;IAWO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE;IACtC;IAEO,eAAe,GAAA;QACpB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,YAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;AACrC,QAAA,CAAC,CAAC;IACJ;IAEO,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QAEnB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB,CAAC,EAAE,GAAG,CAAC;IACT;8GAvCW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdhC,kyCAqCA,EAAA,MAAA,EAAA,CAAA,ksCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIP,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAT/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EAGd;wBACP,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,kyCAAA,EAAA,MAAA,EAAA,CAAA,ksCAAA,CAAA,EAAA;;sBAcA;;sBAEA,YAAY;uBAAC,OAAO;;sBACpB,YAAY;uBAAC,aAAa;;sBAC1B,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,SAAS;;;AE9BzB;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-expander.mjs

@@ -1,32 +1,20 @@
 import * as i0 from '@angular/core';
 import { Input, Component } from '@angular/core';
 import { NgClass } from '@angular/common';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 
-const OpenCloseAnimation = trigger('openCloseAnimation', [
-    state('true', style({
-        height: '{{ height }}',
-        paddingBottom: '20px',
-    }), { params: { height: '*' } }),
-    state('false', style({
-        height: '0px',
-        paddingBottom: '0px',
-    })),
-    transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
-]);
 class ApexExpanderComponent {
     constructor() {
         this.isOpen = false;
         this.maxHeight = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexExpanderComponent, isStandalone: true, selector: "apex-expander", inputs: { isOpen: "isOpen", maxHeight: "maxHeight" }, ngImport: i0, template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n        <ng-content select=\"[content]\"></ng-content>\n    </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [OpenCloseAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexExpanderComponent, isStandalone: true, selector: "apex-expander", inputs: { isOpen: "isOpen", maxHeight: "maxHeight" }, ngImport: i0, template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content-wrapper\">\n        <div class=\"content\" [style.max-height]=\"maxHeight ? maxHeight + 'px' : 'none'\">\n            <ng-content select=\"[content]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.1,1),padding-bottom .25s cubic-bezier(.4,0,.1,1);padding-bottom:0}.container.open .content-wrapper{grid-template-rows:1fr;padding-bottom:20px}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px;min-height:0}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexExpanderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'apex-expander', animations: [OpenCloseAnimation], imports: [
+            args: [{ selector: 'apex-expander', imports: [
                         NgClass,
-                    ], template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n        <ng-content select=\"[content]\"></ng-content>\n    </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"] }]
+                    ], template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content-wrapper\">\n        <div class=\"content\" [style.max-height]=\"maxHeight ? maxHeight + 'px' : 'none'\">\n            <ng-content select=\"[content]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.1,1),padding-bottom .25s cubic-bezier(.4,0,.1,1);padding-bottom:0}.container.open .content-wrapper{grid-template-rows:1fr;padding-bottom:20px}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px;min-height:0}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], maxHeight: [{

package/fesm2022/apexara-ng-components-expander.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-expander.mjs","sources":["../../../../projects/apexara/ng-components/expander/src/expander.component.ts","../../../../projects/apexara/ng-components/expander/src/expander.component.html","../../../../projects/apexara/ng-components/expander/apexara-ng-components-expander.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\nconst OpenCloseAnimation = trigger('openCloseAnimation', [\n  state('true', style({\n      height: '{{ height }}',\n      paddingBottom: '20px',\n    }),\n    { params: { height: '*' }},\n  ),\n  state('false', style({\n      height: '0px',\n      paddingBottom: '0px',\n    }),\n  ),\n  transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),\n]);\n\n@Component({\n  selector: 'apex-expander',\n  templateUrl: './expander.component.html',\n  styleUrls: ['./expander.component.css'],\n  animations: [OpenCloseAnimation],\n  imports: [\n    NgClass,\n  ],\n})\n\nexport class ApexExpanderComponent {\n\n  @Input() isOpen = false;\n  @Input() maxHeight: number | null = null;\n\n}\n","<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n        <ng-content select=\"[content]\"></ng-content>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA,MAAM,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,EAAE;AACvD,IAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAChB,QAAA,MAAM,EAAE,cAAc;AACtB,QAAA,aAAa,EAAE,MAAM;KACtB,CAAC,EACF,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAC,CAC3B;AACD,IAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,aAAa,EAAE,KAAK;AACrB,KAAA,CAAC,CACH;AACD,IAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAC5E,CAAA,CAAC;MAYW,qBAAqB,CAAA;AAVlC,IAAA,WAAA,GAAA;QAYW,IAAA,CAAA,MAAM,GAAG,KAAK;QACd,IAAA,CAAA,SAAS,GAAkB,IAAI;AAEzC,IAAA;8GALY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,+HC7BlC,4hBAaA,EAAA,MAAA,EAAA,CAAA,64CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDYI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAFG,CAAC,kBAAkB,CAAC,EAAA,CAAA,CAAA;;2FAMrB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAVjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EAGb,CAAC,kBAAkB,CAAC,EAAA,OAAA,EACvB;wBACP,OAAO;AACR,qBAAA,EAAA,QAAA,EAAA,4hBAAA,EAAA,MAAA,EAAA,CAAA,64CAAA,CAAA,EAAA;;sBAKA;;sBACA;;;AEhCH;;AAEG;;;;"}
+{"version":3,"file":"apexara-ng-components-expander.mjs","sources":["../../../../projects/apexara/ng-components/expander/src/expander.component.ts","../../../../projects/apexara/ng-components/expander/src/expander.component.html","../../../../projects/apexara/ng-components/expander/apexara-ng-components-expander.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n@Component({\n  selector: 'apex-expander',\n  templateUrl: './expander.component.html',\n  styleUrls: ['./expander.component.css'],\n  imports: [\n    NgClass,\n  ],\n})\n\nexport class ApexExpanderComponent {\n\n  @Input() isOpen = false;\n  @Input() maxHeight: number | null = null;\n\n}\n","<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content-wrapper\">\n        <div class=\"content\" [style.max-height]=\"maxHeight ? maxHeight + 'px' : 'none'\">\n            <ng-content select=\"[content]\"></ng-content>\n        </div>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,qBAAqB,CAAA;AATlC,IAAA,WAAA,GAAA;QAWW,IAAA,CAAA,MAAM,GAAG,KAAK;QACd,IAAA,CAAA,SAAS,GAAkB,IAAI;AAEzC,IAAA;8GALY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZlC,mjBAeA,EAAA,MAAA,EAAA,CAAA,mpDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDPI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIE,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,OAAA,EAGhB;wBACP,OAAO;AACR,qBAAA,EAAA,QAAA,EAAA,mjBAAA,EAAA,MAAA,EAAA,CAAA,mpDAAA,CAAA,EAAA;;sBAKA;;sBACA;;;AEfH;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-input.mjs

@@ -94,7 +94,7 @@ class ApexInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexInputComponent, isStandalone: true, selector: "apex-input", inputs: { options: "options" }, outputs: { inputChange: "inputChange", suffixImgChange: "suffixImgChange", helperTextChange: "helperTextChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexInputComponent, isStandalone: true, selector: "apex-input", inputs: { options: "options" }, outputs: { inputChange: "inputChange", suffixImgChange: "suffixImgChange", helperTextChange: "helperTextChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, decorators: [{
             type: Component,
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ReactiveFormsModule,
                         ApexTooltipDirective,
                         ApexTooltipDirective
-                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
+                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: Input
             }], inputChange: [{

package/fesm2022/apexara-ng-components-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\nexport interface ApexControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    ApexImageComponent,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n    ApexTooltipDirective\n  ]\n})\n\nexport class ApexInputComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { \n    this.changeDetectorRef.detach();\n  }\n\n  @Input() options!: ApexInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label!: string;\n  public controlInvalid = false;\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n  \n    const sanitizedValue = input.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n  \n    input.value = sanitizedValue;\n  \n    this.inputChange.emit(sanitizedValue);\n  \n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n  \n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.touched && control.invalid;\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n  \n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label = '';\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\nexport interface ApexControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    ApexImageComponent,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n    ApexTooltipDirective\n  ]\n})\n\nexport class ApexInputComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { \n    this.changeDetectorRef.detach();\n  }\n\n  @Input() options!: ApexInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label!: string;\n  public controlInvalid = false;\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n  \n    const sanitizedValue = input.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n  \n    input.value = sanitizedValue;\n  \n    this.inputChange.emit(sanitizedValue);\n  \n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n  \n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.touched && control.invalid;\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n  \n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label = '';\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-listbox.mjs

@@ -270,14 +270,14 @@ class ApexListboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexListboxComponent, isStandalone: true, selector: "apex-listbox", inputs: { options: "options", virtualScroll: "virtualScroll", itemSize: "itemSize" }, outputs: { selectChange: "selectChange" }, host: { listeners: { "document:mouseup": "mouseup()", "keyup": "keyup($event)" } }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    <div class=\"listbox-header\">\n        @if (options.label) {\n            <label>{{ options.label }}</label>\n        }\n\n        @if (options.tooltip) {\n            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g>\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        }\n    </div>\n\n    <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n        @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n                <div class=\"item\"\n                     *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n                     [attr.value]=\"i\"\n                     [style.height.px]=\"itemSize\"\n                     [style.line-height.px]=\"itemSize\"\n                     [class.selected]=\"isIndexSelected(i)\"\n                     (mousedown)=\"mousedown(i)\"\n                     (mouseover)=\"mouseover(i)\">\n                    {{ data.label }}\n                </div>\n            </cdk-virtual-scroll-viewport>\n        } @else {\n            <div class=\"container-inner\">\n                @for (data of options.data; track data.value) {\n                    <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n                        {{ data.label }}\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"footer\" [class.error]=\"controlInvalid\">\n        {{ controlError }}\n    </div>\n}\n", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexListboxComponent, isStandalone: true, selector: "apex-listbox", inputs: { options: "options", virtualScroll: "virtualScroll", itemSize: "itemSize" }, outputs: { selectChange: "selectChange" }, host: { listeners: { "document:mouseup": "mouseup()", "keyup": "keyup($event)" } }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    <div class=\"listbox-header\">\n        @if (options.label) {\n            <label>{{ options.label }}</label>\n        }\n\n        @if (options.tooltip) {\n            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g>\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        }\n    </div>\n\n    <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n        @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n                <div class=\"item\"\n                     *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n                     [attr.value]=\"i\"\n                     [style.height.px]=\"itemSize\"\n                     [style.line-height.px]=\"itemSize\"\n                     [class.selected]=\"isIndexSelected(i)\"\n                     (mousedown)=\"mousedown(i)\"\n                     (mouseover)=\"mouseover(i)\">\n                    {{ data.label }}\n                </div>\n            </cdk-virtual-scroll-viewport>\n        } @else {\n            <div class=\"container-inner\">\n                @for (data of options.data; track data.value) {\n                    <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n                        {{ data.label }}\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"footer\" [class.error]=\"controlInvalid\">\n        {{ controlError }}\n    </div>\n}\n", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'apex-listbox', imports: [
                         ScrollingModule,
                         ApexTooltipDirective,
-                    ], template: "@if (options) {\n    <div class=\"listbox-header\">\n        @if (options.label) {\n            <label>{{ options.label }}</label>\n        }\n\n        @if (options.tooltip) {\n            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g>\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        }\n    </div>\n\n    <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n        @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n                <div class=\"item\"\n                     *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n                     [attr.value]=\"i\"\n                     [style.height.px]=\"itemSize\"\n                     [style.line-height.px]=\"itemSize\"\n                     [class.selected]=\"isIndexSelected(i)\"\n                     (mousedown)=\"mousedown(i)\"\n                     (mouseover)=\"mouseover(i)\">\n                    {{ data.label }}\n                </div>\n            </cdk-virtual-scroll-viewport>\n        } @else {\n            <div class=\"container-inner\">\n                @for (data of options.data; track data.value) {\n                    <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n                        {{ data.label }}\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"footer\" [class.error]=\"controlInvalid\">\n        {{ controlError }}\n    </div>\n}\n", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"] }]
+                    ], template: "@if (options) {\n    <div class=\"listbox-header\">\n        @if (options.label) {\n            <label>{{ options.label }}</label>\n        }\n\n        @if (options.tooltip) {\n            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g>\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        }\n    </div>\n\n    <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n        @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n                <div class=\"item\"\n                     *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n                     [attr.value]=\"i\"\n                     [style.height.px]=\"itemSize\"\n                     [style.line-height.px]=\"itemSize\"\n                     [class.selected]=\"isIndexSelected(i)\"\n                     (mousedown)=\"mousedown(i)\"\n                     (mouseover)=\"mouseover(i)\">\n                    {{ data.label }}\n                </div>\n            </cdk-virtual-scroll-viewport>\n        } @else {\n            <div class=\"container-inner\">\n                @for (data of options.data; track data.value) {\n                    <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n                        {{ data.label }}\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"footer\" [class.error]=\"controlInvalid\">\n        {{ controlError }}\n    </div>\n}\n", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox']