@apexara/ng-components 1.0.6-test.6 → 1.0.6
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 +103 -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 +440 -48
- 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 +154 -2
- 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 +50 -2
- 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
|
-----------------------------------------------------------------
|
|
@@ -979,6 +982,86 @@ Simple styled radio-button that can accept a formGroup and a control.
|
|
|
979
982
|
><apex-select>
|
|
980
983
|
>```
|
|
981
984
|
|
|
985
|
+
### In-dropdown search
|
|
986
|
+
>Set `searchInDropdown: true` to move the search input inside the dropdown
|
|
987
|
+
>(instead of the trigger). Intended for multi-select. The trigger then shows
|
|
988
|
+
>chips (or a counter when `counterAsValue: true`) and the arrow only, and the
|
|
989
|
+
>search input auto-focuses when the dropdown opens.
|
|
990
|
+
>```typescript
|
|
991
|
+
>public selectOptions: ApexSelectOptions = {
|
|
992
|
+
> label: 'Property Type',
|
|
993
|
+
> data: [
|
|
994
|
+
> { label: 'SFR', value: 'sfr' },
|
|
995
|
+
> { label: 'Duplex', value: 'duplex' },
|
|
996
|
+
> { label: 'Condo', value: 'condo' },
|
|
997
|
+
> ],
|
|
998
|
+
> multiple: true,
|
|
999
|
+
> searchInDropdown: true,
|
|
1000
|
+
> counterAsValue: true,
|
|
1001
|
+
> placeholder: 'Select property types',
|
|
1002
|
+
> formGroup: this.selectForm,
|
|
1003
|
+
> formControlName: 'selectControl',
|
|
1004
|
+
>};
|
|
1005
|
+
>```
|
|
1006
|
+
|
|
1007
|
+
### Grouped options with categories
|
|
1008
|
+
>Pass a `groups` array to render category headers above each section. `groups`
|
|
1009
|
+
>supersedes `data` when both are present. Grouped mode requires
|
|
1010
|
+
>`searchInDropdown: true` and uses native scroll (not virtual scroll), so it is
|
|
1011
|
+
>intended for bounded lists that fit comfortably within
|
|
1012
|
+
>`--apex-select-dropdown-body-max-height`. Search filters inside each category
|
|
1013
|
+
>and empty categories disappear.
|
|
1014
|
+
>```typescript
|
|
1015
|
+
>public selectOptions: ApexSelectOptions = {
|
|
1016
|
+
> label: 'Property Type',
|
|
1017
|
+
> data: [], // ignored when groups is present
|
|
1018
|
+
> groups: [
|
|
1019
|
+
> {
|
|
1020
|
+
> label: 'Residential',
|
|
1021
|
+
> data: [
|
|
1022
|
+
> { label: 'SFR', value: 'sfr' },
|
|
1023
|
+
> { label: 'SFR w/ ADU', value: 'sfr-adu' },
|
|
1024
|
+
> { label: 'Duplex', value: 'duplex' },
|
|
1025
|
+
> ],
|
|
1026
|
+
> },
|
|
1027
|
+
> {
|
|
1028
|
+
> label: 'Commercial',
|
|
1029
|
+
> data: [
|
|
1030
|
+
> { label: 'Medical', value: 'medical' },
|
|
1031
|
+
> { label: 'Mixed Use', value: 'mixed-use' },
|
|
1032
|
+
> ],
|
|
1033
|
+
> },
|
|
1034
|
+
> ],
|
|
1035
|
+
> multiple: true,
|
|
1036
|
+
> searchInDropdown: true,
|
|
1037
|
+
> counterAsValue: true,
|
|
1038
|
+
> formGroup: this.selectForm,
|
|
1039
|
+
> formControlName: 'selectControl',
|
|
1040
|
+
>};
|
|
1041
|
+
>```
|
|
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
|
+
|
|
982
1065
|
### CSS Variables
|
|
983
1066
|
>Here are all the available CSS variables (and their default values) you can set when using the apex-select:
|
|
984
1067
|
>```css
|
|
@@ -997,6 +1080,16 @@ Simple styled radio-button that can accept a formGroup and a control.
|
|
|
997
1080
|
> --apex-select-chip-background-color: #0B1222;
|
|
998
1081
|
> --apex-select-chip-icon-color; #FFFFFF;
|
|
999
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
|
+
>
|
|
1000
1093
|
> /* tooltip icon styling */
|
|
1001
1094
|
> --apex-select-tooltip-icon-fill: transparent;
|
|
1002
1095
|
> --apex-input-tooltip-icon-stroke: #C6C6C6;
|
|
@@ -1041,6 +1134,16 @@ Simple styled radio-button that can accept a formGroup and a control.
|
|
|
1041
1134
|
> --apex-select-dropdown-border-color: #E9E9E9;
|
|
1042
1135
|
> --apex-select-dropdown-background-color: #FFFFFF;
|
|
1043
1136
|
>
|
|
1137
|
+
> /* In-dropdown search row (searchInDropdown: true) */
|
|
1138
|
+
> --apex-select-dropdown-search-border-color: #E9E9E9;
|
|
1139
|
+
> --apex-select-dropdown-search-icon-color: #5D6068;
|
|
1140
|
+
>
|
|
1141
|
+
> /* Dropdown body scroll area (grouped mode) */
|
|
1142
|
+
> --apex-select-dropdown-body-max-height: 320px;
|
|
1143
|
+
>
|
|
1144
|
+
> /* Group header (grouped mode) */
|
|
1145
|
+
> --apex-select-group-header-color: #9A9A9A;
|
|
1146
|
+
>
|
|
1044
1147
|
> /* Option icons (per-item icons in dropdown): */
|
|
1045
1148
|
> --apex-select-option-icon-size: 20px;
|
|
1046
1149
|
> --apex-select-option-icon-spacing: 10px;
|
|
@@ -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,
|