@apexara/ng-components 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/fesm2022/apexara-ng-components-button.mjs +2 -2
  2. package/fesm2022/apexara-ng-components-button.mjs.map +1 -1
  3. package/fesm2022/apexara-ng-components-image.mjs +28 -16
  4. package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
  5. package/fesm2022/apexara-ng-components-input.mjs +2 -2
  6. package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
  7. package/fesm2022/apexara-ng-components-select.mjs +2 -2
  8. package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
  9. package/fesm2022/apexara-ng-components-snackbar.mjs +2 -2
  10. package/fesm2022/apexara-ng-components-snackbar.mjs.map +1 -1
  11. package/fesm2022/apexara-ng-components-table.mjs +2 -2
  12. package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
  13. package/fesm2022/apexara-ng-components-textarea.mjs +2 -2
  14. package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
  15. package/package.json +9 -8
  16. package/types/apexara-ng-components-image.d.ts +3 -3
package/fesm2022/apexara-ng-components-button.mjs CHANGED
@@ -36,14 +36,14 @@ class ApexButtonComponent {
36
36
  }
37
37
  }
38
38
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
39
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexButtonComponent, isStandalone: true, selector: "apex-button", inputs: { link: "link", state: "state", options: "options", ariaLabel: "ariaLabel" }, outputs: { focusChange: "focusChange", clickChange: "clickChange" }, ngImport: i0, template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button 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\" [ariaLabel]=\"'Right side of button icon.'\"></apex-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--apex-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--apex-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-button-left-svg-fill, #FFFFFF);stroke:var(--apex-button-left-svg-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-button-right-svg-fill, #FFFFFF);stroke:var(--apex-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--apex-button-text-color, #FFFFFF);border-radius:var(--apex-button-border-radius, 4px);border:1px solid var(--apex-button-border-color, none);background-color:var(--apex-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "ariaLabel"] }] }); }
39
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexButtonComponent, isStandalone: true, selector: "apex-button", inputs: { link: "link", state: "state", options: "options", ariaLabel: "ariaLabel" }, outputs: { focusChange: "focusChange", clickChange: "clickChange" }, ngImport: i0, template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Left side of button 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]=\"'Right side of button icon.'\"></apex-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--apex-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--apex-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-button-left-svg-fill, #FFFFFF);stroke:var(--apex-button-left-svg-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-button-right-svg-fill, #FFFFFF);stroke:var(--apex-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--apex-button-text-color, #FFFFFF);border-radius:var(--apex-button-border-radius, 4px);border:1px solid var(--apex-button-border-color, none);background-color:var(--apex-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }] }); }
40
40
  }
