@agorapulse/ui-components 22.3.0 → 22.4.1
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.4.1.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs +20 -33
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-directives.mjs +79 -15
- package/fesm2022/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +3 -108
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-overflow-base.mjs +193 -0
- package/fesm2022/agorapulse-ui-components-overflow-base.mjs.map +1 -0
- package/fesm2022/agorapulse-ui-components-overflow-list.mjs +89 -0
- package/fesm2022/agorapulse-ui-components-overflow-list.mjs.map +1 -0
- package/fesm2022/agorapulse-ui-components-select.mjs +14 -12
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs +9 -5
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components.mjs +9 -7
- package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
- package/package.json +10 -2
- package/types/agorapulse-ui-components-avatar-group.d.ts +12 -5
- package/types/agorapulse-ui-components-directives.d.ts +19 -4
- package/types/agorapulse-ui-components-labels.d.ts +2 -35
- package/types/agorapulse-ui-components-overflow-base.d.ts +124 -0
- package/types/agorapulse-ui-components-overflow-list.d.ts +80 -0
- package/types/agorapulse-ui-components-select.d.ts +8 -11
- package/types/agorapulse-ui-components-tooltip.d.ts +3 -3
- package/types/agorapulse-ui-components.d.ts +12 -10
- package/agorapulse-ui-components-22.3.0.tgz +0 -0
|
Binary file
|
|
@@ -1,54 +1,41 @@
|
|
|
1
1
|
import { AvatarComponent } from '@agorapulse/ui-components/avatar';
|
|
2
|
+
import { OverflowBaseComponent, OverflowBaseItemDirective, OverflowBaseMoreDirective } from '@agorapulse/ui-components/overflow-base';
|
|
2
3
|
import { CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
3
4
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input,
|
|
5
|
+
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
6
|
|
|
7
|
+
/** How far each avatar overlaps its neighbour, in pixels. */
|
|
8
|
+
const AVATAR_OVERLAP = 2;
|
|
9
|
+
/**
|
|
10
|
+
* A stack of avatars, then a counter whose `LIST` tooltip names the hidden ones.
|
|
11
|
+
*
|
|
12
|
+
* It shows `maxAvatars` at most, and fewer when its width runs short. It takes the width its container
|
|
13
|
+
* gives it: in a flex parent, `flex: 1; min-width: 0` lets it collapse on the width; without them it
|
|
14
|
+
* keeps the width of its avatars and only `maxAvatars` caps them.
|
|
15
|
+
*/
|
|
6
16
|
class AvatarGroupComponent {
|
|
7
|
-
avatars = input.required(
|
|
17
|
+
avatars = input.required(/* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [{ debugName: "avatars" }] : /* istanbul ignore next */ []));
|
|
8
19
|
size = input(24, /* @ts-ignore */
|
|
9
20
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
21
|
+
/** Most avatars shown; a narrower container shows fewer, the others go into the counter. */
|
|
10
22
|
maxAvatars = input(5, /* @ts-ignore */
|
|
11
23
|
...(ngDevMode ? [{ debugName: "maxAvatars" }] : /* istanbul ignore next */ []));
|
|
12
24
|
showAvatarDescriptionTooltip = input(true, /* @ts-ignore */
|
|
13
25
|
...(ngDevMode ? [{ debugName: "showAvatarDescriptionTooltip" }] : /* istanbul ignore next */ []));
|
|
14
|
-
|
|
15
|
-
const max = this.maxAvatars();
|
|
16
|
-
const all = this.avatars();
|
|
17
|
-
return all.slice(0, max);
|
|
18
|
-
}, /* @ts-ignore */
|
|
19
|
-
...(ngDevMode ? [{ debugName: "visibleAvatars" }] : /* istanbul ignore next */ []));
|
|
20
|
-
// avatars not displayed in the group but shown in the tooltip
|
|
21
|
-
tooltipAvatars = computed(() => {
|
|
22
|
-
const max = this.maxAvatars();
|
|
23
|
-
const all = this.avatars();
|
|
24
|
-
return all.slice(max);
|
|
25
|
-
}, /* @ts-ignore */
|
|
26
|
-
...(ngDevMode ? [{ debugName: "tooltipAvatars" }] : /* istanbul ignore next */ []));
|
|
27
|
-
overflowCount = computed(() => {
|
|
28
|
-
const total = this.avatars().length;
|
|
29
|
-
const max = this.maxAvatars();
|
|
30
|
-
if (total <= max) {
|
|
31
|
-
return 0;
|
|
32
|
-
}
|
|
33
|
-
const result = total - max;
|
|
34
|
-
if (result > 99) {
|
|
35
|
-
return 99;
|
|
36
|
-
}
|
|
37
|
-
return result;
|
|
38
|
-
}, /* @ts-ignore */
|
|
39
|
-
...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
|
|
40
|
-
hasOverflow = computed(() => this.overflowCount() > 0, /* @ts-ignore */
|
|
41
|
-
...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
|
|
26
|
+
overlapGap = -AVATAR_OVERLAP;
|
|
42
27
|
CustomTooltipType = CustomTooltipType;
|
|
28
|
+
avatarText = (avatar) => avatar.username ?? avatar.alt ?? '';
|
|
29
|
+
asListItem = (avatar) => avatar;
|
|
43
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: AvatarGroupComponent, isStandalone: true, selector: "ap-avatar-group", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxAvatars: { classPropertyName: "maxAvatars", publicName: "maxAvatars", isSignal: true, isRequired: false, transformFunction: null }, showAvatarDescriptionTooltip: { classPropertyName: "showAvatarDescriptionTooltip", publicName: "showAvatarDescriptionTooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "\"Avatar group\"" } }, ngImport: i0, template: "<ap-overflow-base\n trigger=\"click\"\n [items]=\"avatars()\"\n [max]=\"maxAvatars()\"\n [gap]=\"overlapGap\"\n [itemText]=\"avatarText\"\n [tooltipListItem]=\"asListItem\">\n <ng-template\n let-avatar\n let-index=\"index\"\n let-count=\"count\"\n [apOverflowBaseItem]=\"avatars()\">\n <ap-avatar\n apTooltip\n [apTooltipDisabled]=\"!showAvatarDescriptionTooltip()\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [style.z-index]=\"count - index\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n </ng-template>\n <ng-template\n let-count\n apOverflowBaseMore>\n <div\n class=\"overflow-counter\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ count > 99 ? 99 : count }}</span>\n </div>\n </ng-template>\n</ap-overflow-base>\n", styles: [":host{display:flex}ap-overflow-base{flex:1;min-width:0;padding-inline-start:2px}ap-avatar{position:relative;cursor:default}.overflow-counter{display:flex;align-items:center;justify-content:center;background-color:var(--ref-color-grey-10);border-radius:24px;transition:background-color var(--ref-animation-short);cursor:pointer}.overflow-counter:hover{background-color:var(--ref-color-grey-20)}.overflow-counter:active{background-color:var(--ref-color-grey-40)}.overflow-text{color:var(--ref-color-grey-80);font-family:var(--ref-font-family);font-weight:700;line-height:1em;text-align:center}.overflow-counter[data-size=\"16\"]{width:16px;height:16px}.overflow-counter[data-size=\"16\"] .overflow-text{font-size:8px}.overflow-counter[data-size=\"24\"]{width:24px;height:24px}.overflow-counter[data-size=\"24\"] .overflow-text{font-size:10px}.overflow-counter[data-size=\"32\"]{width:32px;height:32px}.overflow-counter[data-size=\"32\"] .overflow-text{font-size:12px}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: OverflowBaseComponent, selector: "ap-overflow-base", inputs: ["items", "mode", "trigger", "max", "gap", "itemText", "tooltipListItem", "trackBy"] }, { kind: "directive", type: OverflowBaseItemDirective, selector: "ng-template[apOverflowBaseItem]", inputs: ["apOverflowBaseItem"] }, { kind: "directive", type: OverflowBaseMoreDirective, selector: "ng-template[apOverflowBaseMore]" }, { 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 });
|
|
45
32
|
}
|
|
46
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarGroupComponent, decorators: [{
|
|
47
34
|
type: Component,
|
|
48
|
-
args: [{ selector: 'ap-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent, TooltipDirective], host: {
|
|
35
|
+
args: [{ selector: 'ap-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent, OverflowBaseComponent, OverflowBaseItemDirective, OverflowBaseMoreDirective, TooltipDirective], host: {
|
|
49
36
|
role: 'group',
|
|
50
37
|
'[attr.aria-label]': '"Avatar group"',
|
|
51
|
-
}, template: "<
|
|
38
|
+
}, template: "<ap-overflow-base\n trigger=\"click\"\n [items]=\"avatars()\"\n [max]=\"maxAvatars()\"\n [gap]=\"overlapGap\"\n [itemText]=\"avatarText\"\n [tooltipListItem]=\"asListItem\">\n <ng-template\n let-avatar\n let-index=\"index\"\n let-count=\"count\"\n [apOverflowBaseItem]=\"avatars()\">\n <ap-avatar\n apTooltip\n [apTooltipDisabled]=\"!showAvatarDescriptionTooltip()\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [style.z-index]=\"count - index\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n </ng-template>\n <ng-template\n let-count\n apOverflowBaseMore>\n <div\n class=\"overflow-counter\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ count > 99 ? 99 : count }}</span>\n </div>\n </ng-template>\n</ap-overflow-base>\n", styles: [":host{display:flex}ap-overflow-base{flex:1;min-width:0;padding-inline-start:2px}ap-avatar{position:relative;cursor:default}.overflow-counter{display:flex;align-items:center;justify-content:center;background-color:var(--ref-color-grey-10);border-radius:24px;transition:background-color var(--ref-animation-short);cursor:pointer}.overflow-counter:hover{background-color:var(--ref-color-grey-20)}.overflow-counter:active{background-color:var(--ref-color-grey-40)}.overflow-text{color:var(--ref-color-grey-80);font-family:var(--ref-font-family);font-weight:700;line-height:1em;text-align:center}.overflow-counter[data-size=\"16\"]{width:16px;height:16px}.overflow-counter[data-size=\"16\"] .overflow-text{font-size:8px}.overflow-counter[data-size=\"24\"]{width:24px;height:24px}.overflow-counter[data-size=\"24\"] .overflow-text{font-size:10px}.overflow-counter[data-size=\"32\"]{width:32px;height:32px}.overflow-counter[data-size=\"32\"] .overflow-text{font-size:12px}\n"] }]
|
|
52
39
|
}], propDecorators: { avatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatars", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAvatars", required: false }] }], showAvatarDescriptionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatarDescriptionTooltip", required: false }] }] } });
|
|
53
40
|
|
|
54
41
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-avatar-group.mjs","sources":["../../../libs/ui-components/avatar-group/src/avatar-group.component.ts","../../../libs/ui-components/avatar-group/src/avatar-group.component.html","../../../libs/ui-components/avatar-group/src/agorapulse-ui-components-avatar-group.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { CustomTooltipAvatarItem, CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { ChangeDetectionStrategy, Component,
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-avatar-group.mjs","sources":["../../../libs/ui-components/avatar-group/src/avatar-group.component.ts","../../../libs/ui-components/avatar-group/src/avatar-group.component.html","../../../libs/ui-components/avatar-group/src/agorapulse-ui-components-avatar-group.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { OverflowBaseComponent, OverflowBaseItemDirective, OverflowBaseMoreDirective } from '@agorapulse/ui-components/overflow-base';\nimport { CustomTooltipAvatarItem, CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nexport type AvatarGroupSize = 16 | 24 | 32;\n\n/** How far each avatar overlaps its neighbour, in pixels. */\nconst AVATAR_OVERLAP = 2;\n\n/**\n * A stack of avatars, then a counter whose `LIST` tooltip names the hidden ones.\n *\n * It shows `maxAvatars` at most, and fewer when its width runs short. It takes the width its container\n * gives it: in a flex parent, `flex: 1; min-width: 0` lets it collapse on the width; without them it\n * keeps the width of its avatars and only `maxAvatars` caps them.\n */\n@Component({\n selector: 'ap-avatar-group',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './avatar-group.component.html',\n styleUrls: ['./avatar-group.component.scss'],\n imports: [AvatarComponent, OverflowBaseComponent, OverflowBaseItemDirective, OverflowBaseMoreDirective, TooltipDirective],\n host: {\n role: 'group',\n '[attr.aria-label]': '\"Avatar group\"',\n },\n})\nexport class AvatarGroupComponent {\n avatars = input.required<CustomTooltipAvatarItem[]>();\n size = input<AvatarGroupSize>(24);\n /** Most avatars shown; a narrower container shows fewer, the others go into the counter. */\n maxAvatars = input<number>(5);\n showAvatarDescriptionTooltip = input(true);\n\n protected readonly overlapGap = -AVATAR_OVERLAP;\n protected readonly CustomTooltipType = CustomTooltipType;\n protected readonly avatarText = (avatar: CustomTooltipAvatarItem): string => avatar.username ?? avatar.alt ?? '';\n protected readonly asListItem = (avatar: CustomTooltipAvatarItem): CustomTooltipAvatarItem => avatar;\n}\n","<ap-overflow-base\n trigger=\"click\"\n [items]=\"avatars()\"\n [max]=\"maxAvatars()\"\n [gap]=\"overlapGap\"\n [itemText]=\"avatarText\"\n [tooltipListItem]=\"asListItem\">\n <ng-template\n let-avatar\n let-index=\"index\"\n let-count=\"count\"\n [apOverflowBaseItem]=\"avatars()\">\n <ap-avatar\n apTooltip\n [apTooltipDisabled]=\"!showAvatarDescriptionTooltip()\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [style.z-index]=\"count - index\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n </ng-template>\n <ng-template\n let-count\n apOverflowBaseMore>\n <div\n class=\"overflow-counter\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ count > 99 ? 99 : count }}</span>\n </div>\n </ng-template>\n</ap-overflow-base>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -963,7 +963,7 @@ class DatepickerSelectComponent {
|
|
|
963
963
|
// NgxDaterangepickerMd module provides none — only its forRoot() does.
|
|
964
964
|
{ provide: LOCALE_CONFIG, useValue: {} },
|
|
965
965
|
LocaleService,
|
|
966
|
-
], 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 });
|
|
966
|
+
], 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", "max", "collapse"], 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 });
|
|
967
967
|
}
|
|
968
968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, decorators: [{
|
|
969
969
|
type: Component,
|