@apexara/ng-components 1.0.6-test.7 → 1.0.7
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.
- package/README.md +35 -0
- package/fesm2022/apexara-ng-components-button.mjs +15 -3
- package/fesm2022/apexara-ng-components-button.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-chip.mjs +1 -1
- package/fesm2022/apexara-ng-components-chip.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-datepicker.mjs +1 -1
- package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-dialog.mjs +26 -3
- package/fesm2022/apexara-ng-components-dialog.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-drawer.mjs +26 -7
- package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-expander.mjs +5 -2
- package/fesm2022/apexara-ng-components-expander.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-filter-pill.mjs +58 -0
- package/fesm2022/apexara-ng-components-filter-pill.mjs.map +1 -0
- package/fesm2022/apexara-ng-components-image.mjs +15 -5
- package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-input.mjs +30 -7
- package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-more-options.mjs +1 -1
- package/fesm2022/apexara-ng-components-more-options.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-select.mjs +258 -9
- package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-services.mjs +6 -0
- package/fesm2022/apexara-ng-components-services.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-snackbar.mjs +2 -2
- package/fesm2022/apexara-ng-components-snackbar.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-table.mjs +157 -3
- package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-textarea.mjs +10 -2
- package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
- package/package.json +5 -1
- package/types/apexara-ng-components-button.d.ts +3 -2
- package/types/apexara-ng-components-dialog.d.ts +6 -1
- package/types/apexara-ng-components-drawer.d.ts +10 -2
- package/types/apexara-ng-components-expander.d.ts +2 -0
- package/types/apexara-ng-components-filter-pill.d.ts +30 -0
- package/types/apexara-ng-components-image.d.ts +2 -1
- package/types/apexara-ng-components-input.d.ts +14 -2
- package/types/apexara-ng-components-select.d.ts +31 -1
- package/types/apexara-ng-components-services.d.ts +1 -0
- package/types/apexara-ng-components-table.d.ts +36 -3
- package/types/apexara-ng-components-textarea.d.ts +5 -0
package/README.md
CHANGED
|
@@ -640,6 +640,9 @@ An image component that fetches an asset and displays it.
|
|
|
640
640
|
>### ariaLabel
|
|
641
641
|
>a string value that adds accessible name to the image.
|
|
642
642
|
|
|
643
|
+
>### loading
|
|
644
|
+
>optional. `'lazy' | 'eager'` — sets the native `loading` attribute on the rendered `<img>`. Only applies to raster images, not inline SVGs. Omit to use the browser default.
|
|
645
|
+
|
|
643
646
|
[🔼 Back to top](#components)
|
|
644
647
|
|
|
645
648
|
-----------------------------------------------------------------
|
|
@@ -1037,6 +1040,28 @@ Simple styled radio-button that can accept a formGroup and a control.
|
|
|
1037
1040
|
>};
|
|
1038
1041
|
>```
|
|
1039
1042
|
|
|
1043
|
+
### Inset label (filter chip)
|
|
1044
|
+
>Set `variant: ApexSelectVariant.Inset` to render the select as a filter chip: the field's `label`
|
|
1045
|
+
>moves inside the trigger and stacks above the selected value, and an inline clear
|
|
1046
|
+
>(×) replaces the caret once a value is picked. Empty, the trigger shows the
|
|
1047
|
+
>`placeholder` and the caret as usual. The outside label header is suppressed in
|
|
1048
|
+
>this mode, so keep `label` set to the field name (it becomes the inside caption)
|
|
1049
|
+
>and `placeholder` to the empty-state prompt. Single-select only.
|
|
1050
|
+
>```typescript
|
|
1051
|
+
>public selectOptions: ApexSelectOptions = {
|
|
1052
|
+
> label: 'Period',
|
|
1053
|
+
> variant: ApexSelectVariant.Inset,
|
|
1054
|
+
> placeholder: 'Period',
|
|
1055
|
+
> data: [
|
|
1056
|
+
> { label: '3 Months', value: '3m' },
|
|
1057
|
+
> { label: '1 Year', value: '1y' },
|
|
1058
|
+
> { label: 'All Time', value: 'all' },
|
|
1059
|
+
> ],
|
|
1060
|
+
> formGroup: this.selectForm,
|
|
1061
|
+
> formControlName: 'selectControl',
|
|
1062
|
+
>};
|
|
1063
|
+
>```
|
|
1064
|
+
|
|
1040
1065
|
### CSS Variables
|
|
1041
1066
|
>Here are all the available CSS variables (and their default values) you can set when using the apex-select:
|
|
1042
1067
|
>```css
|
|
@@ -1055,6 +1080,16 @@ Simple styled radio-button that can accept a formGroup and a control.
|
|
|
1055
1080
|
> --apex-select-chip-background-color: #0B1222;
|
|
1056
1081
|
> --apex-select-chip-icon-color; #FFFFFF;
|
|
1057
1082
|
>
|
|
1083
|
+
> /* Inset label variant (variant: 'inset') */
|
|
1084
|
+
> --apex-select-inset-label-font-size: 10px;
|
|
1085
|
+
> --apex-select-inset-label-color: #7C8182;
|
|
1086
|
+
> --apex-select-inset-value-font-size: 13px;
|
|
1087
|
+
> --apex-select-inset-value-color: #141414;
|
|
1088
|
+
> --apex-select-inset-clear-background: transparent;
|
|
1089
|
+
> --apex-select-inset-clear-color: #7C8182;
|
|
1090
|
+
> --apex-select-inset-clear-hover-background: #141414;
|
|
1091
|
+
> --apex-select-inset-clear-hover-color: #FFFFFF;
|
|
1092
|
+
>
|
|
1058
1093
|
> /* tooltip icon styling */
|
|
1059
1094
|
> --apex-select-tooltip-icon-fill: transparent;
|
|
1060
1095
|
> --apex-input-tooltip-icon-stroke: #C6C6C6;
|
|
@@ -12,7 +12,13 @@ class ApexButtonComponent {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
this.link = null;
|
|
14
14
|
this.state = null;
|
|
15
|
-
|
|
15
|
+
// null → no aria-label attribute, so the projected button text is the
|
|
16
|
+
// accessible name (the old 'Button' default overrode every real label).
|
|
17
|
+
this.ariaLabel = null;
|
|
18
|
+
// Accessibility-aware disabled state: aria-disabled + removed from the tab
|
|
19
|
+
// order + click/keyboard suppressed. Opt-in — consumers using only CSS
|
|
20
|
+
// disabling (.btn-disabled) are unaffected.
|
|
21
|
+
this.disabled = false;
|
|
16
22
|
this.focusChange = new EventEmitter();
|
|
17
23
|
this.clickChange = new EventEmitter();
|
|
18
24
|
this.clickSubject = new Subject();
|
|
@@ -24,6 +30,10 @@ class ApexButtonComponent {
|
|
|
24
30
|
.subscribe(event => this.clickChange.emit(event));
|
|
25
31
|
}
|
|
26
32
|
onClick(event) {
|
|
33
|
+
if (this.disabled) {
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
27
37
|
this.clickSubject.next(event);
|
|
28
38
|
}
|
|
29
39
|
onFocusChange(event) {
|
|
@@ -36,14 +46,14 @@ class ApexButtonComponent {
|
|
|
36
46
|
}
|
|
37
47
|
}
|
|
38
48
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexButtonComponent, isStandalone: true, selector: "apex-button", inputs: { link: "link", state: "state", options: "options", ariaLabel: "ariaLabel" }, outputs: { focusChange: "focusChange", clickChange: "clickChange" }, ngImport: i0, template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n
|
|
49
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexButtonComponent, isStandalone: true, selector: "apex-button", inputs: { link: "link", state: "state", options: "options", ariaLabel: "ariaLabel", disabled: "disabled" }, outputs: { focusChange: "focusChange", clickChange: "clickChange" }, ngImport: i0, template: "<!-- role=button only when not a real navigation link; aria-label only when the\n consumer provides one (otherwise the projected text is the accessible name);\n aria-disabled + tabindex -1 when disabled. Icons are decorative (empty alt\n \u2192 apex-img marks them aria-hidden) \u2014 the button text carries the name. -->\n<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.role]=\"link ? null : 'button'\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel\">\n\n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"''\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"''\"></apex-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--apex-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--apex-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-button-left-svg-fill, #FFFFFF);stroke:var(--apex-button-left-svg-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-button-right-svg-fill, #FFFFFF);stroke:var(--apex-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--apex-button-text-color, #FFFFFF);border-radius:var(--apex-button-border-radius, 4px);border:1px solid var(--apex-button-border-color, none);background-color:var(--apex-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt", "loading"] }] }); }
|
|
40
50
|
}
|
|
41
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexButtonComponent, decorators: [{
|
|
42
52
|
type: Component,
|
|
43
53
|
args: [{ selector: 'apex-button', imports: [
|
|
44
54
|
RouterModule,
|
|
45
55
|
ApexImageComponent
|
|
46
|
-
], template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n
|
|
56
|
+
], template: "<!-- role=button only when not a real navigation link; aria-label only when the\n consumer provides one (otherwise the projected text is the accessible name);\n aria-disabled + tabindex -1 when disabled. Icons are decorative (empty alt\n \u2192 apex-img marks them aria-hidden) \u2014 the button text carries the name. -->\n<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.role]=\"link ? null : 'button'\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel\">\n\n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"''\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"''\"></apex-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--apex-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--apex-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-button-left-svg-fill, #FFFFFF);stroke:var(--apex-button-left-svg-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-button-right-svg-fill, #FFFFFF);stroke:var(--apex-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--apex-button-text-color, #FFFFFF);border-radius:var(--apex-button-border-radius, 4px);border:1px solid var(--apex-button-border-color, none);background-color:var(--apex-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"] }]
|
|
47
57
|
}], ctorParameters: () => [], propDecorators: { link: [{
|
|
48
58
|
type: Input
|
|
49
59
|
}], state: [{
|
|
@@ -52,6 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
52
62
|
type: Input
|
|
53
63
|
}], ariaLabel: [{
|
|
54
64
|
type: Input
|
|
65
|
+
}], disabled: [{
|
|
66
|
+
type: Input
|
|
55
67
|
}], focusChange: [{
|
|
56
68
|
type: Output
|
|
57
69
|
}], clickChange: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apexara-ng-components-button.mjs","sources":["../../../../projects/apexara/ng-components/button/src/button.component.ts","../../../../projects/apexara/ng-components/button/src/button.component.html","../../../../projects/apexara/ng-components/button/apexara-ng-components-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { RouterModule } from '@angular/router';\n\nimport { Subject, throttleTime } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexButtonOptions {\n iconLeft?: string;\n iconRight?: string;\n throttleTimeMs?: number;\n}\n\nconst defaultOptions: ApexButtonOptions = {\n throttleTimeMs: 300,\n}\n\n@Component({\n selector: 'apex-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.css'],\n imports: [\n RouterModule,\n ApexImageComponent\n],\n})\n\nexport class ApexButtonComponent {\n\n @Input() link: string | null = null;\n @Input() state: any | null = null;\n\n @Input() options!: ApexButtonOptions;\n\n @Input() ariaLabel: string =
|
|
1
|
+
{"version":3,"file":"apexara-ng-components-button.mjs","sources":["../../../../projects/apexara/ng-components/button/src/button.component.ts","../../../../projects/apexara/ng-components/button/src/button.component.html","../../../../projects/apexara/ng-components/button/apexara-ng-components-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { RouterModule } from '@angular/router';\n\nimport { Subject, throttleTime } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexButtonOptions {\n iconLeft?: string;\n iconRight?: string;\n throttleTimeMs?: number;\n}\n\nconst defaultOptions: ApexButtonOptions = {\n throttleTimeMs: 300,\n}\n\n@Component({\n selector: 'apex-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.css'],\n imports: [\n RouterModule,\n ApexImageComponent\n],\n})\n\nexport class ApexButtonComponent {\n\n @Input() link: string | null = null;\n @Input() state: any | null = null;\n\n @Input() options!: ApexButtonOptions;\n\n // null → no aria-label attribute, so the projected button text is the\n // accessible name (the old 'Button' default overrode every real label).\n @Input() ariaLabel: string | null = null;\n\n // Accessibility-aware disabled state: aria-disabled + removed from the tab\n // order + click/keyboard suppressed. Opt-in — consumers using only CSS\n // disabling (.btn-disabled) are unaffected.\n @Input() disabled = false;\n\n @Output() focusChange = new EventEmitter<FocusEvent>();\n @Output() clickChange = new EventEmitter<KeyboardEvent | PointerEvent | MouseEvent>();\n\n private clickSubject = new Subject<KeyboardEvent | PointerEvent | MouseEvent>();\n\n constructor() { }\n\n public ngAfterViewInit(): void {\n this.options = { ...defaultOptions, ...this.options };\n\n this.clickSubject\n .pipe(throttleTime(this.options.throttleTimeMs!))\n .subscribe(event => this.clickChange.emit(event));\n }\n\n public onClick(event: KeyboardEvent | PointerEvent | MouseEvent): void {\n if (this.disabled) {\n event.preventDefault();\n\n return;\n }\n\n this.clickSubject.next(event);\n }\n\n public onFocusChange(event: FocusEvent): void {\n this.focusChange.emit(event);\n }\n\n public handleKeydown(event: KeyboardEvent): void {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n\n this.onClick(event);\n }\n }\n\n}\n","<!-- role=button only when not a real navigation link; aria-label only when the\n consumer provides one (otherwise the projected text is the accessible name);\n aria-disabled + tabindex -1 when disabled. Icons are decorative (empty alt\n → apex-img marks them aria-hidden) — the button text carries the name. -->\n<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.role]=\"link ? null : 'button'\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel\">\n\n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"''\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"''\"></apex-img>\n </div>\n }\n </div>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,cAAc,GAAsB;AACxC,IAAA,cAAc,EAAE,GAAG;CACpB;MAYY,mBAAmB,CAAA;AAqB9B,IAAA,WAAA,GAAA;QAnBS,IAAA,CAAA,IAAI,GAAkB,IAAI;QAC1B,IAAA,CAAA,KAAK,GAAe,IAAI;;;QAMxB,IAAA,CAAA,SAAS,GAAkB,IAAI;;;;QAK/B,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEf,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAc;AAC5C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAA6C;AAE7E,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAA6C;IAE/D;IAET,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AAErD,QAAA,IAAI,CAAC;aACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,cAAe,CAAC;AAC/C,aAAA,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD;AAEO,IAAA,OAAO,CAAC,KAAgD,EAAA;AAC7D,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YAEtB;QACF;AAEA,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/B;AAEO,IAAA,aAAa,CAAC,KAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;IAC9B;AAEO,IAAA,aAAa,CAAC,KAAoB,EAAA;AACvC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YACpD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB;IACF;8GAnDW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BhC,ixCAkCA,EAAA,MAAA,EAAA,CAAA,g1CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXI,YAAY,gRACZ,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIT,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EAGd;wBACP,YAAY;wBACZ;AACH,qBAAA,EAAA,QAAA,EAAA,ixCAAA,EAAA,MAAA,EAAA,CAAA,g1CAAA,CAAA,EAAA;;sBAKE;;sBACA;;sBAEA;;sBAIA;;sBAKA;;sBAEA;;sBACA;;;AE7CH;;AAEG;;;;"}
|
|
@@ -8,7 +8,7 @@ class ApexChipComponent {
|
|
|
8
8
|
this.closeChange = new EventEmitter();
|
|
9
9
|
}
|
|
10
10
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexChipComponent, isStandalone: true, selector: "apex-chip", inputs: { closeIcon: "closeIcon", options: "options" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:var(--apex-chip-height, 28px);display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border:var(--apex-chip-border-width, 0px) solid var(--apex-chip-border-color, transparent);border-radius:var(--apex-chip-border-radius, 28px);padding:var(--apex-chip-padding, 6px 12px)}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon{width:var(--apex-chip-icon-size, 16px);height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.right{margin-left:var(--apex-chip-icon-spacing, 6px)}.icon.left{margin-right:var(--apex-chip-icon-spacing, 6px)}.icon apex-img{max-width:var(--apex-chip-icon-size, 16px);max-height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-chip-left-icon-fill, #FFFFFF);stroke:var(--apex-chip-left-icon-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-chip-right-icon-fill, #FFFFFF);stroke:var(--apex-chip-right-icon-stroke, #ffffff00)}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"], dependencies: [{ kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }] }); }
|
|
11
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexChipComponent, isStandalone: true, selector: "apex-chip", inputs: { closeIcon: "closeIcon", options: "options" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:var(--apex-chip-height, 28px);display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border:var(--apex-chip-border-width, 0px) solid var(--apex-chip-border-color, transparent);border-radius:var(--apex-chip-border-radius, 28px);padding:var(--apex-chip-padding, 6px 12px)}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon{width:var(--apex-chip-icon-size, 16px);height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.right{margin-left:var(--apex-chip-icon-spacing, 6px)}.icon.left{margin-right:var(--apex-chip-icon-spacing, 6px)}.icon apex-img{max-width:var(--apex-chip-icon-size, 16px);max-height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-chip-left-icon-fill, #FFFFFF);stroke:var(--apex-chip-left-icon-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-chip-right-icon-fill, #FFFFFF);stroke:var(--apex-chip-right-icon-stroke, #ffffff00)}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"], dependencies: [{ kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt", "loading"] }] }); }
|
|
12
12
|
}
|
|
13
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexChipComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexChipOptions {\n iconLeft?: string;\n iconRight?: string;\n}\n\n@Component({\n selector: 'apex-chip',\n templateUrl: './chip.component.html',\n styleUrls: ['./chip.component.css'],\n imports: [ApexImageComponent],\n})\n\nexport class ApexChipComponent {\n\n @Input() closeIcon = false;\n\n @Input() options!: ApexChipOptions;\n\n @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAgBa,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,SAAS,GAAG,KAAK;AAIhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GARY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB9B,q3BAuBA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,WAAW,EAAA,OAAA,EAGZ,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAA,q3BAAA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA;;sBAK5B;;sBAEA;;sBAEA;;;AEtBH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexChipOptions {\n iconLeft?: string;\n iconRight?: string;\n}\n\n@Component({\n selector: 'apex-chip',\n templateUrl: './chip.component.html',\n styleUrls: ['./chip.component.css'],\n imports: [ApexImageComponent],\n})\n\nexport class ApexChipComponent {\n\n @Input() closeIcon = false;\n\n @Input() options!: ApexChipOptions;\n\n @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAgBa,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,SAAS,GAAG,KAAK;AAIhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GARY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB9B,q3BAuBA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,WAAW,EAAA,OAAA,EAGZ,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAA,q3BAAA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA;;sBAK5B;;sBAEA;;sBAEA;;;AEtBH;;AAEG;;;;"}
|
|
@@ -1820,7 +1820,7 @@ class ApexCalendarComponent {
|
|
|
1820
1820
|
return this.datePickerService.isSameMultiYearView(date1, date2, this.minDate, this.maxDate);
|
|
1821
1821
|
}
|
|
1822
1822
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarComponent, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1823
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarComponent, isStandalone: true, selector: "apex-calendar", inputs: { activeDate: "activeDate", minDate: "minDate", selected: "selected", maxDate: "maxDate", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { monthSelected: "monthSelected", yearSelected: "yearSelected", activeDateChange: "activeDateChange", userDragDrop: "userDragDrop", selectedChange: "selectedChange", userSelection: "userSelection", calendarClose: "calendarClose" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"header\">\n <span \n tabindex=\"0\"\n class=\"active-date-view\"\n (click)=\"calendarDateViewChange()\"\n (keydown)=\"onCalendarDateViewKeydown($event)\">\n {{ viewButtonText }}\n </span>\n\n <div class=\"header-navigation\">\n <div class=\"chevron-wrapper\"\n tabindex=\"0\"\n [class.disabled]=\"!previousEnabled()\"\n (click)=\"goToPreviousView()\"\n (keydown)=\"onArrowKeydown($event, 'previous')\">\n <span class=\"chevron left\"></span>\n </div>\n\n <div class=\"chevron-wrapper\" \n tabindex=\"0\"\n [class.disabled]=\"!nextEnabled()\" \n (click)=\"goToNextView()\"\n (keydown)=\"onArrowKeydown($event, 'next')\">\n <span class=\"chevron right\"></span>\n </div>\n </div>\n </div>\n\n <div class=\"calendar\">\n @switch (activeDateView()) {\n @case ('month') {\n <apex-calendar-month-view\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (userSelection)=\"dateSelected($event)\"\n (dragStarted)=\"dragStarted($event)\"\n (dragEnded)=\"dragEnded($event)\"\n [activeDrag]=\"activeDrag()\">\n </apex-calendar-month-view>\n }\n\n @case ('year') {\n <apex-calendar-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelectedInYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'month')\">\n </apex-calendar-year-view>\n }\n\n @case ('multi-year') {\n <apex-calendar-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'year')\">\n </apex-calendar-multi-year-view>\n }\n }\n </div>\n</div>\n\n<apex-button\n [ariaLabel]=\"'Button for closing the calendar.'\" \n (clickChange)=\"calendarClose.emit($event)\" \n (focusChange)=\"toggleButtonVisibility($event)\"\n [class.cdk-visually-hidden]=\"isButtonHidden()\">\n Close Calendar\n</apex-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--apex-datepicker-header-text-color, #FF7955);padding:8px 8px 0}.active-date-view{cursor:pointer;border-radius:4px;padding:2px 4px}.active-date-view:focus{outline:none;color:var(--apex-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--apex-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-hover-background-color, #FF7955)}.header-navigation{display:flex}.chevron-wrapper{display:flex;border-radius:50%}.chevron-wrapper:focus{outline:none}.chevron-wrapper:hover,.chevron-wrapper:focus:not(.disabled){color:var(--apex-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-chevron-hover-focus-background-color, #FF7955)}.chevron{width:24px;height:24px;padding:8px;position:relative;cursor:pointer}.chevron:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px;border-left-width:2px}.chevron.right{transform:rotate(135deg)}.chevron-wrapper.disabled{pointer-events:none;background-color:none;color:var(--apex-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}apex-button{position:absolute;bottom:-50px}\n"], dependencies: [{ kind: "component", type: ApexButtonComponent, selector: "apex-button", inputs: ["link", "state", "options", "ariaLabel"], outputs: ["focusChange", "clickChange"] }, { kind: "component", type: ApexCalendarYearView, selector: "apex-calendar-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "monthSelected", "activeDateChange"] }, { kind: "component", type: ApexCalendarMonthView, selector: "apex-calendar-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "activeDrag"], outputs: ["dragStarted", "dragEnded", "activeDateChange", "userSelection", "selectedChange"] }, { kind: "component", type: ApexCalendarMultiYearView, selector: "apex-calendar-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "yearSelected", "activeDateChange"] }] }); }
|
|
1823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarComponent, isStandalone: true, selector: "apex-calendar", inputs: { activeDate: "activeDate", minDate: "minDate", selected: "selected", maxDate: "maxDate", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { monthSelected: "monthSelected", yearSelected: "yearSelected", activeDateChange: "activeDateChange", userDragDrop: "userDragDrop", selectedChange: "selectedChange", userSelection: "userSelection", calendarClose: "calendarClose" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"header\">\n <span \n tabindex=\"0\"\n class=\"active-date-view\"\n (click)=\"calendarDateViewChange()\"\n (keydown)=\"onCalendarDateViewKeydown($event)\">\n {{ viewButtonText }}\n </span>\n\n <div class=\"header-navigation\">\n <div class=\"chevron-wrapper\"\n tabindex=\"0\"\n [class.disabled]=\"!previousEnabled()\"\n (click)=\"goToPreviousView()\"\n (keydown)=\"onArrowKeydown($event, 'previous')\">\n <span class=\"chevron left\"></span>\n </div>\n\n <div class=\"chevron-wrapper\" \n tabindex=\"0\"\n [class.disabled]=\"!nextEnabled()\" \n (click)=\"goToNextView()\"\n (keydown)=\"onArrowKeydown($event, 'next')\">\n <span class=\"chevron right\"></span>\n </div>\n </div>\n </div>\n\n <div class=\"calendar\">\n @switch (activeDateView()) {\n @case ('month') {\n <apex-calendar-month-view\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (userSelection)=\"dateSelected($event)\"\n (dragStarted)=\"dragStarted($event)\"\n (dragEnded)=\"dragEnded($event)\"\n [activeDrag]=\"activeDrag()\">\n </apex-calendar-month-view>\n }\n\n @case ('year') {\n <apex-calendar-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelectedInYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'month')\">\n </apex-calendar-year-view>\n }\n\n @case ('multi-year') {\n <apex-calendar-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'year')\">\n </apex-calendar-multi-year-view>\n }\n }\n </div>\n</div>\n\n<apex-button\n [ariaLabel]=\"'Button for closing the calendar.'\" \n (clickChange)=\"calendarClose.emit($event)\" \n (focusChange)=\"toggleButtonVisibility($event)\"\n [class.cdk-visually-hidden]=\"isButtonHidden()\">\n Close Calendar\n</apex-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--apex-datepicker-header-text-color, #FF7955);padding:8px 8px 0}.active-date-view{cursor:pointer;border-radius:4px;padding:2px 4px}.active-date-view:focus{outline:none;color:var(--apex-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--apex-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-hover-background-color, #FF7955)}.header-navigation{display:flex}.chevron-wrapper{display:flex;border-radius:50%}.chevron-wrapper:focus{outline:none}.chevron-wrapper:hover,.chevron-wrapper:focus:not(.disabled){color:var(--apex-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-chevron-hover-focus-background-color, #FF7955)}.chevron{width:24px;height:24px;padding:8px;position:relative;cursor:pointer}.chevron:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px;border-left-width:2px}.chevron.right{transform:rotate(135deg)}.chevron-wrapper.disabled{pointer-events:none;background-color:none;color:var(--apex-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}apex-button{position:absolute;bottom:-50px}\n"], dependencies: [{ kind: "component", type: ApexButtonComponent, selector: "apex-button", inputs: ["link", "state", "options", "ariaLabel", "disabled"], outputs: ["focusChange", "clickChange"] }, { kind: "component", type: ApexCalendarYearView, selector: "apex-calendar-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "monthSelected", "activeDateChange"] }, { kind: "component", type: ApexCalendarMonthView, selector: "apex-calendar-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "activeDrag"], outputs: ["dragStarted", "dragEnded", "activeDateChange", "userSelection", "selectedChange"] }, { kind: "component", type: ApexCalendarMultiYearView, selector: "apex-calendar-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "yearSelected", "activeDateChange"] }] }); }
|
|
1824
1824
|
}
|
|
1825
1825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarComponent, decorators: [{
|
|
1826
1826
|
type: Component,
|