@agorapulse/ui-components 22.1.3 → 22.1.5
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/agorapulse-ui-components-22.1.5.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +6 -5
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-date-range-picker.mjs +15 -6
- package/fesm2022/agorapulse-ui-components-date-range-picker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +12 -10
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-dropdown-base.mjs +12 -137
- package/fesm2022/agorapulse-ui-components-dropdown-base.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +20 -12
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-floating.mjs +7 -6
- package/fesm2022/agorapulse-ui-components-floating.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +6 -4
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +6 -5
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-action-dropdown.d.ts +4 -2
- package/types/agorapulse-ui-components-date-range-picker.d.ts +4 -2
- package/types/agorapulse-ui-components-datepicker.d.ts +7 -4
- package/types/agorapulse-ui-components-dropdown-base.d.ts +17 -8
- package/types/agorapulse-ui-components-filter-dropdown.d.ts +12 -4
- package/types/agorapulse-ui-components-nav-selector.d.ts +4 -1
- package/types/agorapulse-ui-components-selection-dropdown.d.ts +4 -2
- package/agorapulse-ui-components-22.1.3.tgz +0 -0
|
Binary file
|
|
@@ -82,8 +82,9 @@ class ActionDropdownComponent {
|
|
|
82
82
|
disabled = input(false, /* @ts-ignore */
|
|
83
83
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
84
84
|
/** Default position for the dropdown relative to the trigger element */
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
/** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
|
|
86
|
+
placement = input(/* @ts-ignore */
|
|
87
|
+
...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
87
88
|
/** Emits when the dropdown menu is opened */
|
|
88
89
|
opened = output();
|
|
89
90
|
/** Emits when the dropdown menu is closed */
|
|
@@ -109,7 +110,7 @@ class ActionDropdownComponent {
|
|
|
109
110
|
return;
|
|
110
111
|
this.overlay.open(template, triggerElement, {
|
|
111
112
|
showBackdrop: this.showBackdrop(),
|
|
112
|
-
|
|
113
|
+
placement: this.placement(),
|
|
113
114
|
onClose: () => this.close(),
|
|
114
115
|
});
|
|
115
116
|
this.opened.emit();
|
|
@@ -192,12 +193,12 @@ class ActionDropdownComponent {
|
|
|
192
193
|
});
|
|
193
194
|
}
|
|
194
195
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
196
197
|
}
|
|
197
198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, decorators: [{
|
|
198
199
|
type: Component,
|
|
199
200
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"] }]
|
|
200
|
-
}], ctorParameters: () => [], propDecorators: { actionDropdownTemplate: [{ type: i0.ViewChild, args: ['actionDropdownTemplate', { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }],
|
|
201
|
+
}], ctorParameters: () => [], propDecorators: { actionDropdownTemplate: [{ type: i0.ViewChild, args: ['actionDropdownTemplate', { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
201
202
|
|
|
202
203
|
/**
|
|
203
204
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/**\n * Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n /** Reference to the ActionDropdown component that this trigger controls */\n apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n /** Handles click events to toggle the dropdown */\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n }\n\n /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const dropdown = this.apActionDropdownTrigger();\n if (!dropdown) return;\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n dropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n dropdown.close();\n break;\n }\n }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n /** Unique identifier for the item */\n name?: string;\n /** Display text for the item */\n label?: string;\n /** Secondary text displayed below the label */\n description?: string;\n /** Text displayed in a badge next to the item */\n badgeLabel?: string;\n /** Color of the badge displayed next to the item */\n badgeColor?: BadgeColor;\n /** Whether to show a feature lock icon */\n featureLockEnabled?: boolean;\n /** Whether to apply red styling for destructive actions */\n redModeEnabled?: boolean;\n /** Tooltip text displayed when hovering over the item */\n itemTooltipText?: string;\n /** Icon symbol identifier displayed at the start of the item */\n startSymbolId?: agorapulseSymbol;\n /** Color theme for the start symbol */\n startSymbolColor?: SymbolColor;\n /** Tooltip text for the start symbol */\n startSymbolTooltipText?: string;\n /** Icon symbol identifier displayed at the end of the item */\n endSymbolId?: agorapulseSymbol;\n /** Tooltip text for the end symbol */\n endSymbolTooltipText?: string;\n /** Whether the item is disabled and non-interactive */\n disabled?: boolean;\n /** Whether to add a divider before this item */\n dividerEnabled?: boolean;\n /** Optional ID for the action button item */\n id?: string;\n /** Optional data-track attribute for analytics tracking */\n dataTrack?: string;\n}\n\n/**\n * A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-action-dropdown',\n templateUrl: './action-dropdown.component.html',\n styleUrls: ['./action-dropdown.component.scss'],\n imports: [BadgeComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly overlay = createDropdownOverlay();\n\n actionDropdownTemplate = viewChild<TemplateRef<unknown>>('actionDropdownTemplate');\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /** Array of items to display in the dropdown menu */\n items = input<ActionDropdownItem[]>([]);\n /** Whether to enable large mode styling for the dropdown */\n largeModeEnabled = input(false);\n /** Custom width for the dropdown menu in pixels */\n customWidth = input<number | null>(null);\n\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Whether the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Default position for the dropdown relative to the trigger element */\n defaultPosition = input<'right' | 'left'>('right');\n\n /** Emits when the dropdown menu is opened */\n opened = output<void>();\n /** Emits when the dropdown menu is closed */\n closed = output<void>();\n /** Emits when a dropdown item is clicked */\n itemClick = output<ActionDropdownItem>();\n\n protected readonly focusedIndex = signal(-1);\n\n readonly isOpen = this.overlay.isOpen;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set up keyboard navigation when dropdown opens\n effect(() => {\n if (this.isOpen()) {\n this.setupKeyboardNavigation();\n }\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const template = this.actionDropdownTemplate();\n if (this.disabled() || this.isOpen() || !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n defaultPosition: this.defaultPosition(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) return;\n this.focusedIndex.set(-1);\n this.overlay.close();\n this.closed.emit();\n }\n\n /** Toggles the dropdown menu open or closed state */\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n /** Handles item click events, emitting the selected item and closing the dropdown */\n onItemClick(item: ActionDropdownItem): void {\n if (item.disabled) {\n return;\n }\n\n this.itemClick.emit(item);\n\n this.close();\n }\n\n /** Handles keyboard navigation within the dropdown menu */\n onKeyDown(event: KeyboardEvent): void {\n const items = this.items();\n const currentIndex = this.focusedIndex();\n let nextIndex: number;\n let prevIndex: number;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (currentIndex >= 0 && currentIndex < items.length) {\n this.onItemClick(items[currentIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.close();\n break;\n\n case 'Tab':\n event.preventDefault();\n if (event.shiftKey) {\n // Shift+Tab - move to previous item\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n } else {\n // Tab - move to next item\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n }\n break;\n }\n }\n\n /** Sets up keyboard event handling for the opened dropdown */\n private setupKeyboardNavigation(): void {\n const ref = this.overlay.overlayRef;\n if (!ref) return;\n\n ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n this.onKeyDown(event);\n });\n }\n}\n","<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/**\n * Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n /** Reference to the ActionDropdown component that this trigger controls */\n apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n /** Handles click events to toggle the dropdown */\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n }\n\n /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const dropdown = this.apActionDropdownTrigger();\n if (!dropdown) return;\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n dropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n dropdown.close();\n break;\n }\n }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n /** Unique identifier for the item */\n name?: string;\n /** Display text for the item */\n label?: string;\n /** Secondary text displayed below the label */\n description?: string;\n /** Text displayed in a badge next to the item */\n badgeLabel?: string;\n /** Color of the badge displayed next to the item */\n badgeColor?: BadgeColor;\n /** Whether to show a feature lock icon */\n featureLockEnabled?: boolean;\n /** Whether to apply red styling for destructive actions */\n redModeEnabled?: boolean;\n /** Tooltip text displayed when hovering over the item */\n itemTooltipText?: string;\n /** Icon symbol identifier displayed at the start of the item */\n startSymbolId?: agorapulseSymbol;\n /** Color theme for the start symbol */\n startSymbolColor?: SymbolColor;\n /** Tooltip text for the start symbol */\n startSymbolTooltipText?: string;\n /** Icon symbol identifier displayed at the end of the item */\n endSymbolId?: agorapulseSymbol;\n /** Tooltip text for the end symbol */\n endSymbolTooltipText?: string;\n /** Whether the item is disabled and non-interactive */\n disabled?: boolean;\n /** Whether to add a divider before this item */\n dividerEnabled?: boolean;\n /** Optional ID for the action button item */\n id?: string;\n /** Optional data-track attribute for analytics tracking */\n dataTrack?: string;\n}\n\n/**\n * A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-action-dropdown',\n templateUrl: './action-dropdown.component.html',\n styleUrls: ['./action-dropdown.component.scss'],\n imports: [BadgeComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly overlay = createDropdownOverlay();\n\n actionDropdownTemplate = viewChild<TemplateRef<unknown>>('actionDropdownTemplate');\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /** Array of items to display in the dropdown menu */\n items = input<ActionDropdownItem[]>([]);\n /** Whether to enable large mode styling for the dropdown */\n largeModeEnabled = input(false);\n /** Custom width for the dropdown menu in pixels */\n customWidth = input<number | null>(null);\n\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Whether the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Default position for the dropdown relative to the trigger element */\n /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\n\n /** Emits when the dropdown menu is opened */\n opened = output<void>();\n /** Emits when the dropdown menu is closed */\n closed = output<void>();\n /** Emits when a dropdown item is clicked */\n itemClick = output<ActionDropdownItem>();\n\n protected readonly focusedIndex = signal(-1);\n\n readonly isOpen = this.overlay.isOpen;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set up keyboard navigation when dropdown opens\n effect(() => {\n if (this.isOpen()) {\n this.setupKeyboardNavigation();\n }\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const template = this.actionDropdownTemplate();\n if (this.disabled() || this.isOpen() || !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n placement: this.placement(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) return;\n this.focusedIndex.set(-1);\n this.overlay.close();\n this.closed.emit();\n }\n\n /** Toggles the dropdown menu open or closed state */\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n /** Handles item click events, emitting the selected item and closing the dropdown */\n onItemClick(item: ActionDropdownItem): void {\n if (item.disabled) {\n return;\n }\n\n this.itemClick.emit(item);\n\n this.close();\n }\n\n /** Handles keyboard navigation within the dropdown menu */\n onKeyDown(event: KeyboardEvent): void {\n const items = this.items();\n const currentIndex = this.focusedIndex();\n let nextIndex: number;\n let prevIndex: number;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (currentIndex >= 0 && currentIndex < items.length) {\n this.onItemClick(items[currentIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.close();\n break;\n\n case 'Tab':\n event.preventDefault();\n if (event.shiftKey) {\n // Shift+Tab - move to previous item\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n } else {\n // Tab - move to next item\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n }\n break;\n }\n }\n\n /** Sets up keyboard event handling for the opened dropdown */\n private setupKeyboardNavigation(): void {\n const ref = this.overlay.overlayRef;\n if (!ref) return;\n\n ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n this.onKeyDown(event);\n });\n }\n}\n","<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -78,8 +78,9 @@ class DateRangePickerComponent {
|
|
|
78
78
|
placeholder = input('Select period', /* @ts-ignore */
|
|
79
79
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
80
80
|
/** Side the dropdown opens to when space allows. */
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
/** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
|
|
82
|
+
placement = input(/* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
83
84
|
/** Label of the "Custom" entry in the preset list. */
|
|
84
85
|
customRangeLabel = input('Custom', /* @ts-ignore */
|
|
85
86
|
...(ngDevMode ? [{ debugName: "customRangeLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -138,14 +139,22 @@ class DateRangePickerComponent {
|
|
|
138
139
|
return match?.key ?? 'custom';
|
|
139
140
|
}
|
|
140
141
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
141
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DateRangePickerComponent, isStandalone: true, selector: "ap-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDaysHint: { classPropertyName: "maxRangeDaysHint", publicName: "maxRangeDaysHint", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null },
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DateRangePickerComponent, isStandalone: true, selector: "ap-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDaysHint: { classPropertyName: "maxRangeDaysHint", publicName: "maxRangeDaysHint", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, customRangeLabel: { classPropertyName: "customRangeLabel", publicName: "customRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", presetSelected: "presetSelected" }, host: { classAttribute: "ap-date-range-picker" }, providers: [
|
|
143
|
+
withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apInfo),
|
|
144
|
+
{ provide: LOCALE_CONFIG, useValue: {} },
|
|
145
|
+
LocaleService,
|
|
146
|
+
], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ap-date-range-picker__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"dropdown.isOpen()\"\n [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n [disabled]=\"disabled()\"\n [apDropdownTrigger]=\"dropdown\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n @if (formattedValue()) {\n <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n } @else {\n <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n }\n <ap-symbol\n class=\"ap-date-range-picker__chevron\"\n size=\"sm\"\n [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n <div\n class=\"ap-date-range-picker__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZone()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip()) {\n <ap-symbol\n class=\"ap-date-range-picker__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZoneTooltip()\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [mode]=\"DatepickerMode.Range\"\n [closeOnSelect]=\"closeOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [hint]=\"rangeHint()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedPeriod]=\"value()\"\n [showCustomRangeLabel]=\"true\"\n [showRanges]=\"true\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-date-range-picker{display:inline-flex;align-items:center;gap:var(--ref-spacing-sm)}.ap-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs);height:var(--sys-button-height);padding:0 var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);border-radius:var(--sys-border-radius-sm);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);cursor:pointer}.ap-date-range-picker__trigger .ap-symbol{color:var(--ref-color-grey-150)}.ap-date-range-picker__trigger:hover:not(:disabled){border-color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled{cursor:default;color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled .ap-symbol{color:inherit}.ap-date-range-picker__trigger--open{border-color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__trigger--open .ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__placeholder{color:var(--sys-text-color-light)}.ap-date-range-picker__chevron{padding-left:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone-info{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "firstDayOfWeek", "locale", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
142
147
|
}
|
|
143
148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
144
149
|
type: Component,
|
|
145
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-date-range-picker', imports: [DatepickerDropdownComponent, DropdownTriggerDirective, SymbolComponent, TooltipDirective], providers: [
|
|
150
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-date-range-picker', imports: [DatepickerDropdownComponent, DropdownTriggerDirective, SymbolComponent, TooltipDirective], providers: [
|
|
151
|
+
withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apInfo),
|
|
152
|
+
{ provide: LOCALE_CONFIG, useValue: {} },
|
|
153
|
+
LocaleService,
|
|
154
|
+
], host: {
|
|
146
155
|
class: 'ap-date-range-picker',
|
|
147
|
-
}, encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n class=\"ap-date-range-picker__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"dropdown.isOpen()\"\n [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n [disabled]=\"disabled()\"\n [apDropdownTrigger]=\"dropdown\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n @if (formattedValue()) {\n <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n } @else {\n <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n }\n <ap-symbol\n class=\"ap-date-range-picker__chevron\"\n size=\"sm\"\n [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n <div\n class=\"ap-date-range-picker__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZone()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip()) {\n <ap-symbol\n class=\"ap-date-range-picker__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZoneTooltip()\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [mode]=\"DatepickerMode.Range\"\n [closeOnSelect]=\"closeOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [
|
|
148
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], maxRangeDaysHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDaysHint", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }],
|
|
156
|
+
}, encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n class=\"ap-date-range-picker__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"dropdown.isOpen()\"\n [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n [disabled]=\"disabled()\"\n [apDropdownTrigger]=\"dropdown\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n @if (formattedValue()) {\n <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n } @else {\n <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n }\n <ap-symbol\n class=\"ap-date-range-picker__chevron\"\n size=\"sm\"\n [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n <div\n class=\"ap-date-range-picker__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZone()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip()) {\n <ap-symbol\n class=\"ap-date-range-picker__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZoneTooltip()\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [mode]=\"DatepickerMode.Range\"\n [closeOnSelect]=\"closeOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [hint]=\"rangeHint()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedPeriod]=\"value()\"\n [showCustomRangeLabel]=\"true\"\n [showRanges]=\"true\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-date-range-picker{display:inline-flex;align-items:center;gap:var(--ref-spacing-sm)}.ap-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs);height:var(--sys-button-height);padding:0 var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);border-radius:var(--sys-border-radius-sm);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);cursor:pointer}.ap-date-range-picker__trigger .ap-symbol{color:var(--ref-color-grey-150)}.ap-date-range-picker__trigger:hover:not(:disabled){border-color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled{cursor:default;color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled .ap-symbol{color:inherit}.ap-date-range-picker__trigger--open{border-color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__trigger--open .ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__placeholder{color:var(--sys-text-color-light)}.ap-date-range-picker__chevron{padding-left:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone-info{display:inline-flex;align-items:center}\n"] }]
|
|
157
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], maxRangeDaysHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDaysHint", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], customRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRangeLabel", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], presetSelected: [{ type: i0.Output, args: ["presetSelected"] }] } });
|
|
149
158
|
|
|
150
159
|
/**
|
|
151
160
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-date-range-picker.mjs","sources":["../../../libs/ui-components/date-range-picker/src/date-range-picker.component.ts","../../../libs/ui-components/date-range-picker/src/date-range-picker.component.html","../../../libs/ui-components/date-range-picker/src/agorapulse-ui-components-date-range-picker.ts"],"sourcesContent":["import { LOCALE_CONFIG, LocaleService } from '@agorapulse/ngx-daterangepicker-material';\nimport {\n DatepickerDropdownComponent,\n DatepickerMode,\n FirstDayOfWeek,\n I18nDatePicker,\n Period,\n RangesConfigPresetType,\n} from '@agorapulse/ui-components/datepicker';\nimport { DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apCalendar, apChevronDown, apChevronUp, apClock, apInfo, SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output, ViewEncapsulation } from '@angular/core';\nimport dayjs from 'dayjs';\n\nexport interface DateRangePickerPreset {\n /** Stable identifier emitted by `presetSelected`, independent of the displayed label. */\n key: string;\n /** The text shown in the preset list. */\n label: string;\n /** The date range this preset selects. */\n range: [dayjs.Dayjs, dayjs.Dayjs];\n}\n\n/** The default preset list (English labels), computed relative to `today` so ranges stay fresh. */\nexport function defaultDateRangePickerPresets(today: dayjs.Dayjs = dayjs()): DateRangePickerPreset[] {\n const yesterday = today.subtract(1, 'day');\n return [\n { key: 'yesterday', label: 'Yesterday', range: [yesterday, yesterday] },\n { key: 'lastWeek', label: 'Last week', range: [today.subtract(7, 'day'), yesterday] },\n { key: 'last30Days', label: 'Last 30 days', range: [today.subtract(30, 'day'), yesterday] },\n {\n key: 'lastMonth',\n label: 'Previous month',\n range: [today.subtract(1, 'month').startOf('month'), today.subtract(1, 'month').endOf('month')],\n },\n { key: 'last90Days', label: 'Last 90 days', range: [today.subtract(90, 'day'), yesterday] },\n { key: 'last12Months', label: 'Last 12 months', range: [today.subtract(1, 'year'), yesterday] },\n { key: 'thisMonth', label: 'This month', range: [yesterday.startOf('month'), yesterday] },\n {\n key: 'lastYear',\n label: 'Previous year',\n range: [today.subtract(1, 'year').startOf('year'), today.subtract(1, 'year').endOf('year')],\n },\n ];\n}\n\nfunction timeZoneAbbreviation(timeZone: string): string {\n return (\n new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'short' })\n .formatToParts(new Date())\n .find(({ type }) => type === 'timeZoneName')?.value ?? ''\n );\n}\n\n/**\n * A compact date-range selector for toolbars: a trigger chip showing the selected\n * period that opens a dropdown with preset ranges and a dual-month calendar.\n *\n * @example\n * ```html\n * <ap-date-range-picker\n * [(value)]=\"period\"\n * [maxDate]=\"yesterday\"\n * timeZone=\"Europe/Paris\"\n * (presetSelected)=\"onPreset($event)\" />\n * ```\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-date-range-picker',\n templateUrl: './date-range-picker.component.html',\n styleUrls: ['./date-range-picker.component.scss'],\n imports: [DatepickerDropdownComponent, DropdownTriggerDirective, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apInfo), { provide: LOCALE_CONFIG, useValue: {} }, LocaleService],\n host: {\n class: 'ap-date-range-picker',\n },\n // Emit plain, global `.ap-date-range-picker*` classes (no Angular scoping) so the\n // styling stays framework-agnostic and readable/reusable outside Angular.\n encapsulation: ViewEncapsulation.None,\n})\nexport class DateRangePickerComponent {\n /** The selected period. Supports two-way binding via `[(value)]`. */\n readonly value = model<Period>({ startDate: undefined, endDate: undefined });\n /** The preset ranges listed in the dropdown. Defaults to `defaultDateRangePickerPresets()`. */\n readonly presets = input<DateRangePickerPreset[]>(defaultDateRangePickerPresets());\n /** Earliest selectable date. */\n readonly minDate = input<dayjs.Dayjs | undefined>(undefined);\n /** Latest selectable date. */\n readonly maxDate = input<dayjs.Dayjs | undefined>(undefined);\n /** Maximum number of days between the start and the end date. Undefined means no limit. */\n readonly maxRangeDays = input<number | undefined>(undefined);\n /** Caption shown in the panel when `maxRangeDays` is set. Defaults to an English sentence — pass a translated one. */\n readonly maxRangeDaysHint = input<string | undefined>(undefined);\n /** Locale used for the calendar and the trigger label. */\n readonly locale = input('en');\n readonly firstDayOfWeek = input<FirstDayOfWeek>('monday');\n /** dayjs format of the trigger label. */\n readonly dateFormat = input('ll');\n /** Text shown on the trigger while no period is selected. */\n readonly placeholder = input('Select period');\n /** Side the dropdown opens to when space allows. */\n readonly defaultPosition = input<'right' | 'left'>('right');\n /** Label of the \"Custom\" entry in the preset list. */\n readonly customRangeLabel = input('Custom');\n /** IANA time zone name. When set, a chip with the zone's offset is shown next to the trigger. */\n readonly timeZone = input<string | undefined>(undefined);\n /** Tooltip text of the info icon shown next to the time-zone chip. */\n readonly timeZoneTooltip = input<string | undefined>(undefined);\n readonly disabled = input(false);\n /** Close the dropdown once a full period is selected. When false it stays open until backdrop click or Escape. */\n readonly closeOnSelect = input(true);\n /** Emits the `key` of the preset matching the picked period, or 'custom'. */\n readonly presetSelected = output<string>();\n\n protected readonly DatepickerMode = DatepickerMode;\n\n protected readonly rangesConfig = computed<RangesConfigPresetType>(() =>\n Object.fromEntries(this.presets().map(({ label, range }) => [label, range]))\n );\n\n protected readonly i18n = computed<I18nDatePicker>(() => ({\n ranges: {\n yesterday: 'Yesterday',\n lastWeek: 'Last Week',\n last30Days: 'Last 30 days',\n lastMonth: 'Previous month',\n thisMonth: 'This month',\n },\n customRangeLabel: this.customRangeLabel(),\n }));\n\n protected readonly formattedValue = computed(() => {\n const { startDate, endDate } = this.value();\n if (!startDate || !endDate) {\n return '';\n }\n const format = (date: dayjs.Dayjs) => date.locale(this.locale()).format(this.dateFormat());\n return `${format(startDate)} - ${format(endDate)}`;\n });\n\n protected readonly rangeHint = computed(() => {\n const days = this.maxRangeDays();\n return days ? (this.maxRangeDaysHint() ?? `Maximum period: ${days} days`) : undefined;\n });\n\n protected readonly timeZoneOffset = computed(() => {\n const timeZone = this.timeZone();\n return timeZone ? timeZoneAbbreviation(timeZone) : '';\n });\n\n protected onPeriodSelected(period: Period): void {\n this.value.set(period);\n this.presetSelected.emit(this.matchPresetKey(period));\n }\n\n private matchPresetKey({ startDate, endDate }: Period): string {\n const match = this.presets().find(\n ({ range: [start, end] }) => startDate?.isSame(start, 'day') && endDate?.isSame(end, 'day')\n );\n return match?.key ?? 'custom';\n }\n}\n","<button\n type=\"button\"\n class=\"ap-date-range-picker__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"dropdown.isOpen()\"\n [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n [disabled]=\"disabled()\"\n [apDropdownTrigger]=\"dropdown\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n @if (formattedValue()) {\n <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n } @else {\n <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n }\n <ap-symbol\n class=\"ap-date-range-picker__chevron\"\n size=\"sm\"\n [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n <div\n class=\"ap-date-range-picker__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZone()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip()) {\n <ap-symbol\n class=\"ap-date-range-picker__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZoneTooltip()\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [mode]=\"DatepickerMode.Range\"\n [closeOnSelect]=\"closeOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [defaultPosition]=\"defaultPosition()\"\n [hint]=\"rangeHint()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedPeriod]=\"value()\"\n [showCustomRangeLabel]=\"true\"\n [showRanges]=\"true\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-date-range-picker.mjs","sources":["../../../libs/ui-components/date-range-picker/src/date-range-picker.component.ts","../../../libs/ui-components/date-range-picker/src/date-range-picker.component.html","../../../libs/ui-components/date-range-picker/src/agorapulse-ui-components-date-range-picker.ts"],"sourcesContent":["import { LOCALE_CONFIG, LocaleService } from '@agorapulse/ngx-daterangepicker-material';\nimport {\n DatepickerDropdownComponent,\n DatepickerMode,\n FirstDayOfWeek,\n I18nDatePicker,\n Period,\n RangesConfigPresetType,\n} from '@agorapulse/ui-components/datepicker';\nimport { DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apCalendar, apChevronDown, apChevronUp, apClock, apInfo, SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output, ViewEncapsulation } from '@angular/core';\nimport dayjs from 'dayjs';\n\nexport interface DateRangePickerPreset {\n /** Stable identifier emitted by `presetSelected`, independent of the displayed label. */\n key: string;\n /** The text shown in the preset list. */\n label: string;\n /** The date range this preset selects. */\n range: [dayjs.Dayjs, dayjs.Dayjs];\n}\n\n/** The default preset list (English labels), computed relative to `today` so ranges stay fresh. */\nexport function defaultDateRangePickerPresets(today: dayjs.Dayjs = dayjs()): DateRangePickerPreset[] {\n const yesterday = today.subtract(1, 'day');\n return [\n { key: 'yesterday', label: 'Yesterday', range: [yesterday, yesterday] },\n { key: 'lastWeek', label: 'Last week', range: [today.subtract(7, 'day'), yesterday] },\n { key: 'last30Days', label: 'Last 30 days', range: [today.subtract(30, 'day'), yesterday] },\n {\n key: 'lastMonth',\n label: 'Previous month',\n range: [today.subtract(1, 'month').startOf('month'), today.subtract(1, 'month').endOf('month')],\n },\n { key: 'last90Days', label: 'Last 90 days', range: [today.subtract(90, 'day'), yesterday] },\n { key: 'last12Months', label: 'Last 12 months', range: [today.subtract(1, 'year'), yesterday] },\n { key: 'thisMonth', label: 'This month', range: [yesterday.startOf('month'), yesterday] },\n {\n key: 'lastYear',\n label: 'Previous year',\n range: [today.subtract(1, 'year').startOf('year'), today.subtract(1, 'year').endOf('year')],\n },\n ];\n}\n\nfunction timeZoneAbbreviation(timeZone: string): string {\n return (\n new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'short' })\n .formatToParts(new Date())\n .find(({ type }) => type === 'timeZoneName')?.value ?? ''\n );\n}\n\n/**\n * A compact date-range selector for toolbars: a trigger chip showing the selected\n * period that opens a dropdown with preset ranges and a dual-month calendar.\n *\n * @example\n * ```html\n * <ap-date-range-picker\n * [(value)]=\"period\"\n * [maxDate]=\"yesterday\"\n * timeZone=\"Europe/Paris\"\n * (presetSelected)=\"onPreset($event)\" />\n * ```\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-date-range-picker',\n templateUrl: './date-range-picker.component.html',\n styleUrls: ['./date-range-picker.component.scss'],\n imports: [DatepickerDropdownComponent, DropdownTriggerDirective, SymbolComponent, TooltipDirective],\n providers: [\n withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apInfo),\n { provide: LOCALE_CONFIG, useValue: {} },\n LocaleService,\n ],\n host: {\n class: 'ap-date-range-picker',\n },\n // Emit plain, global `.ap-date-range-picker*` classes (no Angular scoping) so the\n // styling stays framework-agnostic and readable/reusable outside Angular.\n encapsulation: ViewEncapsulation.None,\n})\nexport class DateRangePickerComponent {\n /** The selected period. Supports two-way binding via `[(value)]`. */\n readonly value = model<Period>({ startDate: undefined, endDate: undefined });\n /** The preset ranges listed in the dropdown. Defaults to `defaultDateRangePickerPresets()`. */\n readonly presets = input<DateRangePickerPreset[]>(defaultDateRangePickerPresets());\n /** Earliest selectable date. */\n readonly minDate = input<dayjs.Dayjs | undefined>(undefined);\n /** Latest selectable date. */\n readonly maxDate = input<dayjs.Dayjs | undefined>(undefined);\n /** Maximum number of days between the start and the end date. Undefined means no limit. */\n readonly maxRangeDays = input<number | undefined>(undefined);\n /** Caption shown in the panel when `maxRangeDays` is set. Defaults to an English sentence — pass a translated one. */\n readonly maxRangeDaysHint = input<string | undefined>(undefined);\n /** Locale used for the calendar and the trigger label. */\n readonly locale = input('en');\n readonly firstDayOfWeek = input<FirstDayOfWeek>('monday');\n /** dayjs format of the trigger label. */\n readonly dateFormat = input('ll');\n /** Text shown on the trigger while no period is selected. */\n readonly placeholder = input('Select period');\n /** Side the dropdown opens to when space allows. */\n /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\n /** Label of the \"Custom\" entry in the preset list. */\n readonly customRangeLabel = input('Custom');\n /** IANA time zone name. When set, a chip with the zone's offset is shown next to the trigger. */\n readonly timeZone = input<string | undefined>(undefined);\n /** Tooltip text of the info icon shown next to the time-zone chip. */\n readonly timeZoneTooltip = input<string | undefined>(undefined);\n readonly disabled = input(false);\n /** Close the dropdown once a full period is selected. When false it stays open until backdrop click or Escape. */\n readonly closeOnSelect = input(true);\n /** Emits the `key` of the preset matching the picked period, or 'custom'. */\n readonly presetSelected = output<string>();\n\n protected readonly DatepickerMode = DatepickerMode;\n\n protected readonly rangesConfig = computed<RangesConfigPresetType>(() =>\n Object.fromEntries(this.presets().map(({ label, range }) => [label, range]))\n );\n\n protected readonly i18n = computed<I18nDatePicker>(() => ({\n ranges: {\n yesterday: 'Yesterday',\n lastWeek: 'Last Week',\n last30Days: 'Last 30 days',\n lastMonth: 'Previous month',\n thisMonth: 'This month',\n },\n customRangeLabel: this.customRangeLabel(),\n }));\n\n protected readonly formattedValue = computed(() => {\n const { startDate, endDate } = this.value();\n if (!startDate || !endDate) {\n return '';\n }\n const format = (date: dayjs.Dayjs) => date.locale(this.locale()).format(this.dateFormat());\n return `${format(startDate)} - ${format(endDate)}`;\n });\n\n protected readonly rangeHint = computed(() => {\n const days = this.maxRangeDays();\n return days ? (this.maxRangeDaysHint() ?? `Maximum period: ${days} days`) : undefined;\n });\n\n protected readonly timeZoneOffset = computed(() => {\n const timeZone = this.timeZone();\n return timeZone ? timeZoneAbbreviation(timeZone) : '';\n });\n\n protected onPeriodSelected(period: Period): void {\n this.value.set(period);\n this.presetSelected.emit(this.matchPresetKey(period));\n }\n\n private matchPresetKey({ startDate, endDate }: Period): string {\n const match = this.presets().find(({ range: [start, end] }) => startDate?.isSame(start, 'day') && endDate?.isSame(end, 'day'));\n return match?.key ?? 'custom';\n }\n}\n","<button\n type=\"button\"\n class=\"ap-date-range-picker__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"dropdown.isOpen()\"\n [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n [disabled]=\"disabled()\"\n [apDropdownTrigger]=\"dropdown\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n @if (formattedValue()) {\n <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n } @else {\n <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n }\n <ap-symbol\n class=\"ap-date-range-picker__chevron\"\n size=\"sm\"\n [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n <div\n class=\"ap-date-range-picker__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZone()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip()) {\n <ap-symbol\n class=\"ap-date-range-picker__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"timeZoneTooltip()\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [mode]=\"DatepickerMode.Range\"\n [closeOnSelect]=\"closeOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [hint]=\"rangeHint()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedPeriod]=\"value()\"\n [showCustomRangeLabel]=\"true\"\n [showRanges]=\"true\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -351,8 +351,9 @@ class DatepickerDropdownComponent {
|
|
|
351
351
|
...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
|
|
352
352
|
disabled = input(false, /* @ts-ignore */
|
|
353
353
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
354
|
-
|
|
355
|
-
|
|
354
|
+
/** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
|
|
355
|
+
placement = input(/* @ts-ignore */
|
|
356
|
+
...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
356
357
|
opened = output();
|
|
357
358
|
closed = output();
|
|
358
359
|
dateSelected = output();
|
|
@@ -365,7 +366,7 @@ class DatepickerDropdownComponent {
|
|
|
365
366
|
return;
|
|
366
367
|
this.overlay.open(template, triggerElement, {
|
|
367
368
|
showBackdrop: this.showBackdrop(),
|
|
368
|
-
|
|
369
|
+
placement: this.placement(),
|
|
369
370
|
onClose: () => this.close(),
|
|
370
371
|
});
|
|
371
372
|
this.opened.emit();
|
|
@@ -397,12 +398,12 @@ class DatepickerDropdownComponent {
|
|
|
397
398
|
}
|
|
398
399
|
}
|
|
399
400
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerDropdownComponent, isStandalone: true, selector: "ap-datepicker-dropdown", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null },
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerDropdownComponent, isStandalone: true, selector: "ap-datepicker-dropdown", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerDropdownTemplate", first: true, predicate: ["datepickerDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #datepickerDropdownTemplate>\n <div\n class=\"ap-datepicker-dropdown__content\"\n role=\"dialog\"\n aria-label=\"Datepicker\"\n tabindex=\"-1\">\n <ap-datepicker\n apStopPropagation\n [dateLimit]=\"dateLimit()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"effectiveI18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n [showRanges]=\"showRanges()\"\n (dateSelected)=\"onDateSelected($event)\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n @if (hint()) {\n <div class=\"ap-datepicker-dropdown__hint\">{{ hint() }}</div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-datepicker-dropdown__hint{border-top:1px solid var(--ref-color-grey-10);color:var(--sys-text-color-light);font-size:var(--sys-text-style-caption-size);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs);text-align:center}\n"], dependencies: [{ kind: "component", type: DatepickerComponent, selector: "ap-datepicker", inputs: ["firstDayOfWeek", "i18n", "locale", "maxDate", "minDate", "mode", "selectedDate", "selectedDates", "selectedPeriod", "dateLimit", "showRanges", "showCustomRangeLabel", "rangesConfig"], outputs: ["dateSelected", "periodSelected"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
401
402
|
}
|
|
402
403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerDropdownComponent, decorators: [{
|
|
403
404
|
type: Component,
|
|
404
405
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker-dropdown', imports: [DatepickerComponent, StopPropagationDirective], template: "<ng-template #datepickerDropdownTemplate>\n <div\n class=\"ap-datepicker-dropdown__content\"\n role=\"dialog\"\n aria-label=\"Datepicker\"\n tabindex=\"-1\">\n <ap-datepicker\n apStopPropagation\n [dateLimit]=\"dateLimit()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"effectiveI18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n [showRanges]=\"showRanges()\"\n (dateSelected)=\"onDateSelected($event)\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n @if (hint()) {\n <div class=\"ap-datepicker-dropdown__hint\">{{ hint() }}</div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-datepicker-dropdown__hint{border-top:1px solid var(--ref-color-grey-10);color:var(--sys-text-color-light);font-size:var(--sys-text-style-caption-size);margin-top:var(--ref-spacing-xxs);padding-top:var(--ref-spacing-xxs);text-align:center}\n"] }]
|
|
405
|
-
}], propDecorators: { datepickerDropdownTemplate: [{ type: i0.ViewChild, args: ['datepickerDropdownTemplate', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }],
|
|
406
|
+
}], propDecorators: { datepickerDropdownTemplate: [{ type: i0.ViewChild, args: ['datepickerDropdownTemplate', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], periodSelected: [{ type: i0.Output, args: ["periodSelected"] }] } });
|
|
406
407
|
|
|
407
408
|
const defaultPeriodSelected = { startDate: undefined, endDate: undefined };
|
|
408
409
|
class InputDatepickerComponent {
|
|
@@ -440,8 +441,9 @@ class InputDatepickerComponent {
|
|
|
440
441
|
...(ngDevMode ? [{ debugName: "rangesConfig" }] : /* istanbul ignore next */ []));
|
|
441
442
|
showBackdrop = input(true, /* @ts-ignore */
|
|
442
443
|
...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
|
|
443
|
-
|
|
444
|
-
|
|
444
|
+
/** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
|
|
445
|
+
placement = input(/* @ts-ignore */
|
|
446
|
+
...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
445
447
|
/** Show a clear (X) inside the input when a value is selected. Off by default. */
|
|
446
448
|
clearable = input(false, /* @ts-ignore */
|
|
447
449
|
...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
|
|
@@ -515,7 +517,7 @@ class InputDatepickerComponent {
|
|
|
515
517
|
this.isDisabled.set(isDisabled);
|
|
516
518
|
}
|
|
517
519
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
518
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InputDatepickerComponent, isStandalone: true, selector: "ap-input-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null },
|
|
520
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InputDatepickerComponent, isStandalone: true, selector: "ap-input-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { periodChanged: "periodChanged", dateSelected: "dateSelected" }, providers: [withSymbols(apCalendar, apChevronDown, apClose)], ngImport: i0, template: "<ap-form-field>\n @let vLabel = label();\n @if (vLabel) {\n <label for=\"datepicker\">\n {{ vLabel }}\n </label>\n }\n <ap-input-group\n [apDropdownTrigger]=\"datepickerDropdown\"\n symbolPosition=\"left\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n <input\n apInput\n id=\"datepicker\"\n readonly\n (blur)=\"onTouched()\"\n [disabled]=\"disabled() || isDisabled()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayedDate()\"\n type=\"text\" />\n @if (clearable() && displayedDate() && !disabled() && !isDisabled()) {\n <ap-icon-button\n class=\"ap-input-datepicker__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear date range\"\n (click)=\"onClear($event)\" />\n }\n </ap-input-group>\n</ap-form-field>\n\n<ap-datepicker-dropdown\n #datepickerDropdown\n [placement]=\"placement()\"\n [disabled]=\"disabled() || isDisabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"periodRange()\"\n [showBackdrop]=\"showBackdrop()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (dateSelected)=\"dateSelected.emit($event)\"\n (periodSelected)=\"onPeriodSelected($event)\"\n [showRanges]=\"showRanges()\" />\n", styles: [".ap-input-datepicker__clear ::ng-deep .icon-button:hover:not(.stroked):not(.locked),.ap-input-datepicker__clear ::ng-deep .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-input-datepicker__clear ::ng-deep .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-input-datepicker__clear:hover ::ng-deep .icon-button ap-symbol{color:var(--sys-color-error-text)}:host ::ng-deep .ap-input-group:has(.ap-input-datepicker__clear){padding-right:0}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "firstDayOfWeek", "locale", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
519
521
|
}
|
|
520
522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputDatepickerComponent, decorators: [{
|
|
521
523
|
type: Component,
|
|
@@ -528,8 +530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
528
530
|
SymbolComponent,
|
|
529
531
|
FormFieldComponent,
|
|
530
532
|
SymbolComponent,
|
|
531
|
-
], providers: [withSymbols(apCalendar, apChevronDown, apClose)], template: "<ap-form-field>\n @let vLabel = label();\n @if (vLabel) {\n <label for=\"datepicker\">\n {{ vLabel }}\n </label>\n }\n <ap-input-group\n [apDropdownTrigger]=\"datepickerDropdown\"\n symbolPosition=\"left\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n <input\n apInput\n id=\"datepicker\"\n readonly\n (blur)=\"onTouched()\"\n [disabled]=\"disabled() || isDisabled()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayedDate()\"\n type=\"text\" />\n @if (clearable() && displayedDate() && !disabled() && !isDisabled()) {\n <ap-icon-button\n class=\"ap-input-datepicker__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear date range\"\n (click)=\"onClear($event)\" />\n }\n </ap-input-group>\n</ap-form-field>\n\n<ap-datepicker-dropdown\n #datepickerDropdown\n [
|
|
532
|
-
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }],
|
|
533
|
+
], providers: [withSymbols(apCalendar, apChevronDown, apClose)], template: "<ap-form-field>\n @let vLabel = label();\n @if (vLabel) {\n <label for=\"datepicker\">\n {{ vLabel }}\n </label>\n }\n <ap-input-group\n [apDropdownTrigger]=\"datepickerDropdown\"\n symbolPosition=\"left\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n <input\n apInput\n id=\"datepicker\"\n readonly\n (blur)=\"onTouched()\"\n [disabled]=\"disabled() || isDisabled()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayedDate()\"\n type=\"text\" />\n @if (clearable() && displayedDate() && !disabled() && !isDisabled()) {\n <ap-icon-button\n class=\"ap-input-datepicker__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear date range\"\n (click)=\"onClear($event)\" />\n }\n </ap-input-group>\n</ap-form-field>\n\n<ap-datepicker-dropdown\n #datepickerDropdown\n [placement]=\"placement()\"\n [disabled]=\"disabled() || isDisabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"periodRange()\"\n [showBackdrop]=\"showBackdrop()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (dateSelected)=\"dateSelected.emit($event)\"\n (periodSelected)=\"onPeriodSelected($event)\"\n [showRanges]=\"showRanges()\" />\n", styles: [".ap-input-datepicker__clear ::ng-deep .icon-button:hover:not(.stroked):not(.locked),.ap-input-datepicker__clear ::ng-deep .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-input-datepicker__clear ::ng-deep .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-input-datepicker__clear:hover ::ng-deep .icon-button ap-symbol{color:var(--sys-color-error-text)}:host ::ng-deep .ap-input-group:has(.ap-input-datepicker__clear){padding-right:0}\n"] }]
|
|
534
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], periodChanged: [{ type: i0.Output, args: ["periodChanged"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
|
|
533
535
|
|
|
534
536
|
/**
|
|
535
537
|
* Generated bundle index. Do not edit.
|