41
41
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexButtonComponent, decorators: [{
42
42
  type: Component,
43
43
  args: [{ selector: 'apex-button', imports: [
44
44
  RouterModule,
45
45
  ApexImageComponent
46
- ], template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button 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\" [ariaLabel]=\"'Right side of button icon.'\"></apex-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--apex-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--apex-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-button-left-svg-fill, #FFFFFF);stroke:var(--apex-button-left-svg-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-button-right-svg-fill, #FFFFFF);stroke:var(--apex-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--apex-button-text-color, #FFFFFF);border-radius:var(--apex-button-border-radius, 4px);border:1px solid var(--apex-button-border-color, none);background-color:var(--apex-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"] }]
46
+ ], template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Left side of button 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]=\"'Right side of button icon.'\"></apex-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--apex-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--apex-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-button-left-svg-fill, #FFFFFF);stroke:var(--apex-button-left-svg-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-button-right-svg-fill, #FFFFFF);stroke:var(--apex-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--apex-button-text-color, #FFFFFF);border-radius:var(--apex-button-border-radius, 4px);border:1px solid var(--apex-button-border-color, none);background-color:var(--apex-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"] }]
47
47
  }], ctorParameters: () => [], propDecorators: { link: [{
48
48
  type: Input
49
49
  }], state: [{
package/fesm2022/apexara-ng-components-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-button.mjs","sources":["../../../../projects/apexara/ng-components/button/src/button.component.ts","../../../../projects/apexara/ng-components/button/src/button.component.html","../../../../projects/apexara/ng-components/button/apexara-ng-components-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { RouterModule } from '@angular/router';\n\nimport { Subject, throttleTime } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexButtonOptions {\n iconLeft?: string;\n iconRight?: string;\n throttleTimeMs?: number;\n}\n\nconst defaultOptions: ApexButtonOptions = {\n throttleTimeMs: 300,\n}\n\n@Component({\n selector: 'apex-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.css'],\n imports: [\n RouterModule,\n ApexImageComponent\n],\n})\n\nexport class ApexButtonComponent {\n\n @Input() link: string | null = null;\n @Input() state: any | null = null;\n\n @Input() options!: ApexButtonOptions;\n\n @Input() ariaLabel: string = 'Button';\n\n @Output() focusChange = new EventEmitter<FocusEvent>();\n @Output() clickChange = new EventEmitter<KeyboardEvent | PointerEvent | MouseEvent>();\n\n private clickSubject = new Subject<KeyboardEvent | PointerEvent | MouseEvent>();\n\n constructor() { }\n\n public ngAfterViewInit(): void {\n this.options = { ...defaultOptions, ...this.options };\n\n this.clickSubject\n .pipe(throttleTime(this.options.throttleTimeMs!))\n .subscribe(event => this.clickChange.emit(event));\n }\n\n public onClick(event: KeyboardEvent | PointerEvent | MouseEvent): void {\n this.clickSubject.next(event);\n }\n\n public onFocusChange(event: FocusEvent): void {\n this.focusChange.emit(event);\n }\n\n public handleKeydown(event: KeyboardEvent): void {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n\n this.onClick(event);\n }\n }\n\n}\n","<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button 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\" [ariaLabel]=\"'Right side of button icon.'\"></apex-img>\n </div>\n }\n </div>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,cAAc,GAAsB;AACxC,IAAA,cAAc,EAAE,GAAG;CACpB;MAYY,mBAAmB,CAAA;AAc9B,IAAA,WAAA,GAAA;QAZS,IAAA,CAAA,IAAI,GAAkB,IAAI;QAC1B,IAAA,CAAA,KAAK,GAAe,IAAI;QAIxB,IAAA,CAAA,SAAS,GAAW,QAAQ;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAc;AAC5C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAA6C;AAE7E,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAA6C;IAE/D;IAET,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AAErD,QAAA,IAAI,CAAC;aACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,cAAe,CAAC;AAC/C,aAAA,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD;AAEO,IAAA,OAAO,CAAC,KAAgD,EAAA;AAC7D,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/B;AAEO,IAAA,aAAa,CAAC,KAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;IAC9B;AAEO,IAAA,aAAa,CAAC,KAAoB,EAAA;AACvC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YACpD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB;IACF;8GAtCW,mBAAmB,EAAA,IAAA,EAAA,EAAA,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,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BhC,+5BA6BA,EAAA,MAAA,EAAA,CAAA,g1CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDNI,YAAY,gRACZ,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIT,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EAGd;wBACP,YAAY;wBACZ;AACH,qBAAA,EAAA,QAAA,EAAA,+5BAAA,EAAA,MAAA,EAAA,CAAA,g1CAAA,CAAA,EAAA;;sBAKE;;sBACA;;sBAEA;;sBAEA;;sBAEA;;sBACA;;;AEtCH;;AAEG;;;;"}
1
+ {"version":3,"file":"apexara-ng-components-button.mjs","sources":["../../../../projects/apexara/ng-components/button/src/button.component.ts","../../../../projects/apexara/ng-components/button/src/button.component.html","../../../../projects/apexara/ng-components/button/apexara-ng-components-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { RouterModule } from '@angular/router';\n\nimport { Subject, throttleTime } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexButtonOptions {\n iconLeft?: string;\n iconRight?: string;\n throttleTimeMs?: number;\n}\n\nconst defaultOptions: ApexButtonOptions = {\n throttleTimeMs: 300,\n}\n\n@Component({\n selector: 'apex-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.css'],\n imports: [\n RouterModule,\n ApexImageComponent\n],\n})\n\nexport class ApexButtonComponent {\n\n @Input() link: string | null = null;\n @Input() state: any | null = null;\n\n @Input() options!: ApexButtonOptions;\n\n @Input() ariaLabel: string = 'Button';\n\n @Output() focusChange = new EventEmitter<FocusEvent>();\n @Output() clickChange = new EventEmitter<KeyboardEvent | PointerEvent | MouseEvent>();\n\n private clickSubject = new Subject<KeyboardEvent | PointerEvent | MouseEvent>();\n\n constructor() { }\n\n public ngAfterViewInit(): void {\n this.options = { ...defaultOptions, ...this.options };\n\n this.clickSubject\n .pipe(throttleTime(this.options.throttleTimeMs!))\n .subscribe(event => this.clickChange.emit(event));\n }\n\n public onClick(event: KeyboardEvent | PointerEvent | MouseEvent): void {\n this.clickSubject.next(event);\n }\n\n public onFocusChange(event: FocusEvent): void {\n this.focusChange.emit(event);\n }\n\n public handleKeydown(event: KeyboardEvent): void {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n\n this.onClick(event);\n }\n }\n\n}\n","<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Left side of button 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]=\"'Right side of button icon.'\"></apex-img>\n </div>\n }\n </div>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,cAAc,GAAsB;AACxC,IAAA,cAAc,EAAE,GAAG;CACpB;MAYY,mBAAmB,CAAA;AAc9B,IAAA,WAAA,GAAA;QAZS,IAAA,CAAA,IAAI,GAAkB,IAAI;QAC1B,IAAA,CAAA,KAAK,GAAe,IAAI;QAIxB,IAAA,CAAA,SAAS,GAAW,QAAQ;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAc;AAC5C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAA6C;AAE7E,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAA6C;IAE/D;IAET,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AAErD,QAAA,IAAI,CAAC;aACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,cAAe,CAAC;AAC/C,aAAA,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD;AAEO,IAAA,OAAO,CAAC,KAAgD,EAAA;AAC7D,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/B;AAEO,IAAA,aAAa,CAAC,KAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;IAC9B;AAEO,IAAA,aAAa,CAAC,KAAoB,EAAA;AACvC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YACpD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB;IACF;8GAtCW,mBAAmB,EAAA,IAAA,EAAA,EAAA,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,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BhC,m5BA6BA,EAAA,MAAA,EAAA,CAAA,g1CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDNI,YAAY,gRACZ,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIT,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EAGd;wBACP,YAAY;wBACZ;AACH,qBAAA,EAAA,QAAA,EAAA,m5BAAA,EAAA,MAAA,EAAA,CAAA,g1CAAA,CAAA,EAAA;;sBAKE;;sBACA;;sBAEA;;sBAEA;;sBAEA;;sBACA;;;AEtCH;;AAEG;;;;"}
package/fesm2022/apexara-ng-components-image.mjs CHANGED
@@ -78,12 +78,12 @@ class ApexImageComponent {
78
78
  this.destroy();
79
79
  this.init();
80
80
  }
81
- if (changeRecord['ariaLabel']) {
82
- this.setAriaLabel(changeRecord['ariaLabel'].currentValue);
81
+ if (changeRecord['alt']) {
82
+ this.setAlt(changeRecord['alt'].currentValue);
83
83
  }
84
84
  }
85
85
  init() {
86
- if (!this.src || !this.ariaLabel) {
86
+ if (!this.src || !this.alt) {
87
87
  return;
88
88
  }
89
89
  const img = this.imgService.loadImg(this.src);
@@ -107,7 +107,7 @@ class ApexImageComponent {
107
107
  this.setStyling(img);
108
108
  img.src = url;
109
109
  this.renderer.appendChild(elem, img);
110
- this.setAriaLabel(this.ariaLabel);
110
+ this.setAlt(this.alt);
111
111
  this.helper.loaded = true;
112
112
  this.copyNgContentAttribute(elem, img);
113
113
  }
@@ -121,21 +121,33 @@ class ApexImageComponent {
121
121
  elem.innerHTML = '';
122
122
  this.renderer.appendChild(elem, clonedSvg);
123
123
  this.helper.loaded = true;
124
- if (!(this.ariaLabel === undefined && elem.firstChild.hasAttribute('aria-label')) && this.ariaLabel) {
125
- this.setAriaLabel(this.ariaLabel);
124
+ if (!(this.alt === undefined && elem.firstChild.hasAttribute('aria-label')) && this.alt) {
125
+ this.setAlt(this.alt);
126
126
  }
127
127
  this.copyNgContentAttribute(elem, clonedSvg);
128
128
  }
129
- setAriaLabel(label) {
130
- const img = this.element.nativeElement.firstChild;
131
- if (img) {
132
- if (label === '') {
133
- this.renderer.setAttribute(img, 'aria-hidden', 'true');
134
- this.renderer.removeAttribute(img, 'aria-label');
129
+ setAlt(label) {
130
+ const child = this.element.nativeElement.firstChild;
131
+ if (!child) {
132
+ return;
133
+ }
134
+ const isImg = child instanceof HTMLImageElement;
135
+ if (label === '') {
136
+ this.renderer.setAttribute(child, 'aria-hidden', 'true');
137
+ if (isImg) {
138
+ this.renderer.setAttribute(child, 'alt', '');
139
+ }
140
+ else {
141
+ this.renderer.removeAttribute(child, 'aria-label');
142
+ }
143
+ }
144
+ else {
145
+ this.renderer.removeAttribute(child, 'aria-hidden');
146
+ if (isImg) {
147
+ this.renderer.setAttribute(child, 'alt', label);
135
148
  }
136
149
  else {
137
- this.renderer.removeAttribute(img, 'aria-hidden');
138
- this.renderer.setAttribute(img, 'aria-label', label);
150
+ this.renderer.setAttribute(child, 'aria-label', label);
139
151
  }
140
152
  }
141
153
  }
@@ -176,7 +188,7 @@ class ApexImageComponent {
176
188
  }
177
189
  }
178
190
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexImageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ApexImgService }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
179
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexImageComponent, isStandalone: true, selector: "apex-img", inputs: { src: "src", ariaLabel: "ariaLabel" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
191
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexImageComponent, isStandalone: true, selector: "apex-img", inputs: { src: "src", alt: "alt" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
180
192
  }
181
193
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexImageComponent, decorators: [{
182
194
  type: Component,
@@ -189,7 +201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
189
201
  args: [DOCUMENT]
190
202
  }] }, { type: i0.ChangeDetectorRef }], propDecorators: { src: [{
191
203
  type: Input
192
- }], ariaLabel: [{
204
+ }], alt: [{
193
205
  type: Input
194
206
  }] } });
195
207
 
package/fesm2022/apexara-ng-components-image.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-image.mjs","sources":["../../../../projects/apexara/ng-components/image/src/apex-img.service.ts","../../../../projects/apexara/ng-components/image/src/apex-img.component.ts","../../../../projects/apexara/ng-components/image/apexara-ng-components-image.ts"],"sourcesContent":["import { Inject, Injectable } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nimport { HttpClient } from '@angular/common/http';\n\nimport { Observable, of } from 'rxjs';\nimport { tap, finalize, share, map, catchError } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\n\nexport class ApexImgService {\n\n constructor(private http: HttpClient, @Inject(DOCUMENT) private document: Document) { }\n\n private svgs = new Map<string, SVGElement>();\n private svgsLoading = new Map<string, Observable<SVGElement>>();\n\n public defaultSvg = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\" fill=\"#2e3434\" fill-opacity=\"0.34902\"/></svg>'; \n\n public loadImg(url: string): Observable<SVGElement> | string {\n if (!url.endsWith('.svg')) {\n return url;\n }\n\n if (this.svgs.has(url)) {\n return of(this.svgs.get(url) as SVGElement);\n }\n\n if (this.svgsLoading.has(url)) {\n return this.svgsLoading.get(url) as Observable<SVGElement>;\n }\n\n const observable = this.getSvg(url)\n .pipe(\n catchError(() => { return of(this.defaultSvg); }),\n map(content => this.createSVG(content)),\n tap(element => this.svgs.set(url, element as SVGElement)),\n finalize(() => this.svgsLoading.delete(url)),\n share()\n );\n\n this.svgsLoading.set(url, observable);\n\n return observable;\n }\n\n private getSvg(url: string): Observable<string> {\n return this.http.get(url, { responseType: 'text' });\n }\n\n private createSVG(content: string): SVGElement {\n const div = this.document.createElement('DIV');\n\n div.innerHTML = content;\n\n return div.querySelector('svg') as SVGElement;\n }\n\n}\n","import { ChangeDetectorRef, Component, ElementRef, Inject, Input, Renderer2, SimpleChanges } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexImgService } from './apex-img.service';\n\nclass ImageHelper {\n loaded = false;\n imgSub?: Subscription;\n}\n\n@Component({\n selector: 'apex-img',\n template: '<ng-content></ng-content>',\n})\n\nexport class ApexImageComponent {\n\n constructor(\n private element: ElementRef,\n private renderer: Renderer2,\n private imgService: ApexImgService,\n @Inject(DOCUMENT) private document: Document,\n private changeDetectorRef: ChangeDetectorRef) {\n this.changeDetectorRef.detach();\n }\n\n @Input() src!: string;\n @Input() ariaLabel!: string;\n\n private helper = new ImageHelper();\n\n public ngOnInit(): void {\n this.init();\n }\n\n public ngOnDestroy(): void {\n this.destroy();\n }\n\n public ngOnChanges(changeRecord: SimpleChanges): void {\n if (!this.helper.loaded) {\n return;\n }\n\n if (changeRecord['src']) {\n this.destroy();\n\n this.init();\n }\n\n if (changeRecord['ariaLabel']) {\n this.setAriaLabel(changeRecord['ariaLabel'].currentValue);\n }\n }\n\n private init(): void {\n if (!this.src || !this.ariaLabel) {\n return;\n }\n\n const img = this.imgService.loadImg(this.src);\n\n if (typeof img === 'string') {\n this.initImage(img);\n\n return;\n }\n\n this.helper.imgSub = img.subscribe(img => { this.initSvg(img); });\n }\n\n private destroy(): void {\n if (this.helper.imgSub) {\n this.helper.imgSub.unsubscribe();\n }\n\n this.helper = new ImageHelper();\n }\n\n private initImage(url: string): void {\n const img = this.document.createElement('img');\n img.onerror = () => { this.onImgError(elem, img); };\n \n const elem = this.element.nativeElement;\n elem.innerHTML = '';\n\n this.setStyling(img);\n\n img.src = url;\n\n this.renderer.appendChild(elem, img);\n this.setAriaLabel(this.ariaLabel);\n \n this.helper.loaded = true;\n this.copyNgContentAttribute(elem, img);\n }\n\n private initSvg(svg: SVGElement): void {\n if (this.helper.loaded || !svg) {\n return;\n }\n\n const clonedSvg = svg.cloneNode(true) as SVGElement;\n\n this.setStyling(clonedSvg);\n\n const elem = this.element.nativeElement;\n elem.innerHTML = '';\n\n this.renderer.appendChild(elem, clonedSvg);\n this.helper.loaded = true;\n\n if (!(this.ariaLabel === undefined && elem.firstChild.hasAttribute('aria-label')) && this.ariaLabel) {\n this.setAriaLabel(this.ariaLabel);\n }\n\n this.copyNgContentAttribute(elem, clonedSvg);\n }\n\n private setAriaLabel(label: string): void {\n const img = this.element.nativeElement.firstChild;\n\n if (img) {\n if (label === '') {\n this.renderer.setAttribute(img, 'aria-hidden', 'true');\n this.renderer.removeAttribute(img, 'aria-label');\n } else {\n this.renderer.removeAttribute(img, 'aria-hidden');\n this.renderer.setAttribute(img, 'aria-label', label);\n }\n }\n }\n\n private setStyling(element: SVGElement | HTMLImageElement) {\n this.element.nativeElement.style.display = 'flex';\n this.element.nativeElement.style.justifyContent = 'center';\n this.element.nativeElement.style.alignItems = 'center';\n\n element.style.width = 'inherit';\n element.style.maxWidth = 'inherit';\n\n element.style.height = 'inherit';\n element.style.maxHeight = 'inherit';\n }\n\n private onImgError(element: any, img: HTMLImageElement): void {\n this.renderer.removeChild(element, img);\n\n let svg = document.createRange().createContextualFragment(this.imgService.defaultSvg);\n\n this.renderer.appendChild(element, svg);\n\n setTimeout(() => {\n this.renderer.setAttribute(element.firstChild, 'aria-label', 'A broken or missing image');\n });\n }\n\n private copyNgContentAttribute(hostElem: any, icon: SVGElement | HTMLImageElement) {\n const attributes = hostElem.attributes as NamedNodeMap;\n\n for (let i = 0; i < attributes.length; i += 1) {\n const attribute = attributes.item(i);\n \n if (attribute && attribute.name.startsWith('_ngcontent')) {\n this.setNgContentAttribute(icon, attribute.name);\n break;\n }\n }\n }\n\n private setNgContentAttribute(parent: Node, attributeName: string) {\n this.renderer.setAttribute(parent, attributeName, '');\n\n for (let i = 0; i < parent.childNodes.length; i += 1) {\n const child = parent.childNodes[i];\n\n if (child instanceof Element) {\n this.setNgContentAttribute(child, attributeName);\n }\n }\n }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"apexara-ng-components-image.mjs","sources":["../../../../projects/apexara/ng-components/image/src/apex-img.service.ts","../../../../projects/apexara/ng-components/image/src/apex-img.component.ts","../../../../projects/apexara/ng-components/image/apexara-ng-components-image.ts"],"sourcesContent":["import { Inject, Injectable } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nimport { HttpClient } from '@angular/common/http';\n\nimport { Observable, of } from 'rxjs';\nimport { tap, finalize, share, map, catchError } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\n\nexport class ApexImgService {\n\n constructor(private http: HttpClient, @Inject(DOCUMENT) private document: Document) { }\n\n private svgs = new Map<string, SVGElement>();\n private svgsLoading = new Map<string, Observable<SVGElement>>();\n\n public defaultSvg = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\" fill=\"#2e3434\" fill-opacity=\"0.34902\"/></svg>'; \n\n public loadImg(url: string): Observable<SVGElement> | string {\n if (!url.endsWith('.svg')) {\n return url;\n }\n\n if (this.svgs.has(url)) {\n return of(this.svgs.get(url) as SVGElement);\n }\n\n if (this.svgsLoading.has(url)) {\n return this.svgsLoading.get(url) as Observable<SVGElement>;\n }\n\n const observable = this.getSvg(url)\n .pipe(\n catchError(() => { return of(this.defaultSvg); }),\n map(content => this.createSVG(content)),\n tap(element => this.svgs.set(url, element as SVGElement)),\n finalize(() => this.svgsLoading.delete(url)),\n share()\n );\n\n this.svgsLoading.set(url, observable);\n\n return observable;\n }\n\n private getSvg(url: string): Observable<string> {\n return this.http.get(url, { responseType: 'text' });\n }\n\n private createSVG(content: string): SVGElement {\n const div = this.document.createElement('DIV');\n\n div.innerHTML = content;\n\n return div.querySelector('svg') as SVGElement;\n }\n\n}\n","import { ChangeDetectorRef, Component, ElementRef, Inject, Input, Renderer2, SimpleChanges } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexImgService } from './apex-img.service';\n\nclass ImageHelper {\n loaded = false;\n imgSub?: Subscription;\n}\n\n@Component({\n selector: 'apex-img',\n template: '<ng-content></ng-content>',\n})\n\nexport class ApexImageComponent {\n\n constructor(\n private element: ElementRef,\n private renderer: Renderer2,\n private imgService: ApexImgService,\n @Inject(DOCUMENT) private document: Document,\n private changeDetectorRef: ChangeDetectorRef) {\n this.changeDetectorRef.detach();\n }\n\n @Input() src!: string;\n @Input() alt!: string;\n\n private helper = new ImageHelper();\n\n public ngOnInit(): void {\n this.init();\n }\n\n public ngOnDestroy(): void {\n this.destroy();\n }\n\n public ngOnChanges(changeRecord: SimpleChanges): void {\n if (!this.helper.loaded) {\n return;\n }\n\n if (changeRecord['src']) {\n this.destroy();\n\n this.init();\n }\n\n if (changeRecord['alt']) {\n this.setAlt(changeRecord['alt'].currentValue);\n }\n }\n\n private init(): void {\n if (!this.src || !this.alt) {\n return;\n }\n\n const img = this.imgService.loadImg(this.src);\n\n if (typeof img === 'string') {\n this.initImage(img);\n\n return;\n }\n\n this.helper.imgSub = img.subscribe(img => { this.initSvg(img); });\n }\n\n private destroy(): void {\n if (this.helper.imgSub) {\n this.helper.imgSub.unsubscribe();\n }\n\n this.helper = new ImageHelper();\n }\n\n private initImage(url: string): void {\n const img = this.document.createElement('img');\n img.onerror = () => { this.onImgError(elem, img); };\n \n const elem = this.element.nativeElement;\n elem.innerHTML = '';\n\n this.setStyling(img);\n\n img.src = url;\n\n this.renderer.appendChild(elem, img);\n this.setAlt(this.alt);\n \n this.helper.loaded = true;\n this.copyNgContentAttribute(elem, img);\n }\n\n private initSvg(svg: SVGElement): void {\n if (this.helper.loaded || !svg) {\n return;\n }\n\n const clonedSvg = svg.cloneNode(true) as SVGElement;\n\n this.setStyling(clonedSvg);\n\n const elem = this.element.nativeElement;\n elem.innerHTML = '';\n\n this.renderer.appendChild(elem, clonedSvg);\n this.helper.loaded = true;\n\n if (!(this.alt === undefined && elem.firstChild.hasAttribute('aria-label')) && this.alt) {\n this.setAlt(this.alt);\n }\n\n this.copyNgContentAttribute(elem, clonedSvg);\n }\n\n private setAlt(label: string): void {\n const child = this.element.nativeElement.firstChild;\n\n if (!child) {\n return;\n }\n\n const isImg = child instanceof HTMLImageElement;\n\n if (label === '') {\n this.renderer.setAttribute(child, 'aria-hidden', 'true');\n\n if (isImg) {\n this.renderer.setAttribute(child, 'alt', '');\n } else {\n this.renderer.removeAttribute(child, 'aria-label');\n }\n } else {\n this.renderer.removeAttribute(child, 'aria-hidden');\n\n if (isImg) {\n this.renderer.setAttribute(child, 'alt', label);\n } else {\n this.renderer.setAttribute(child, 'aria-label', label);\n }\n }\n }\n\n private setStyling(element: SVGElement | HTMLImageElement) {\n this.element.nativeElement.style.display = 'flex';\n this.element.nativeElement.style.justifyContent = 'center';\n this.element.nativeElement.style.alignItems = 'center';\n\n element.style.width = 'inherit';\n element.style.maxWidth = 'inherit';\n\n element.style.height = 'inherit';\n element.style.maxHeight = 'inherit';\n }\n\n private onImgError(element: any, img: HTMLImageElement): void {\n this.renderer.removeChild(element, img);\n\n let svg = document.createRange().createContextualFragment(this.imgService.defaultSvg);\n\n this.renderer.appendChild(element, svg);\n\n setTimeout(() => {\n this.renderer.setAttribute(element.firstChild, 'aria-label', 'A broken or missing image');\n });\n }\n\n private copyNgContentAttribute(hostElem: any, icon: SVGElement | HTMLImageElement) {\n const attributes = hostElem.attributes as NamedNodeMap;\n\n for (let i = 0; i < attributes.length; i += 1) {\n const attribute = attributes.item(i);\n \n if (attribute && attribute.name.startsWith('_ngcontent')) {\n this.setNgContentAttribute(icon, attribute.name);\n break;\n }\n }\n }\n\n private setNgContentAttribute(parent: Node, attributeName: string) {\n this.renderer.setAttribute(parent, attributeName, '');\n\n for (let i = 0; i < parent.childNodes.length; i += 1) {\n const child = parent.childNodes[i];\n\n if (child instanceof Element) {\n this.setNgContentAttribute(child, attributeName);\n }\n }\n }\n\n}\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-input.mjs CHANGED
@@ -94,7 +94,7 @@ class ApexInputComponent {
94
94
  }
95
95
  }
96
96
  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 }); }
