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

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 (44) hide show
  1. package/README.md +298 -25
  2. package/fesm2022/apexara-ng-components-checkbox.mjs +53 -11
  3. package/fesm2022/apexara-ng-components-checkbox.mjs.map +1 -1
  4. package/fesm2022/apexara-ng-components-chip.mjs +5 -2
  5. package/fesm2022/apexara-ng-components-chip.mjs.map +1 -1
  6. package/fesm2022/apexara-ng-components-datepicker.mjs +65 -70
  7. package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
  8. package/fesm2022/apexara-ng-components-dialog.mjs +2 -2
  9. package/fesm2022/apexara-ng-components-dialog.mjs.map +1 -1
  10. package/fesm2022/apexara-ng-components-drawer.mjs +12 -22
  11. package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
  12. package/fesm2022/apexara-ng-components-expander.mjs +3 -15
  13. package/fesm2022/apexara-ng-components-expander.mjs.map +1 -1
  14. package/fesm2022/apexara-ng-components-image.mjs +3 -5
  15. package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
  16. package/fesm2022/apexara-ng-components-input.mjs +19 -19
  17. package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
  18. package/fesm2022/apexara-ng-components-listbox.mjs +41 -33
  19. package/fesm2022/apexara-ng-components-listbox.mjs.map +1 -1
  20. package/fesm2022/apexara-ng-components-more-options.mjs +132 -0
  21. package/fesm2022/apexara-ng-components-more-options.mjs.map +1 -0
  22. package/fesm2022/apexara-ng-components-radiobutton.mjs +2 -2
  23. package/fesm2022/apexara-ng-components-radiobutton.mjs.map +1 -1
  24. package/fesm2022/apexara-ng-components-select.mjs +96 -79
  25. package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
  26. package/fesm2022/apexara-ng-components-snackbar.mjs +2 -44
  27. package/fesm2022/apexara-ng-components-snackbar.mjs.map +1 -1
  28. package/fesm2022/apexara-ng-components-table.mjs +175 -102
  29. package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
  30. package/fesm2022/apexara-ng-components-textarea.mjs +20 -17
  31. package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
  32. package/package.json +5 -2
  33. package/types/apexara-ng-components-checkbox.d.ts +17 -8
  34. package/types/apexara-ng-components-chip.d.ts +7 -1
  35. package/types/apexara-ng-components-datepicker.d.ts +4 -6
  36. package/types/apexara-ng-components-drawer.d.ts +3 -4
  37. package/types/apexara-ng-components-image.d.ts +2 -3
  38. package/types/apexara-ng-components-input.d.ts +6 -8
  39. package/types/apexara-ng-components-listbox.d.ts +7 -8
  40. package/types/apexara-ng-components-more-options.d.ts +34 -0
  41. package/types/apexara-ng-components-select.d.ts +13 -10
  42. package/types/apexara-ng-components-snackbar.d.ts +0 -3
  43. package/types/apexara-ng-components-table.d.ts +46 -23
  44. package/types/apexara-ng-components-textarea.d.ts +6 -8
package/fesm2022/apexara-ng-components-dialog.mjs CHANGED
@@ -29,13 +29,13 @@ class ApexDialogComponent {
29
29
  }
30
30
  }
