@agorapulse/ui-components 22.2.9 → 22.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-22.2.11.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +16 -6
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-floating.mjs +3 -0
- package/fesm2022/agorapulse-ui-components-floating.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-group.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-input-group.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-datepicker.d.ts +4 -2
- package/agorapulse-ui-components-22.2.9.tgz +0 -0
|
Binary file
|
|
@@ -705,6 +705,10 @@ class DatepickerSelectComponent {
|
|
|
705
705
|
/** Disables the field. A form writes here too, rather than to a second flag of its own. */
|
|
706
706
|
disabled = input(false, /* @ts-ignore */
|
|
707
707
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
708
|
+
invalid = input(false, /* @ts-ignore */
|
|
709
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
710
|
+
touched = input(false, /* @ts-ignore */
|
|
711
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
708
712
|
minDate = input(undefined, /* @ts-ignore */
|
|
709
713
|
...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
710
714
|
maxDate = input(undefined, /* @ts-ignore */
|
|
@@ -838,7 +842,7 @@ class DatepickerSelectComponent {
|
|
|
838
842
|
return startDate !== undefined || endDate !== undefined;
|
|
839
843
|
}, /* @ts-ignore */
|
|
840
844
|
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
841
|
-
/** The field's text. Empty in Multiple, where the field shows chips instead. */
|
|
845
|
+
/** The field's text: a one-day period reads as that day. Empty in Multiple, where the field shows chips instead. */
|
|
842
846
|
displayed = computed(() => {
|
|
843
847
|
const format = (date) => date.locale(this.locale()).format(this.dateFormat());
|
|
844
848
|
const mode = this.mode();
|
|
@@ -848,7 +852,10 @@ class DatepickerSelectComponent {
|
|
|
848
852
|
}
|
|
849
853
|
if (mode === DatepickerMode.Range) {
|
|
850
854
|
const { startDate, endDate } = this.selectedPeriod();
|
|
851
|
-
|
|
855
|
+
if (!startDate || !endDate) {
|
|
856
|
+
return '';
|
|
857
|
+
}
|
|
858
|
+
return startDate.isSame(endDate, 'day') ? format(startDate) : `${format(startDate)} - ${format(endDate)}`;
|
|
852
859
|
}
|
|
853
860
|
return '';
|
|
854
861
|
}, /* @ts-ignore */
|
|
@@ -889,10 +896,12 @@ class DatepickerSelectComponent {
|
|
|
889
896
|
}
|
|
890
897
|
onPanelOpened() {
|
|
891
898
|
this.isOpen.set(true);
|
|
899
|
+
this.touch.emit();
|
|
892
900
|
this.opened.emit();
|
|
893
901
|
}
|
|
894
902
|
onPanelClosed() {
|
|
895
903
|
this.isOpen.set(false);
|
|
904
|
+
this.touch.emit();
|
|
896
905
|
this.closed.emit();
|
|
897
906
|
}
|
|
898
907
|
/** The preset is stripped from the value: it says where the value came from, it is not part of it. */
|
|
@@ -904,6 +913,7 @@ class DatepickerSelectComponent {
|
|
|
904
913
|
/** Clears the selection. Stops propagation so the panel does not reopen. */
|
|
905
914
|
clear(event) {
|
|
906
915
|
event.stopPropagation();
|
|
916
|
+
this.touch.emit();
|
|
907
917
|
this.commit(undefined);
|
|
908
918
|
}
|
|
909
919
|
/** The single write point: the signal and the form get the same value, and a disabled field none. */
|
|
@@ -935,13 +945,13 @@ class DatepickerSelectComponent {
|
|
|
935
945
|
return value !== undefined && isPeriod(value) && value.startDate !== undefined && value.endDate !== undefined;
|
|
936
946
|
}
|
|
937
947
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
938
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerSelectComponent, isStandalone: true, selector: "ap-datepicker-select", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, panelHint: { classPropertyName: "panelHint", publicName: "panelHint", isSignal: true, isRequired: false, transformFunction: null }, panelFooter: { classPropertyName: "panelFooter", publicName: "panelFooter", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange", selectionRejected: "selectionRejected", opened: "opened", closed: "closed" }, host: { properties: { "class.ap-datepicker-select--open": "isOpen()", "class.ap-datepicker-select--multiple": "mode() === DatepickerMode.Multiple" }, classAttribute: "ap-datepicker-select" }, providers: [
|
|
948
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerSelectComponent, isStandalone: true, selector: "ap-datepicker-select", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, panelHint: { classPropertyName: "panelHint", publicName: "panelHint", isSignal: true, isRequired: false, transformFunction: null }, panelFooter: { classPropertyName: "panelFooter", publicName: "panelFooter", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange", selectionRejected: "selectionRejected", opened: "opened", closed: "closed" }, host: { properties: { "class.ap-datepicker-select--open": "isOpen()", "class.ap-datepicker-select--multiple": "mode() === DatepickerMode.Multiple" }, classAttribute: "ap-datepicker-select" }, providers: [
|
|
939
949
|
withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apClose, apInfo),
|
|
940
950
|
// The vendored DaterangepickerComponent the panel renders injects LocaleService, and the plain
|
|
941
951
|
// NgxDaterangepickerMd module provides none — only its forRoot() does.
|
|
942
952
|
{ provide: LOCALE_CONFIG, useValue: {} },
|
|
943
953
|
LocaleService,
|
|
944
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select
|
|
954
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [class.invalid]=\"invalid() && touched()\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"invalid() && touched()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select .ap-input-group:where(:not(.disabled):focus-within:not(:has(:focus-visible))){border-color:var(--ap-input-group-rest-border-color)}.ap-datepicker-select .ap-input-group:where(:not(.disabled):focus-within:not(:has(:focus-visible))):where(:hover){border-color:var(--comp-input-border-hover-color)}.ap-datepicker-select--open .ap-input-group{border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "panelFooter", "firstDayOfWeek", "locale", "presets", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition", "disabled"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
945
955
|
}
|
|
946
956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, decorators: [{
|
|
947
957
|
type: Component,
|
|
@@ -966,8 +976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
966
976
|
class: 'ap-datepicker-select',
|
|
967
977
|
'[class.ap-datepicker-select--open]': 'isOpen()',
|
|
968
978
|
'[class.ap-datepicker-select--multiple]': 'mode() === DatepickerMode.Multiple',
|
|
969
|
-
}, encapsulation: ViewEncapsulation.None, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select
|
|
970
|
-
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], panelHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
|
|
979
|
+
}, encapsulation: ViewEncapsulation.None, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [class.invalid]=\"invalid() && touched()\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-invalid]=\"invalid() && touched()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select .ap-input-group:where(:not(.disabled):focus-within:not(:has(:focus-visible))){border-color:var(--ap-input-group-rest-border-color)}.ap-datepicker-select .ap-input-group:where(:not(.disabled):focus-within:not(:has(:focus-visible))):where(:hover){border-color:var(--comp-input-border-hover-color)}.ap-datepicker-select--open .ap-input-group{border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"] }]
|
|
980
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], panelHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
|
|
971
981
|
|
|
972
982
|
/**
|
|
973
983
|
* Generated bundle index. Do not edit.
|