97
- 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\" [ariaLabel]=\"'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()\" [ariaLabel]=\"'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", "ariaLabel"] }, { 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"] }] }); }
97
+ 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"] }] }); }
98
98
  }
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, decorators: [{
100
100
  type: Component,
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
107
107
  ReactiveFormsModule,
108
108
  ApexTooltipDirective,
109
109
  ApexTooltipDirective
110
- ], 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\" [ariaLabel]=\"'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()\" [ariaLabel]=\"'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"] }]
110
+ ], 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"] }]
111
111
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
112
112
  type: Input
113
113
  }], inputChange: [{
package/fesm2022/apexara-ng-components-input.mjs.map CHANGED
@@ -1 +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\" [ariaLabel]=\"'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()\" [ariaLabel]=\"'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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"}
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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"}
package/fesm2022/apexara-ng-components-select.mjs CHANGED
@@ -574,7 +574,7 @@ class ApexSelectComponent {
574
574
  this.scrollBlockersAttached = false;
575
575
  }
576
576
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, deps: [{ token: i1.OSService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
577
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\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 <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></apex-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </apex-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "ariaLabel"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
577
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\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 <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </apex-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
578
578
  }
579
579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, decorators: [{
580
580
  type: Component,
@@ -588,7 +588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
588
588
  ApexTooltipDirective,
589
589
  ReactiveFormsModule,
590
590
  ApexCheckboxComponent,
591
- ], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\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 <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></apex-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </apex-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
591
+ ], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\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 <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </apex-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
592
592
  }], ctorParameters: () => [{ type: i1.OSService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
593
593
  type: ViewChild,
594
594
  args: ['input']