@agorapulse/ui-components 22.2.11 → 22.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/agorapulse-ui-components-22.3.0.tgz +0 -0
  2. package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +5 -10
  3. package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
  4. package/fesm2022/agorapulse-ui-components-datepicker.mjs +16 -4
  5. package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
  6. package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +1 -1
  7. package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
  8. package/fesm2022/agorapulse-ui-components-floating.mjs +6 -1
  9. package/fesm2022/agorapulse-ui-components-floating.mjs.map +1 -1
  10. package/fesm2022/agorapulse-ui-components-nav-selector.mjs +1 -1
  11. package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
  12. package/package.json +2 -2
  13. package/types/agorapulse-ui-components-action-dropdown.d.ts +3 -6
  14. package/types/agorapulse-ui-components-datepicker.d.ts +3 -0
  15. package/agorapulse-ui-components-22.2.11.tgz +0 -0
package/fesm2022/agorapulse-ui-components-action-dropdown.mjs CHANGED
@@ -59,7 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
59
59
 
60
60
  /**
61
61
  * A dropdown component that displays a list of actionable items with support for icons,
62
- * badges, tooltips, and keyboard navigation.
62
+ * badges, tooltips, and keyboard navigation. Its width follows its longest label between 180 and
63
+ * 340 px; past 340 px, labels ellipsize.
63
64
  */