31
31
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDialogComponent, deps: [{ token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
32
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDialogComponent, isStandalone: true, selector: "apex-dialog", inputs: { closeIcon: "closeIcon" }, outputs: { closeIconClick: "closeIconClick" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "closeIconTemplate", first: true, predicate: ["closeIcon"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
32
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDialogComponent, isStandalone: true, selector: "apex-dialog", inputs: { closeIcon: "closeIcon" }, outputs: { closeIconClick: "closeIconClick" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "closeIconTemplate", first: true, predicate: ["closeIcon"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
33
33
  }
34
34
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDialogComponent, decorators: [{
35
35
  type: Component,
36
36
  args: [{ selector: 'apex-dialog', imports: [
37
37
  NgTemplateOutlet,
38
- ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"] }]
38
+ ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--apex-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--apex-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--apex-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-dialog-close-icon-hover-color, #000000)}.title{color:var(--apex-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--apex-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"] }]
39
39
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OverlayService }], propDecorators: { title: [{
40
40
  type: ContentChild,
41
41
  args: ['title']
package/fesm2022/apexara-ng-components-dialog.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-dialog.mjs","sources":["../../../../projects/apexara/ng-components/dialog/src/dialog.component.ts","../../../../projects/apexara/ng-components/dialog/src/dialog.component.html","../../../../projects/apexara/ng-components/dialog/apexara-ng-components-dialog.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nimport { OverlayService } from '@apexara/ng-components/services';\n\n@Component({\n selector: 'apex-dialog',\n templateUrl: './dialog.component.html',\n styleUrls: ['./dialog.component.css'],\n imports: [\n NgTemplateOutlet,\n ],\n})\n\nexport class ApexDialogComponent implements OnDestroy {\n\n constructor(\n private elementRef: ElementRef,\n private overlayService: OverlayService) {\n }\n\n @ContentChild('title') title?: TemplateRef<any>;\n @ContentChild('description') description?: TemplateRef<any>;\n @ContentChild('content') content?: TemplateRef<any>;\n @ContentChild('actions') actions?: TemplateRef<any>;\n\n @ViewChild('closeIcon') closeIconTemplate?: ElementRef;\n\n @Input() closeIcon: boolean = false;\n\n @Output() closeIconClick = new EventEmitter<void>();\n\n public ngAfterViewInit(): void {\n this.overlayService.appendToOverlay(this.elementRef.nativeElement, true);\n }\n\n public ngOnDestroy(): void {\n this.overlayService.removeFromOverlay(this.elementRef.nativeElement);\n }\n\n public onCloseIconClick(): void {\n this.closeIconClick.emit();\n }\n\n public handleKeydown(event: KeyboardEvent): void {\n if (!(document.activeElement === this.closeIconTemplate?.nativeElement)) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.closeIconClick.emit();\n }\n }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"apexara-ng-components-dialog.mjs","sources":["../../../../projects/apexara/ng-components/dialog/src/dialog.component.ts","../../../../projects/apexara/ng-components/dialog/src/dialog.component.html","../../../../projects/apexara/ng-components/dialog/apexara-ng-components-dialog.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nimport { OverlayService } from '@apexara/ng-components/services';\n\n@Component({\n selector: 'apex-dialog',\n templateUrl: './dialog.component.html',\n styleUrls: ['./dialog.component.css'],\n imports: [\n NgTemplateOutlet,\n ],\n})\n\nexport class ApexDialogComponent implements OnDestroy {\n\n constructor(\n private elementRef: ElementRef,\n private overlayService: OverlayService) {\n }\n\n @ContentChild('title') title?: TemplateRef<any>;\n @ContentChild('description') description?: TemplateRef<any>;\n @ContentChild('content') content?: TemplateRef<any>;\n @ContentChild('actions') actions?: TemplateRef<any>;\n\n @ViewChild('closeIcon') closeIconTemplate?: ElementRef;\n\n @Input() closeIcon: boolean = false;\n\n @Output() closeIconClick = new EventEmitter<void>();\n\n public ngAfterViewInit(): void {\n this.overlayService.appendToOverlay(this.elementRef.nativeElement, true);\n }\n\n public ngOnDestroy(): void {\n this.overlayService.removeFromOverlay(this.elementRef.nativeElement);\n }\n\n public onCloseIconClick(): void {\n this.closeIconClick.emit();\n }\n\n public handleKeydown(event: KeyboardEvent): void {\n if (!(document.activeElement === this.closeIconTemplate?.nativeElement)) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.closeIconClick.emit();\n }\n }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/apexara-ng-components-drawer.mjs CHANGED
@@ -1,23 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, ContentChild, Output, Component } from '@angular/core';
2
+ import { signal, EventEmitter, ContentChild, Output, Component } from '@angular/core';
3
3
  import { NgTemplateOutlet } from '@angular/common';
4
- import { trigger, state, style, transition, animate } from '@angular/animations';
5
4
  import * as i1 from '@apexara/ng-components/services';
6
5
 
7
- const OpenCloseAnimation = trigger('openCloseAnimation', [
8
- state('true', style({
9
- transform: 'translateX(0%)',
10
- })),
11
- state('false', style({
12
- transform: 'translateX(100%)',
13
- })),
14
- transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
15
- ]);
16
6
  class ApexDrawerComponent {
17
- constructor(scrollBlockService, changeDetector) {
7
+ constructor(scrollBlockService) {
18
8
  this.scrollBlockService = scrollBlockService;
19
- this.changeDetector = changeDetector;
20
- this.isOpen = false;
9
+ this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
21
10
  this.closeChange = new EventEmitter();
22
11
  this.scrollBlockService.activate();
23
12
  }
@@ -25,27 +14,28 @@ class ApexDrawerComponent {
25
14
  this.scrollBlockService.deactivate();
26
15
  }
27
16
  ngAfterViewInit() {
28
- this.isOpen = true;
29
- this.changeDetector.detectChanges();
17
+ requestAnimationFrame(() => {
18
+ this.isOpen.set(true);
19
+ });
30
20
  }
31
21
  close() {
32
22
  if (!this.closeChange) {
33
23
  return;
34
24
  }
35
- this.isOpen = false;
25
+ this.isOpen.set(false);
36
26
  setTimeout(() => {
37
27
  this.closeChange.emit();
38
28
  }, 250);
39
29
  }
40
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDrawerComponent, deps: [{ token: i1.ScrollBlockService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
41
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDrawerComponent, isStandalone: true, selector: "apex-drawer", outputs: { closeChange: "closeChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [OpenCloseAnimation] }); }
30
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDrawerComponent, deps: [{ token: i1.ScrollBlockService }], target: i0.ɵɵFactoryTarget.Component }); }
31
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDrawerComponent, isStandalone: true, selector: "apex-drawer", outputs: { closeChange: "closeChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [class.open]=\"isOpen()\">\n <div class=\"close-icon\" tabindex=\"0\" (click)=\"close()\" (keydown.enter)=\"close()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;position:relative;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.1,1)}.container.open{transform:translate(0)}.close-icon{width:20px;height:20px;position:absolute;top:16px;right:16px;cursor:pointer}.close-icon svg path{stroke:var(--apex-drawer-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-drawer-close-icon-hover-color, #000000)}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
42
32
  }
43
33
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDrawerComponent, decorators: [{
44
34
  type: Component,
45
- args: [{ selector: 'apex-drawer', animations: [OpenCloseAnimation], imports: [
35
+ args: [{ selector: 'apex-drawer', imports: [
46
36
  NgTemplateOutlet,
47
- ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"] }]
48
- }], ctorParameters: () => [{ type: i1.ScrollBlockService }, { type: i0.ChangeDetectorRef }], propDecorators: { closeChange: [{
37
+ ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [class.open]=\"isOpen()\">\n <div class=\"close-icon\" tabindex=\"0\" (click)=\"close()\" (keydown.enter)=\"close()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--apex-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--apex-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;position:relative;background-color:var(--apex-drawer-background, #FFFFFF);box-shadow:var(--apex-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.1,1)}.container.open{transform:translate(0)}.close-icon{width:20px;height:20px;position:absolute;top:16px;right:16px;cursor:pointer}.close-icon svg path{stroke:var(--apex-drawer-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--apex-drawer-close-icon-hover-color, #000000)}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--apex-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--apex-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"] }]
38
+ }], ctorParameters: () => [{ type: i1.ScrollBlockService }], propDecorators: { closeChange: [{
49
39
  type: Output
50
40
  }], title: [{
51
41
  type: ContentChild,
package/fesm2022/apexara-ng-components-drawer.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-drawer.mjs","sources":["../../../../projects/apexara/ng-components/drawer/src/drawer.component.ts","../../../../projects/apexara/ng-components/drawer/src/drawer.component.html","../../../../projects/apexara/ng-components/drawer/apexara-ng-components-drawer.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, EventEmitter, Output, AfterViewInit, ChangeDetectorRef } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\nimport { ScrollBlockService } from '@apexara/ng-components/services';\n\nconst OpenCloseAnimation = trigger('openCloseAnimation', [\n state('true', style({\n transform: 'translateX(0%)',\n }),\n ),\n state('false', style({\n transform: 'translateX(100%)',\n }),\n ),\n transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),\n]);\n\n@Component({\n selector: 'apex-drawer',\n templateUrl: './drawer.component.html',\n styleUrls: ['./drawer.component.css'],\n animations: [OpenCloseAnimation],\n imports: [\n NgTemplateOutlet,\n ],\n})\n\nexport class ApexDrawerComponent implements AfterViewInit, OnDestroy {\n\n constructor(\n private scrollBlockService: ScrollBlockService,\n private changeDetector: ChangeDetectorRef) {\n\n this.scrollBlockService.activate();\n }\n\n public isOpen = false;\n\n @Output() closeChange = new EventEmitter<void>();\n\n @ContentChild('title') title?: TemplateRef<any>;\n @ContentChild('description') description?: TemplateRef<any>;\n @ContentChild('content') content?: TemplateRef<any>;\n @ContentChild('actions') actions?: TemplateRef<any>;\n\n public ngOnDestroy(): void {\n this.scrollBlockService.deactivate();\n }\n\n public ngAfterViewInit(): void {\n this.isOpen = true;\n\n this.changeDetector.detectChanges();\n }\n\n public close(): void {\n if (!this.closeChange) {\n return;\n }\n\n this.isOpen = false;\n\n setTimeout(() => {\n this.closeChange.emit();\n }, 250);\n }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,EAAE;AACvD,IAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAChB,QAAA,SAAS,EAAE,gBAAgB;AAC5B,KAAA,CAAC,CACH;AACD,IAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;AACjB,QAAA,SAAS,EAAE,kBAAkB;AAC9B,KAAA,CAAC,CACH;AACD,IAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAC5E,CAAA,CAAC;MAYW,mBAAmB,CAAA;IAE9B,WAAA,CACU,kBAAsC,EACtC,cAAiC,EAAA;QADjC,IAAA,CAAA,kBAAkB,GAAlB,kBAAkB;QAClB,IAAA,CAAA,cAAc,GAAd,cAAc;QAKjB,IAAA,CAAA,MAAM,GAAG,KAAK;AAEX,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAL9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;IACpC;IAWO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE;IACtC;IAEO,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAElB,QAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;IACrC;IAEO,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QAEnB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB,CAAC,EAAE,GAAG,CAAC;IACT;8GAtCW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,mdC5BhC,i7BA+BA,EAAA,MAAA,EAAA,CAAA,u0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDPI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAFN,CAAC,kBAAkB,CAAC,EAAA,CAAA,CAAA;;2FAMrB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EAGX,CAAC,kBAAkB,CAAC,EAAA,OAAA,EACvB;wBACP,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,i7BAAA,EAAA,MAAA,EAAA,CAAA,u0BAAA,CAAA,EAAA;;sBAcA;;sBAEA,YAAY;uBAAC,OAAO;;sBACpB,YAAY;uBAAC,aAAa;;sBAC1B,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,SAAS;;;AE5CzB;;AAEG;;;;"}
1
+ {"version":3,"file":"apexara-ng-components-drawer.mjs","sources":["../../../../projects/apexara/ng-components/drawer/src/drawer.component.ts","../../../../projects/apexara/ng-components/drawer/src/drawer.component.html","../../../../projects/apexara/ng-components/drawer/apexara-ng-components-drawer.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, EventEmitter, Output, AfterViewInit, signal } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nimport { ScrollBlockService } from '@apexara/ng-components/services';\n\n@Component({\n selector: 'apex-drawer',\n templateUrl: './drawer.component.html',\n styleUrls: ['./drawer.component.css'],\n imports: [\n NgTemplateOutlet,\n ],\n})\n\nexport class ApexDrawerComponent implements AfterViewInit, OnDestroy {\n\n constructor(\n private scrollBlockService: ScrollBlockService) {\n\n this.scrollBlockService.activate();\n }\n\n public isOpen = signal(false);\n\n @Output() closeChange = new EventEmitter<void>();\n\n @ContentChild('title') title?: TemplateRef<any>;\n @ContentChild('description') description?: TemplateRef<any>;\n @ContentChild('content') content?: TemplateRef<any>;\n @ContentChild('actions') actions?: TemplateRef<any>;\n\n public ngOnDestroy(): void {\n this.scrollBlockService.deactivate();\n }\n\n public ngAfterViewInit(): void {\n requestAnimationFrame(() => {\n this.isOpen.set(true);\n });\n }\n\n public close(): void {\n if (!this.closeChange) {\n return;\n }\n\n this.isOpen.set(false);\n\n setTimeout(() => {\n this.closeChange.emit();\n }, 250);\n }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [class.open]=\"isOpen()\">\n <div class=\"close-icon\" tabindex=\"0\" (click)=\"close()\" (keydown.enter)=\"close()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAca,mBAAmB,CAAA;AAE9B,IAAA,WAAA,CACU,kBAAsC,EAAA;QAAtC,IAAA,CAAA,kBAAkB,GAAlB,kBAAkB;AAKrB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,KAAK,kDAAC;AAEnB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAL9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;IACpC;IAWO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE;IACtC;IAEO,eAAe,GAAA;QACpB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,QAAA,CAAC,CAAC;IACJ;IAEO,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;QAEtB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB,CAAC,EAAE,GAAG,CAAC;IACT;8GArCW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdhC,oyCAqCA,EAAA,MAAA,EAAA,CAAA,ksCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIP,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAT/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EAGd;wBACP,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,oyCAAA,EAAA,MAAA,EAAA,CAAA,ksCAAA,CAAA,EAAA;;sBAaA;;sBAEA,YAAY;uBAAC,OAAO;;sBACpB,YAAY;uBAAC,aAAa;;sBAC1B,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,SAAS;;;AE7BzB;;AAEG;;;;"}
package/fesm2022/apexara-ng-components-expander.mjs CHANGED
@@ -1,32 +1,20 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Input, Component } from '@angular/core';
3
3
  import { NgClass } from '@angular/common';
4
- import { trigger, state, style, transition, animate } from '@angular/animations';
5
4
 
6
- const OpenCloseAnimation = trigger('openCloseAnimation', [
7
- state('true', style({
8
- height: '{{ height }}',
9
- paddingBottom: '20px',
10
- }), { params: { height: '*' } }),
11
- state('false', style({
12
- height: '0px',
13
- paddingBottom: '0px',
14
- })),
15
- transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
16
- ]);
17
5
  class ApexExpanderComponent {
18
6
  constructor() {
19
7
  this.isOpen = false;
20
8
  this.maxHeight = null;
21
9
  }
22
10
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
23
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexExpanderComponent, isStandalone: true, selector: "apex-expander", inputs: { isOpen: "isOpen", maxHeight: "maxHeight" }, ngImport: i0, template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [OpenCloseAnimation] }); }
11
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexExpanderComponent, isStandalone: true, selector: "apex-expander", inputs: { isOpen: "isOpen", maxHeight: "maxHeight" }, ngImport: i0, template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content-wrapper\">\n <div class=\"content\" [style.max-height]=\"maxHeight ? maxHeight + 'px' : 'none'\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.1,1),padding-bottom .25s cubic-bezier(.4,0,.1,1);padding-bottom:0}.container.open .content-wrapper{grid-template-rows:1fr;padding-bottom:20px}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px;min-height:0}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
24
12
  }
25
13
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexExpanderComponent, decorators: [{
26
14
  type: Component,
27
- args: [{ selector: 'apex-expander', animations: [OpenCloseAnimation], imports: [
15
+ args: [{ selector: 'apex-expander', imports: [
28
16
  NgClass,
29
- ], template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"] }]
17
+ ], template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content-wrapper\">\n <div class=\"content\" [style.max-height]=\"maxHeight ? maxHeight + 'px' : 'none'\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--apex-expander-background-color, #FFFFFF);border-radius:8px;border:var(--apex-expander-border, 0px);box-shadow:var(--apex-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--apex-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--apex-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--apex-expander-chevron-color, #5D6068);border-left:2px solid var(--apex-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--apex-expander-chevron-open-color, #F96138);border-left:2px solid var(--apex-expander-chevron-open-color, #F96138)}.content-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.1,1),padding-bottom .25s cubic-bezier(.4,0,.1,1);padding-bottom:0}.container.open .content-wrapper{grid-template-rows:1fr;padding-bottom:20px}.content{overflow:hidden;font-size:15px;color:var(--apex-expander-content-color, #5D6068);padding-left:30px;padding-right:30px;min-height:0}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"] }]
30
18
  }], propDecorators: { isOpen: [{
31
19
  type: Input
32
20
  }], maxHeight: [{
package/fesm2022/apexara-ng-components-expander.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-expander.mjs","sources":["../../../../projects/apexara/ng-components/expander/src/expander.component.ts","../../../../projects/apexara/ng-components/expander/src/expander.component.html","../../../../projects/apexara/ng-components/expander/apexara-ng-components-expander.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\nconst OpenCloseAnimation = trigger('openCloseAnimation', [\n state('true', style({\n height: '{{ height }}',\n paddingBottom: '20px',\n }),\n { params: { height: '*' }},\n ),\n state('false', style({\n height: '0px',\n paddingBottom: '0px',\n }),\n ),\n transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),\n]);\n\n@Component({\n selector: 'apex-expander',\n templateUrl: './expander.component.html',\n styleUrls: ['./expander.component.css'],\n animations: [OpenCloseAnimation],\n imports: [\n NgClass,\n ],\n})\n\nexport class ApexExpanderComponent {\n\n @Input() isOpen = false;\n @Input() maxHeight: number | null = null;\n\n}\n","<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA,MAAM,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,EAAE;AACvD,IAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAChB,QAAA,MAAM,EAAE,cAAc;AACtB,QAAA,aAAa,EAAE,MAAM;KACtB,CAAC,EACF,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAC,CAC3B;AACD,IAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,aAAa,EAAE,KAAK;AACrB,KAAA,CAAC,CACH;AACD,IAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAC5E,CAAA,CAAC;MAYW,qBAAqB,CAAA;AAVlC,IAAA,WAAA,GAAA;QAYW,IAAA,CAAA,MAAM,GAAG,KAAK;QACd,IAAA,CAAA,SAAS,GAAkB,IAAI;AAEzC,IAAA;8GALY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,+HC7BlC,4hBAaA,EAAA,MAAA,EAAA,CAAA,64CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDYI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAFG,CAAC,kBAAkB,CAAC,EAAA,CAAA,CAAA;;2FAMrB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAVjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EAGb,CAAC,kBAAkB,CAAC,EAAA,OAAA,EACvB;wBACP,OAAO;AACR,qBAAA,EAAA,QAAA,EAAA,4hBAAA,EAAA,MAAA,EAAA,CAAA,64CAAA,CAAA,EAAA;;sBAKA;;sBACA;;;AEhCH;;AAEG;;;;"}
1
+ {"version":3,"file":"apexara-ng-components-expander.mjs","sources":["../../../../projects/apexara/ng-components/expander/src/expander.component.ts","../../../../projects/apexara/ng-components/expander/src/expander.component.html","../../../../projects/apexara/ng-components/expander/apexara-ng-components-expander.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n@Component({\n selector: 'apex-expander',\n templateUrl: './expander.component.html',\n styleUrls: ['./expander.component.css'],\n imports: [\n NgClass,\n ],\n})\n\nexport class ApexExpanderComponent {\n\n @Input() isOpen = false;\n @Input() maxHeight: number | null = null;\n\n}\n","<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content-wrapper\">\n <div class=\"content\" [style.max-height]=\"maxHeight ? maxHeight + 'px' : 'none'\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,qBAAqB,CAAA;AATlC,IAAA,WAAA,GAAA;QAWW,IAAA,CAAA,MAAM,GAAG,KAAK;QACd,IAAA,CAAA,SAAS,GAAkB,IAAI;AAEzC,IAAA;8GALY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZlC,mjBAeA,EAAA,MAAA,EAAA,CAAA,mpDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDPI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIE,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,OAAA,EAGhB;wBACP,OAAO;AACR,qBAAA,EAAA,QAAA,EAAA,mjBAAA,EAAA,MAAA,EAAA,CAAA,mpDAAA,CAAA,EAAA;;sBAKA;;sBACA;;;AEfH;;AAEG;;;;"}
package/fesm2022/apexara-ng-components-image.mjs CHANGED
@@ -55,14 +55,12 @@ class ImageHelper {
55
55
  }
56
56
  }
57
57
  class ApexImageComponent {
58
- constructor(element, renderer, imgService, document, changeDetectorRef) {
58
+ constructor(element, renderer, imgService, document) {
59
59
  this.element = element;
60
60
  this.renderer = renderer;
61
61
  this.imgService = imgService;
62
62
  this.document = document;
63
- this.changeDetectorRef = changeDetectorRef;
64
63
  this.helper = new ImageHelper();
65
- this.changeDetectorRef.detach();
66
64
  }
67
65
  ngOnInit() {
68
66
  this.init();
@@ -187,7 +185,7 @@ class ApexImageComponent {
187
185
  }
188
186
  }
189
187
  }
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 }); }
188
+ 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 }], target: i0.ɵɵFactoryTarget.Component }); }
191
189
  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 }); }
192
190
  }
193
191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexImageComponent, decorators: [{
@@ -199,7 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
199
197
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ApexImgService }, { type: Document, decorators: [{
200
198
  type: Inject,
201
199
  args: [DOCUMENT]
202
- }] }, { type: i0.ChangeDetectorRef }], propDecorators: { src: [{
200
+ }] }], propDecorators: { src: [{
203
201
  type: Input
204
202
  }], alt: [{
205
203
  type: Input
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() 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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"}
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 { 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 }\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
@@ -1,26 +1,25 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, HostListener, Output, Input, Component } from '@angular/core';
2
+ import { EventEmitter, signal, HostListener, Output, Input, Component } from '@angular/core';
3
3
  import { NgClass, NgTemplateOutlet } from '@angular/common';
4
4
  import { RouterLink } from '@angular/router';
5
5
  import * as i1 from '@angular/forms';
6
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6
+ import { TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
+ import { filter } from 'rxjs';
7
8
  import { ApexImageComponent } from '@apexara/ng-components/image';
8
9
  import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
9
10
 
10
11
  class ApexInputComponent {
11
- constructor(changeDetectorRef) {
12
- this.changeDetectorRef = changeDetectorRef;
12
+ constructor() {
13
13
  this.inputChange = new EventEmitter();
14
14
  this.suffixImgChange = new EventEmitter();
15
15
  this.helperTextChange = new EventEmitter();
16
- this.controlInvalid = false;
16
+ this.label = signal('', ...(ngDevMode ? [{ debugName: "label" }] : []));
17
+ this.controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : []));
17
18
  this.tooltipPosition = TooltipPosition;
18
19
  this.control = null;
19
- this.changeDetectorRef.detach();
20
20
  }
21
21
  ngOnInit() {
22
22
  this.setControl();
23
- this.changeDetectorRef.detectChanges();
24
23
  }
25
24
  ngOnDestroy() {
26
25
  if (this.controlSubscription) {
@@ -32,15 +31,12 @@ class ApexInputComponent {
32
31
  const sanitizedValue = input.value.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|[\uD83C-\uDBFF\uDC00-\uDFFF])/g, '');
33
32
  input.value = sanitizedValue;
34
33
  this.inputChange.emit(sanitizedValue);
35
- this.changeDetectorRef.detectChanges();
36
34
  }
37
35
  onSuffixImage() {
38
36
  this.suffixImgChange.emit();
39
- this.changeDetectorRef.detectChanges();
40
37
  }
41
38
  onHelperText() {
42
39
  this.helperTextChange.emit();
43
- this.changeDetectorRef.detectChanges();
44
40
  }
45
41
  onFocusOut() {
46
42
  this.initChange();
@@ -61,6 +57,11 @@ class ApexInputComponent {
61
57
  this.controlSubscription = this.control.statusChanges.subscribe(() => {
62
58
  this.initChange();
63
59
  });
60
+ this.controlSubscription.add(this.control.events
61
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
62
+ .subscribe(() => {
63
+ this.initChange();
64
+ }));
64
65
  }
65
66
  initChange() {
66
67
  if (!this.control) {
@@ -68,10 +69,9 @@ class ApexInputComponent {
68
69
  }
69
70
  this.checkIfControlInvalid(this.control);
70
71
  this.getLabel();
71
- this.changeDetectorRef.detectChanges();
72
72
  }
73
73
  checkIfControlInvalid(control) {
74
- this.controlInvalid = control.touched && control.invalid;
74
+ this.controlInvalid.set(control.touched && control.invalid);
75
75
  }
76
76
  checkIfControlDisabled(control) {
77
77
  if (control.disabled || this.options.disabled) {
@@ -80,21 +80,21 @@ class ApexInputComponent {
80
80
  }
81
81
  }
82
82
  getLabel() {
83
- this.label = '';
83
+ this.label.set('');
84
84
  const options = this.options;
85
85
  const formGroup = options.formGroup;
86
86
  const formControlName = options.formControlName;
87
- if (formGroup && formControlName && options.errors && this.controlInvalid) {
87
+ if (formGroup && formControlName && options.errors && this.controlInvalid()) {
88
88
  for (const error in options.errors) {
89
89
  if (formGroup.controls[formControlName].hasError(error)) {
90
- this.label = options.errors[error];
90
+ this.label.set(options.errors[error]);
91
91
  return;
92
92
  }
93
93
  }
94
94
  }
95
95
  }
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\" [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"] }] }); }
96
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, deps: [], 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\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n\n @if (options.helperText) {\n <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n }\n </div>\n }\n\n @if (!options.formGroup) {\n <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n </div>\n } @else {\n <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n @if (options.formControlName) {\n <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n }\n\n <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n </div>\n\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n {{ label() }}\n </div>\n }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n @if (prefixImg) {\n <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n @if (suffixImg) {\n <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
98
98
  }
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, decorators: [{
100
100
  type: Component,
@@ -107,8 +107,8 @@ 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\" [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
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
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\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n\n @if (options.helperText) {\n <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n }\n </div>\n }\n\n @if (!options.formGroup) {\n <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n </div>\n } @else {\n <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n @if (options.formControlName) {\n <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n }\n\n <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n </div>\n\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n {{ label() }}\n </div>\n }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n @if (prefixImg) {\n <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n @if (suffixImg) {\n <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
111
+ }], propDecorators: { options: [{
112
112
  type: Input
113
113
  }], inputChange: [{
114
114
  type: Output