64
65
  class ActionDropdownComponent {
65
66
  symbolRegistry = inject(SymbolRegistry);
@@ -70,12 +71,6 @@ class ActionDropdownComponent {
70
71
  /** Array of items to display in the dropdown menu */
71
72
  items = input([], /* @ts-ignore */
72
73
  ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
73
- /** Whether to enable large mode styling for the dropdown */
74
- largeModeEnabled = input(false, /* @ts-ignore */
75
- ...(ngDevMode ? [{ debugName: "largeModeEnabled" }] : /* istanbul ignore next */ []));
76
- /** Custom width for the dropdown menu in pixels */
77
- customWidth = input(null, /* @ts-ignore */
78
- ...(ngDevMode ? [{ debugName: "customWidth" }] : /* istanbul ignore next */ []));
79
74
  /** Whether to show a backdrop that closes the dropdown when clicked */
80
75
  showBackdrop = input(true, /* @ts-ignore */
81
76
  ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
@@ -155,12 +150,12 @@ class ActionDropdownComponent {
155
150
  this.keyManager.onKeydown(event);
156
151
  }
157
152
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
158
- 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: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "menuItems", predicate: DropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.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-visible{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}.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:focus-visible{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-visible{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-visible{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: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "directive", type: DropdownOptionDirective, selector: "[apDropdownOption]", inputs: ["apDropdownOption", "apDropdownOptionDisabled"] }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { 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", "apTooltipArrow", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
153
+ 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 }, 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: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "menuItems", predicate: DropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto;width:max-content;min-width:min(180px,var(--ap-floating-available-width, 180px));max-width:min(340px,var(--ap-floating-available-width, 340px))}.ap-action-dropdown__content .ap-action-dropdown__item--has-description{min-width:min(250px,var(--ap-floating-available-width, 250px))}.ap-action-dropdown__content .ap-action-dropdown__item-description{contain:inline-size}.ap-action-dropdown__content:focus-visible{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}.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:focus-visible{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-visible{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-visible{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: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "directive", type: DropdownOptionDirective, selector: "[apDropdownOption]", inputs: ["apDropdownOption", "apDropdownOptionDisabled"] }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { 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", "apTooltipArrow", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
159
154
  }
160
155
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, decorators: [{
161
156
  type: Component,
162
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.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-visible{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}.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:focus-visible{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-visible{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-visible{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"] }]
163
- }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { 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"] }], menuItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropdownOptionDirective), { isSignal: true }] }] } });
157
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto;width:max-content;min-width:min(180px,var(--ap-floating-available-width, 180px));max-width:min(340px,var(--ap-floating-available-width, 340px))}.ap-action-dropdown__content .ap-action-dropdown__item--has-description{min-width:min(250px,var(--ap-floating-available-width, 250px))}.ap-action-dropdown__content .ap-action-dropdown__item-description{contain:inline-size}.ap-action-dropdown__content:focus-visible{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}.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:focus-visible{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-visible{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-visible{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"] }]
158
+ }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", 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"] }], menuItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropdownOptionDirective), { isSignal: true }] }] } });
164
159
 
165
160
  /**
166
161
  * Generated bundle index. Do not edit.
package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map CHANGED
@@ -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 { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DropdownOptionDirective, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\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 computed,\n contentChild,\n effect,\n inject,\n Injector,\n input,\n output,\n signal,\n TemplateRef,\n untracked,\n viewChild,\n viewChildren,\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, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly panel = viewChild(DropdownPanelComponent);\n\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 /** 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 private readonly menuItems = viewChildren(DropdownOptionDirective);\n\n /** Mirrors the key manager's active index, so the roving tabindex can be bound. */\n protected readonly activeIndex = signal(-1);\n\n private readonly keyManager = new FocusKeyManager(this.menuItems, inject(Injector)).withWrap().withTypeAhead().withHomeAndEnd();\n\n private primed = false;\n\n readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n this.keyManager.change.subscribe(index => this.activeIndex.set(index));\n // APG: Tab leaves a menu and closes it, rather than walking its items.\n this.keyManager.tabOut.subscribe(() => this.close());\n\n // The items only exist once the panel has stamped its template.\n effect(() => {\n const open = this.isOpen();\n const items = this.menuItems();\n untracked(() => {\n if (open && items.length > 0 && !this.primed) {\n this.primed = true;\n this.keyManager.setFirstItemActive();\n }\n });\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const panel = this.panel();\n if (this.disabled() || this.isOpen() || !panel) return;\n\n panel.open(triggerElement);\n this.opened.emit();\n }\n\n close(): void {\n this.panel()?.close();\n }\n\n protected onPanelClosed(): void {\n this.primed = false;\n this.activeIndex.set(-1);\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 /** Enter and Space need nothing: focus is real, so the button fires its own click. Escape belongs to the panel. */\n onKeyDown(event: KeyboardEvent): void {\n this.keyManager.onKeydown(event);\n }\n}\n","<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\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 { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DropdownOptionDirective, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\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 computed,\n contentChild,\n effect,\n inject,\n Injector,\n input,\n output,\n signal,\n TemplateRef,\n untracked,\n viewChild,\n viewChildren,\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. Its width follows its longest label between 180 and\n * 340 px; past 340 px, labels ellipsize.\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, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly panel = viewChild(DropdownPanelComponent);\n\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /** Array of items to display in the dropdown menu */\n items = input<ActionDropdownItem[]>([]);\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 /** 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 private readonly menuItems = viewChildren(DropdownOptionDirective);\n\n /** Mirrors the key manager's active index, so the roving tabindex can be bound. */\n protected readonly activeIndex = signal(-1);\n\n private readonly keyManager = new FocusKeyManager(this.menuItems, inject(Injector)).withWrap().withTypeAhead().withHomeAndEnd();\n\n private primed = false;\n\n readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n this.keyManager.change.subscribe(index => this.activeIndex.set(index));\n // APG: Tab leaves a menu and closes it, rather than walking its items.\n this.keyManager.tabOut.subscribe(() => this.close());\n\n // The items only exist once the panel has stamped its template.\n effect(() => {\n const open = this.isOpen();\n const items = this.menuItems();\n untracked(() => {\n if (open && items.length > 0 && !this.primed) {\n this.primed = true;\n this.keyManager.setFirstItemActive();\n }\n });\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const panel = this.panel();\n if (this.disabled() || this.isOpen() || !panel) return;\n\n panel.open(triggerElement);\n this.opened.emit();\n }\n\n close(): void {\n this.panel()?.close();\n }\n\n protected onPanelClosed(): void {\n this.primed = false;\n this.activeIndex.set(-1);\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 /** Enter and Space need nothing: focus is real, so the button fires its own click. Escape belongs to the panel. */\n onKeyDown(event: KeyboardEvent): void {\n this.keyManager.onKeydown(event);\n }\n}\n","<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
package/fesm2022/agorapulse-ui-components-datepicker.mjs CHANGED
@@ -406,8 +406,18 @@ class DatepickerComponent {
406
406
  const chosen = this.datepickerRef?.chosenRange;
407
407
  return chosen ? this.presets().find(preset => preset.label === chosen) : undefined;
408
408
  }
409
+ /** The vendor's own arrows stop at `minDate`/`maxDate`; ours replace them and must stop there too. */
410
+ get canGoToPreviousMonth() {
411
+ return !this.minDateValue || this.datepickerRef.leftCalendar.month.isAfter(this.minDateValue, 'month');
412
+ }
413
+ get canGoToNextMonth() {
414
+ const lastMonth = this.mode === DatepickerMode.Range ? this.datepickerRef.rightCalendar.month : this.datepickerRef.leftCalendar.month;
415
+ return !this.maxDateValue || lastMonth.isBefore(this.maxDateValue, 'month');
416
+ }
409
417
  onNextMonth() {
410
- this.datepickerRef.clickNext(SideEnum.right);
418
+ if (this.canGoToNextMonth) {
419
+ this.datepickerRef.clickNext(SideEnum.right);
420
+ }
411
421
  }
412
422
  onLeftMonthPicked(picked) {
413
423
  this.moveCalendarTo(picked, SideEnum.left);
@@ -425,7 +435,9 @@ class DatepickerComponent {
425
435
  this.changeDetectorRef.detectChanges();
426
436
  }
427
437
  onPreviousMonth() {
428
- this.datepickerRef.clickPrev(SideEnum.left);
438
+ if (this.canGoToPreviousMonth) {
439
+ this.datepickerRef.clickPrev(SideEnum.left);
440
+ }
429
441
  }
430
442
  /**
431
443
  * Ugly hack used here to open the calendar on the right day if they are selected dates
@@ -444,11 +456,11 @@ class DatepickerComponent {
444
456
  this.changeDetectorRef.detectChanges();
445
457
  }
446
458
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
447
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus:not(:disabled):not(:active):not(.loading){outline:none}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus-visible:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus-visible:not(:disabled):not(:active):not(.loading){box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: DatepickerMonthPickerComponent, selector: "ap-datepicker-month-picker", inputs: ["month", "year", "locale", "minDate", "maxDate"], outputs: ["monthSelected"] }, { 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: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
459
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n [disabled]=\"!canGoToPreviousMonth\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n [disabled]=\"!canGoToNextMonth\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n [disabled]=\"!canGoToNextMonth\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus:not(:disabled):not(:active):not(.loading){outline:none}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus-visible:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus-visible:not(:disabled):not(:active):not(.loading){box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: DatepickerMonthPickerComponent, selector: "ap-datepicker-month-picker", inputs: ["month", "year", "locale", "minDate", "maxDate"], outputs: ["monthSelected"] }, { 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: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
448
460
  }
449
461
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerComponent, decorators: [{
450
462
  type: Component,
451
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [ButtonComponent, DatepickerMonthPickerComponent, DropdownTriggerDirective, IconButtonComponent, NgxDaterangepickerMd], template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus:not(:disabled):not(:active):not(.loading){outline:none}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus-visible:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus-visible:not(:disabled):not(:active):not(.loading){box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
463
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [ButtonComponent, DatepickerMonthPickerComponent, DropdownTriggerDirective, IconButtonComponent, NgxDaterangepickerMd], template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n [disabled]=\"!canGoToPreviousMonth\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n [disabled]=\"!canGoToNextMonth\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n [disabled]=\"!canGoToNextMonth\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus:not(:disabled):not(:active):not(.loading){outline:none}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus-visible:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus-visible:not(:disabled):not(:active):not(.loading){box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
452
464
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SymbolRegistry }], propDecorators: { datepickerRef: [{
453
465
  type: ViewChild,
454
466
  args: ['datepickerRef']