@tylertech/forge 3.10.5 → 3.12.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.
- package/custom-elements.json +594 -226
- package/dist/app-bar/forge-app-bar.css +13 -5
- package/dist/button/forge-button.css +14 -6
- package/dist/checkbox/forge-checkbox.css +23 -17
- package/dist/chips/forge-chips.css +12 -4
- package/dist/field/forge-field.css +7 -5
- package/dist/floating-action-button/forge-floating-action-button.css +12 -6
- package/dist/forge.css +6 -1
- package/dist/icon-button/forge-icon-button.css +12 -4
- package/dist/lib.js +22 -22
- package/dist/lib.js.map +4 -4
- package/dist/list/forge-list.css +59 -3
- package/dist/radio/forge-radio.css +22 -12
- package/dist/skip-link/forge-skip-link.css +38 -32
- package/dist/state-layer/forge-state-layer.css +2 -0
- package/dist/switch/forge-switch.css +9 -5
- package/dist/table/forge-table.css +6 -1
- package/dist/vscode.html-custom-data.json +104 -79
- package/esm/accordion/accordion.d.ts +2 -0
- package/esm/accordion/accordion.js +2 -0
- package/esm/app-bar/app-bar/app-bar-adapter.js +2 -2
- package/esm/app-bar/app-bar/app-bar.d.ts +1 -1
- package/esm/app-bar/app-bar/app-bar.js +1 -1
- package/esm/app-bar/help-button/app-bar-help-button.d.ts +1 -1
- package/esm/app-bar/help-button/app-bar-help-button.js +1 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.d.ts +1 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.js +1 -1
- package/esm/app-bar/notification-button/app-bar-notification-button.d.ts +2 -0
- package/esm/app-bar/notification-button/app-bar-notification-button.js +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.d.ts +2 -1
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.js +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button.d.ts +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button.js +2 -0
- package/esm/app-bar/search/app-bar-search.d.ts +2 -0
- package/esm/app-bar/search/app-bar-search.js +2 -0
- package/esm/autocomplete/autocomplete-core.js +16 -3
- package/esm/autocomplete/autocomplete.d.ts +2 -0
- package/esm/autocomplete/autocomplete.js +2 -0
- package/esm/avatar/avatar.d.ts +1 -1
- package/esm/avatar/avatar.js +1 -1
- package/esm/backdrop/backdrop.d.ts +2 -0
- package/esm/backdrop/backdrop.js +2 -0
- package/esm/badge/badge.d.ts +2 -0
- package/esm/badge/badge.js +2 -0
- package/esm/banner/banner.d.ts +1 -1
- package/esm/banner/banner.js +1 -1
- package/esm/button/base/base-button-adapter.js +2 -2
- package/esm/button/button.d.ts +1 -6
- package/esm/button/button.js +1 -6
- package/esm/button-area/button-area-adapter.js +2 -2
- package/esm/button-area/button-area.d.ts +1 -4
- package/esm/button-area/button-area.js +1 -4
- package/esm/button-toggle/button-toggle/button-toggle-adapter.js +2 -2
- package/esm/button-toggle/button-toggle/button-toggle.d.ts +2 -0
- package/esm/button-toggle/button-toggle/button-toggle.js +2 -0
- package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +1 -1
- package/esm/button-toggle/button-toggle-group/button-toggle-group.js +1 -1
- package/esm/calendar/calendar-menu/calendar-menu.js +1 -1
- package/esm/calendar/calendar.d.ts +2 -0
- package/esm/calendar/calendar.js +3 -1
- package/esm/card/card.d.ts +2 -0
- package/esm/card/card.js +2 -0
- package/esm/chip-field/chip-field.d.ts +2 -0
- package/esm/chip-field/chip-field.js +2 -0
- package/esm/chips/chip/chip-adapter.d.ts +3 -0
- package/esm/chips/chip/chip-adapter.js +14 -4
- package/esm/chips/chip/chip-constants.d.ts +2 -0
- package/esm/chips/chip/chip-constants.js +2 -1
- package/esm/chips/chip/chip-core.d.ts +4 -0
- package/esm/chips/chip/chip-core.js +9 -0
- package/esm/chips/chip/chip.d.ts +6 -0
- package/esm/chips/chip/chip.js +10 -0
- package/esm/chips/chip-set/chip-set.d.ts +1 -1
- package/esm/chips/chip-set/chip-set.js +1 -1
- package/esm/circular-progress/circular-progress.d.ts +1 -2
- package/esm/circular-progress/circular-progress.js +1 -2
- package/esm/color-picker/color-picker.d.ts +2 -0
- package/esm/color-picker/color-picker.js +3 -1
- package/esm/core/utils/a11y-utils.js +17 -0
- package/esm/core/utils/utils.js +8 -2
- package/esm/date-picker/date-picker.d.ts +2 -0
- package/esm/date-picker/date-picker.js +2 -0
- package/esm/date-range-picker/date-range-picker.d.ts +2 -0
- package/esm/date-range-picker/date-range-picker.js +2 -0
- package/esm/deprecated/button/deprecated-button.js +3 -3
- package/esm/deprecated/icon-button/deprecated-icon-button.js +2 -2
- package/esm/dialog/dialog.d.ts +1 -1
- package/esm/dialog/dialog.js +1 -1
- package/esm/divider/divider.d.ts +1 -1
- package/esm/divider/divider.js +1 -1
- package/esm/drawer/base/base-drawer-adapter.d.ts +2 -0
- package/esm/drawer/base/base-drawer-adapter.js +3 -0
- package/esm/drawer/base/base-drawer-core.js +3 -0
- package/esm/drawer/drawer/drawer.d.ts +2 -0
- package/esm/drawer/drawer/drawer.js +3 -1
- package/esm/drawer/mini-drawer/mini-drawer.d.ts +2 -0
- package/esm/drawer/mini-drawer/mini-drawer.js +3 -1
- package/esm/drawer/modal-drawer/modal-drawer.d.ts +2 -0
- package/esm/drawer/modal-drawer/modal-drawer.js +3 -1
- package/esm/expansion-panel/expansion-panel.d.ts +1 -1
- package/esm/expansion-panel/expansion-panel.js +1 -1
- package/esm/field/field-adapter.js +2 -2
- package/esm/field/field-core.d.ts +3 -3
- package/esm/field/field.d.ts +1 -2
- package/esm/field/field.js +1 -2
- package/esm/file-picker/file-picker.d.ts +2 -3
- package/esm/file-picker/file-picker.js +2 -3
- package/esm/floating-action-button/floating-action-button.d.ts +1 -1
- package/esm/floating-action-button/floating-action-button.js +1 -1
- package/esm/focus-indicator/focus-indicator-constants.d.ts +1 -11
- package/esm/focus-indicator/focus-indicator-constants.js +2 -17
- package/esm/focus-indicator/focus-indicator.d.ts +53 -26
- package/esm/focus-indicator/focus-indicator.js +139 -62
- package/esm/focus-indicator/index.d.ts +0 -2
- package/esm/focus-indicator/index.js +0 -2
- package/esm/icon/icon.d.ts +1 -1
- package/esm/icon/icon.js +1 -1
- package/esm/icon-button/icon-button.d.ts +2 -0
- package/esm/icon-button/icon-button.js +2 -0
- package/esm/inline-message/inline-message.d.ts +1 -1
- package/esm/inline-message/inline-message.js +1 -1
- package/esm/keyboard-shortcut/keyboard-shortcut.d.ts +2 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.js +2 -0
- package/esm/label/label.d.ts +1 -1
- package/esm/label/label.js +1 -1
- package/esm/label-value/label-value.d.ts +1 -1
- package/esm/label-value/label-value.js +1 -1
- package/esm/linear-progress/linear-progress.d.ts +1 -2
- package/esm/linear-progress/linear-progress.js +1 -2
- package/esm/list/list/list.d.ts +1 -1
- package/esm/list/list/list.js +2 -2
- package/esm/list/list-item/list-item-constants.js +1 -1
- package/esm/list/list-item/list-item-core.d.ts +2 -0
- package/esm/list/list-item/list-item-core.js +29 -6
- package/esm/list/list-item/list-item.d.ts +1 -0
- package/esm/list/list-item/list-item.js +2 -1
- package/esm/list-dropdown/list-dropdown-constants.d.ts +11 -1
- package/esm/list-dropdown/list-dropdown-constants.js +6 -1
- package/esm/list-dropdown/list-dropdown-utils.d.ts +3 -1
- package/esm/list-dropdown/list-dropdown-utils.js +69 -21
- package/esm/menu/menu-adapter.d.ts +2 -0
- package/esm/menu/menu-adapter.js +12 -8
- package/esm/menu/menu-constants.d.ts +1 -0
- package/esm/menu/menu-constants.js +3 -2
- package/esm/menu/menu-core.d.ts +5 -0
- package/esm/menu/menu-core.js +41 -2
- package/esm/menu/menu.d.ts +17 -0
- package/esm/menu/menu.js +15 -1
- package/esm/open-icon/open-icon.d.ts +2 -1
- package/esm/open-icon/open-icon.js +2 -1
- package/esm/overlay/overlay.d.ts +1 -2
- package/esm/overlay/overlay.js +1 -2
- package/esm/page-state/page-state.d.ts +2 -1
- package/esm/page-state/page-state.js +2 -1
- package/esm/paginator/paginator-core.d.ts +16 -0
- package/esm/paginator/paginator-core.js +29 -9
- package/esm/paginator/paginator.d.ts +38 -0
- package/esm/paginator/paginator.js +46 -0
- package/esm/popover/popover-adapter.js +1 -1
- package/esm/popover/popover-constants.d.ts +4 -0
- package/esm/popover/popover-constants.js +4 -2
- package/esm/popover/popover-core.d.ts +5 -1
- package/esm/popover/popover-core.js +13 -0
- package/esm/popover/popover.d.ts +6 -2
- package/esm/popover/popover.js +10 -2
- package/esm/profile-card/profile-card.d.ts +3 -0
- package/esm/profile-card/profile-card.js +3 -0
- package/esm/radio/radio/radio.d.ts +1 -2
- package/esm/radio/radio/radio.js +1 -2
- package/esm/scaffold/scaffold.d.ts +1 -1
- package/esm/scaffold/scaffold.js +1 -1
- package/esm/select/core/base-select-constants.d.ts +4 -0
- package/esm/select/core/base-select-core.d.ts +22 -2
- package/esm/select/core/base-select-core.js +217 -40
- package/esm/select/option/option.d.ts +2 -0
- package/esm/select/option/option.js +2 -0
- package/esm/select/option-group/option-group.d.ts +2 -0
- package/esm/select/option-group/option-group.js +2 -0
- package/esm/select/select/select-constants.d.ts +5 -0
- package/esm/select/select/select-constants.js +5 -2
- package/esm/select/select/select.d.ts +14 -2
- package/esm/select/select/select.js +23 -2
- package/esm/select/select-dropdown/select-dropdown.d.ts +2 -0
- package/esm/select/select-dropdown/select-dropdown.js +2 -0
- package/esm/skeleton/skeleton.d.ts +1 -1
- package/esm/skeleton/skeleton.js +1 -1
- package/esm/skip-link/skip-link.d.ts +1 -1
- package/esm/skip-link/skip-link.js +1 -1
- package/esm/slider/slider.d.ts +1 -1
- package/esm/slider/slider.js +1 -1
- package/esm/split-button/split-button.d.ts +1 -1
- package/esm/split-button/split-button.js +2 -2
- package/esm/split-view/split-view/split-view.d.ts +2 -0
- package/esm/split-view/split-view/split-view.js +2 -0
- package/esm/split-view/split-view-panel/split-view-panel.d.ts +2 -0
- package/esm/split-view/split-view-panel/split-view-panel.js +3 -1
- package/esm/stack/stack.d.ts +1 -8
- package/esm/stack/stack.js +1 -8
- package/esm/state-layer/state-layer.d.ts +1 -1
- package/esm/state-layer/state-layer.js +2 -2
- package/esm/stepper/step/step.d.ts +2 -0
- package/esm/stepper/step/step.js +3 -1
- package/esm/stepper/stepper/stepper.d.ts +2 -0
- package/esm/stepper/stepper/stepper.js +2 -0
- package/esm/table/table-adapter.d.ts +4 -4
- package/esm/table/table-adapter.js +4 -4
- package/esm/table/table-core.js +2 -2
- package/esm/table/table-utils.d.ts +2 -2
- package/esm/table/table-utils.js +25 -18
- package/esm/table/table.d.ts +3 -1
- package/esm/table/table.js +4 -1
- package/esm/tabs/tab/tab-adapter.js +2 -2
- package/esm/tabs/tab/tab.d.ts +2 -0
- package/esm/tabs/tab/tab.js +2 -0
- package/esm/tabs/tab-bar/tab-bar.d.ts +1 -1
- package/esm/tabs/tab-bar/tab-bar.js +1 -1
- package/esm/text-field/text-field-adapter.d.ts +6 -4
- package/esm/text-field/text-field-adapter.js +11 -4
- package/esm/text-field/text-field-core.d.ts +4 -0
- package/esm/text-field/text-field-core.js +13 -2
- package/esm/text-field/text-field.d.ts +1 -1
- package/esm/text-field/text-field.js +1 -1
- package/esm/time-picker/time-picker-adapter.js +1 -0
- package/esm/time-picker/time-picker-core.js +3 -3
- package/esm/time-picker/time-picker.d.ts +2 -0
- package/esm/time-picker/time-picker.js +2 -0
- package/esm/toast/toast-adapter.d.ts +20 -0
- package/esm/toast/toast-adapter.js +30 -0
- package/esm/toast/toast-core.d.ts +17 -0
- package/esm/toast/toast-core.js +66 -0
- package/esm/toast/toast.d.ts +9 -2
- package/esm/toast/toast.js +10 -1
- package/esm/toolbar/toolbar.d.ts +1 -3
- package/esm/toolbar/toolbar.js +1 -3
- package/esm/tooltip/tooltip-adapter.d.ts +6 -0
- package/esm/tooltip/tooltip-adapter.js +9 -0
- package/esm/tooltip/tooltip-constants.d.ts +1 -0
- package/esm/tooltip/tooltip-constants.js +2 -1
- package/esm/tooltip/tooltip-core.d.ts +20 -0
- package/esm/tooltip/tooltip-core.js +96 -2
- package/esm/tooltip/tooltip.d.ts +1 -1
- package/esm/tooltip/tooltip.js +2 -2
- package/esm/view-switcher/view/view.d.ts +2 -0
- package/esm/view-switcher/view/view.js +2 -0
- package/esm/view-switcher/view-switcher.d.ts +2 -0
- package/esm/view-switcher/view-switcher.js +2 -0
- package/package.json +4 -4
- package/sass/focus-indicator/focus-indicator.scss +1 -1
- package/sass/icon-button/forge-icon-button.scss +3 -3
- package/sass/list/forge-list.scss +6 -6
- package/sass/state-layer/_core.scss +2 -0
- package/sass/table/_core.scss +13 -1
- package/sass/tooltip/_core.scss +0 -2
- package/esm/focus-indicator/focus-indicator-adapter.d.ts +0 -29
- package/esm/focus-indicator/focus-indicator-adapter.js +0 -37
- package/esm/focus-indicator/focus-indicator-core.d.ts +0 -48
- package/esm/focus-indicator/focus-indicator-core.js +0 -129
|
@@ -18,6 +18,14 @@ export interface IPaginatorCore {
|
|
|
18
18
|
alternative: boolean;
|
|
19
19
|
rangeLabelCallback: PaginatorRangeLabelBuilder;
|
|
20
20
|
focus(options?: FocusOptions): void;
|
|
21
|
+
goToFirstPage(): void;
|
|
22
|
+
goToPreviousPage(): void;
|
|
23
|
+
goToNextPage(): void;
|
|
24
|
+
goToLastPage(): void;
|
|
25
|
+
canGoToFirstPage(): boolean;
|
|
26
|
+
canGoToPreviousPage(): boolean;
|
|
27
|
+
canGoToNextPage(): boolean;
|
|
28
|
+
canGoToLastPage(): boolean;
|
|
21
29
|
}
|
|
22
30
|
export declare class PaginatorCore {
|
|
23
31
|
private _adapter;
|
|
@@ -41,9 +49,13 @@ export declare class PaginatorCore {
|
|
|
41
49
|
initialize(): void;
|
|
42
50
|
focus(options?: FocusOptions): void;
|
|
43
51
|
private _attachListeners;
|
|
52
|
+
goToFirstPage(): void;
|
|
44
53
|
private _onFirstPage;
|
|
54
|
+
goToPreviousPage(): void;
|
|
45
55
|
private _onPreviousPage;
|
|
56
|
+
goToNextPage(): void;
|
|
46
57
|
private _onNextPage;
|
|
58
|
+
goToLastPage(): void;
|
|
47
59
|
private _onLastPage;
|
|
48
60
|
private _onPageSizeChanged;
|
|
49
61
|
private _dispatchChangeEvent;
|
|
@@ -84,4 +96,8 @@ export declare class PaginatorCore {
|
|
|
84
96
|
set alternative(value: boolean);
|
|
85
97
|
get rangeLabelCallback(): PaginatorRangeLabelBuilder;
|
|
86
98
|
set rangeLabelCallback(value: PaginatorRangeLabelBuilder);
|
|
99
|
+
canGoToFirstPage(): boolean;
|
|
100
|
+
canGoToPreviousPage(): boolean;
|
|
101
|
+
canGoToNextPage(): boolean;
|
|
102
|
+
canGoToLastPage(): boolean;
|
|
87
103
|
}
|
|
@@ -46,9 +46,7 @@ export class PaginatorCore {
|
|
|
46
46
|
this._adapter.attachNextPageListener(this._nextPageListener);
|
|
47
47
|
this._adapter.attachLastPageListener(this._lastPageListener);
|
|
48
48
|
}
|
|
49
|
-
|
|
50
|
-
evt.stopPropagation();
|
|
51
|
-
/* c8 ignore next 3 */
|
|
49
|
+
goToFirstPage() {
|
|
52
50
|
if (!this._hasFirstPage()) {
|
|
53
51
|
return;
|
|
54
52
|
}
|
|
@@ -58,9 +56,11 @@ export class PaginatorCore {
|
|
|
58
56
|
this._applyPageIndex(firstPage);
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
|
-
|
|
59
|
+
_onFirstPage(evt) {
|
|
62
60
|
evt.stopPropagation();
|
|
63
|
-
|
|
61
|
+
this.goToFirstPage();
|
|
62
|
+
}
|
|
63
|
+
goToPreviousPage() {
|
|
64
64
|
if (!this._hasPreviousPage()) {
|
|
65
65
|
return;
|
|
66
66
|
}
|
|
@@ -70,9 +70,11 @@ export class PaginatorCore {
|
|
|
70
70
|
this._applyPageIndex(prevPage);
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
|
|
73
|
+
_onPreviousPage(evt) {
|
|
74
74
|
evt.stopPropagation();
|
|
75
|
-
|
|
75
|
+
this.goToPreviousPage();
|
|
76
|
+
}
|
|
77
|
+
goToNextPage() {
|
|
76
78
|
if (!this._hasNextPage()) {
|
|
77
79
|
return;
|
|
78
80
|
}
|
|
@@ -82,9 +84,11 @@ export class PaginatorCore {
|
|
|
82
84
|
this._applyPageIndex(nextPage);
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
|
-
|
|
87
|
+
_onNextPage(evt) {
|
|
86
88
|
evt.stopPropagation();
|
|
87
|
-
|
|
89
|
+
this.goToNextPage();
|
|
90
|
+
}
|
|
91
|
+
goToLastPage() {
|
|
88
92
|
if (!this._hasLastPage()) {
|
|
89
93
|
return;
|
|
90
94
|
}
|
|
@@ -94,6 +98,10 @@ export class PaginatorCore {
|
|
|
94
98
|
this._applyPageIndex(lastPage);
|
|
95
99
|
}
|
|
96
100
|
}
|
|
101
|
+
_onLastPage(evt) {
|
|
102
|
+
evt.stopPropagation();
|
|
103
|
+
this.goToLastPage();
|
|
104
|
+
}
|
|
97
105
|
_onPageSizeChanged(evt) {
|
|
98
106
|
evt.stopPropagation();
|
|
99
107
|
const pageSize = Number(evt.detail);
|
|
@@ -384,4 +392,16 @@ export class PaginatorCore {
|
|
|
384
392
|
this._rangeLabelCallback = value;
|
|
385
393
|
this._updateRangeLabel();
|
|
386
394
|
}
|
|
395
|
+
canGoToFirstPage() {
|
|
396
|
+
return this._hasFirstPage();
|
|
397
|
+
}
|
|
398
|
+
canGoToPreviousPage() {
|
|
399
|
+
return this._hasPreviousPage();
|
|
400
|
+
}
|
|
401
|
+
canGoToNextPage() {
|
|
402
|
+
return this._hasNextPage();
|
|
403
|
+
}
|
|
404
|
+
canGoToLastPage() {
|
|
405
|
+
return this._hasLastPage();
|
|
406
|
+
}
|
|
387
407
|
}
|
|
@@ -17,6 +17,14 @@ export interface IPaginatorComponent extends IBaseComponent {
|
|
|
17
17
|
disabled: boolean;
|
|
18
18
|
alternative: boolean;
|
|
19
19
|
rangeLabelCallback: PaginatorRangeLabelBuilder;
|
|
20
|
+
goToFirstPage(): void;
|
|
21
|
+
goToPreviousPage(): void;
|
|
22
|
+
goToNextPage(): void;
|
|
23
|
+
goToLastPage(): void;
|
|
24
|
+
canGoToFirstPage(): boolean;
|
|
25
|
+
canGoToPreviousPage(): boolean;
|
|
26
|
+
canGoToNextPage(): boolean;
|
|
27
|
+
canGoToLastPage(): boolean;
|
|
20
28
|
}
|
|
21
29
|
declare global {
|
|
22
30
|
interface HTMLElementTagNameMap {
|
|
@@ -29,6 +37,8 @@ declare global {
|
|
|
29
37
|
/**
|
|
30
38
|
* @tag forge-paginator
|
|
31
39
|
*
|
|
40
|
+
* @summary Paginators provide navigation controls for dividing content across multiple pages. Typically used alongside data tables or lists.
|
|
41
|
+
*
|
|
32
42
|
* @slot label - Overrides the label text when in the default variant.
|
|
33
43
|
* @slot range-label - Overrides the default range label with a custom label when in the default variant.
|
|
34
44
|
* @slot alternative-range-label - Overrides the default range label with a custom label when in the `alternative` variant.
|
|
@@ -111,4 +121,32 @@ export declare class PaginatorComponent extends BaseComponent implements IPagina
|
|
|
111
121
|
rangeLabelCallback: PaginatorRangeLabelBuilder;
|
|
112
122
|
/** Sets focus to the first focusable element within the paginator. */
|
|
113
123
|
focus(options?: FocusOptions): void;
|
|
124
|
+
/** Navigates to the first page. */
|
|
125
|
+
goToFirstPage(): void;
|
|
126
|
+
/** Navigates to the previous page. */
|
|
127
|
+
goToPreviousPage(): void;
|
|
128
|
+
/** Navigates to the next page. */
|
|
129
|
+
goToNextPage(): void;
|
|
130
|
+
/** Navigates to the last page. */
|
|
131
|
+
goToLastPage(): void;
|
|
132
|
+
/**
|
|
133
|
+
* Checks if navigation to the first page is possible.
|
|
134
|
+
* @returns True if can navigate to first page
|
|
135
|
+
*/
|
|
136
|
+
canGoToFirstPage(): boolean;
|
|
137
|
+
/**
|
|
138
|
+
* Checks if navigation to the previous page is possible.
|
|
139
|
+
* @returns True if can navigate to previous page
|
|
140
|
+
*/
|
|
141
|
+
canGoToPreviousPage(): boolean;
|
|
142
|
+
/**
|
|
143
|
+
* Checks if navigation to the next page is possible.
|
|
144
|
+
* @returns True if can navigate to next page
|
|
145
|
+
*/
|
|
146
|
+
canGoToNextPage(): boolean;
|
|
147
|
+
/**
|
|
148
|
+
* Checks if navigation to the last page is possible.
|
|
149
|
+
* @returns True if can navigate to last page
|
|
150
|
+
*/
|
|
151
|
+
canGoToLastPage(): boolean;
|
|
114
152
|
}
|
|
@@ -19,6 +19,8 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-paginato
|
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-paginator
|
|
21
21
|
*
|
|
22
|
+
* @summary Paginators provide navigation controls for dividing content across multiple pages. Typically used alongside data tables or lists.
|
|
23
|
+
*
|
|
22
24
|
* @slot label - Overrides the label text when in the default variant.
|
|
23
25
|
* @slot range-label - Overrides the default range label with a custom label when in the default variant.
|
|
24
26
|
* @slot alternative-range-label - Overrides the default range label with a custom label when in the `alternative` variant.
|
|
@@ -80,6 +82,50 @@ let PaginatorComponent = class PaginatorComponent extends BaseComponent {
|
|
|
80
82
|
focus(options) {
|
|
81
83
|
this._core.focus(options);
|
|
82
84
|
}
|
|
85
|
+
/** Navigates to the first page. */
|
|
86
|
+
goToFirstPage() {
|
|
87
|
+
this._core.goToFirstPage();
|
|
88
|
+
}
|
|
89
|
+
/** Navigates to the previous page. */
|
|
90
|
+
goToPreviousPage() {
|
|
91
|
+
this._core.goToPreviousPage();
|
|
92
|
+
}
|
|
93
|
+
/** Navigates to the next page. */
|
|
94
|
+
goToNextPage() {
|
|
95
|
+
this._core.goToNextPage();
|
|
96
|
+
}
|
|
97
|
+
/** Navigates to the last page. */
|
|
98
|
+
goToLastPage() {
|
|
99
|
+
this._core.goToLastPage();
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Checks if navigation to the first page is possible.
|
|
103
|
+
* @returns True if can navigate to first page
|
|
104
|
+
*/
|
|
105
|
+
canGoToFirstPage() {
|
|
106
|
+
return this._core.canGoToFirstPage();
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Checks if navigation to the previous page is possible.
|
|
110
|
+
* @returns True if can navigate to previous page
|
|
111
|
+
*/
|
|
112
|
+
canGoToPreviousPage() {
|
|
113
|
+
return this._core.canGoToPreviousPage();
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Checks if navigation to the next page is possible.
|
|
117
|
+
* @returns True if can navigate to next page
|
|
118
|
+
*/
|
|
119
|
+
canGoToNextPage() {
|
|
120
|
+
return this._core.canGoToNextPage();
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Checks if navigation to the last page is possible.
|
|
124
|
+
* @returns True if can navigate to last page
|
|
125
|
+
*/
|
|
126
|
+
canGoToLastPage() {
|
|
127
|
+
return this._core.canGoToLastPage();
|
|
128
|
+
}
|
|
83
129
|
};
|
|
84
130
|
__decorate([
|
|
85
131
|
coreProperty()
|
|
@@ -146,7 +146,7 @@ export class PopoverAdapter extends OverlayAwareAdapter {
|
|
|
146
146
|
return null;
|
|
147
147
|
}
|
|
148
148
|
_updateAnchorExpandedState(state) {
|
|
149
|
-
if (!this._overlayElement.anchorElement) {
|
|
149
|
+
if (!this._overlayElement.anchorElement || this._component.anchorAccessibility !== 'auto') {
|
|
150
150
|
return;
|
|
151
151
|
}
|
|
152
152
|
if (!(this._overlayElement.anchorElement instanceof VirtualElement) && !this.overlayElement.anchorElement?.hasAttribute('aria-hidden')) {
|
|
@@ -16,6 +16,7 @@ export declare const POPOVER_CONSTANTS: {
|
|
|
16
16
|
HOVER_DISMISS_DELAY: string;
|
|
17
17
|
PRESET: string;
|
|
18
18
|
DISTINCT: string;
|
|
19
|
+
ANCHOR_ACCESSIBILITY: string;
|
|
19
20
|
};
|
|
20
21
|
attributes: {
|
|
21
22
|
OPEN: string;
|
|
@@ -30,6 +31,7 @@ export declare const POPOVER_CONSTANTS: {
|
|
|
30
31
|
HOVER_DISMISS_DELAY: string;
|
|
31
32
|
PRESET: string;
|
|
32
33
|
DISTINCT: string;
|
|
34
|
+
ANCHOR_ACCESSIBILITY: string;
|
|
33
35
|
};
|
|
34
36
|
classes: {
|
|
35
37
|
ARROW: string;
|
|
@@ -50,6 +52,7 @@ export declare const POPOVER_CONSTANTS: {
|
|
|
50
52
|
TRIGGER_TYPE: PopoverTriggerType;
|
|
51
53
|
HOVER_DELAY: number;
|
|
52
54
|
PRESET: PopoverPreset;
|
|
55
|
+
ANCHOR_ACCESSIBILITY: PopoverAnchorAccessibility;
|
|
53
56
|
};
|
|
54
57
|
};
|
|
55
58
|
export declare const POPOVER_HOVER_TIMEOUT = 500;
|
|
@@ -57,6 +60,7 @@ export type PopoverAnimationType = 'none' | 'zoom' | 'slide' | 'fade';
|
|
|
57
60
|
export type PopoverTriggerType = 'click' | 'hover' | 'focus' | 'longpress' | 'doubleclick' | 'contextmenu' | 'manual';
|
|
58
61
|
export type PopoverDismissReason = OverlayLightDismissReason | PopoverTriggerType | 'destroy';
|
|
59
62
|
export type PopoverPreset = 'popover' | 'dropdown' | 'list';
|
|
63
|
+
export type PopoverAnchorAccessibility = 'auto' | 'none';
|
|
60
64
|
export interface IPopoverToggleEventData {
|
|
61
65
|
newState: 'closed' | 'open';
|
|
62
66
|
oldState: 'closed' | 'open';
|
|
@@ -14,7 +14,8 @@ const observedAttributes = {
|
|
|
14
14
|
HOVER_DELAY: 'hover-delay',
|
|
15
15
|
HOVER_DISMISS_DELAY: 'hover-dismiss-delay',
|
|
16
16
|
PRESET: 'preset',
|
|
17
|
-
DISTINCT: 'distinct'
|
|
17
|
+
DISTINCT: 'distinct',
|
|
18
|
+
ANCHOR_ACCESSIBILITY: 'anchor-accessibility'
|
|
18
19
|
};
|
|
19
20
|
const attributes = {
|
|
20
21
|
...observedAttributes,
|
|
@@ -40,7 +41,8 @@ const events = {
|
|
|
40
41
|
const defaults = {
|
|
41
42
|
TRIGGER_TYPE: 'click',
|
|
42
43
|
HOVER_DELAY: 0,
|
|
43
|
-
PRESET: 'popover'
|
|
44
|
+
PRESET: 'popover',
|
|
45
|
+
ANCHOR_ACCESSIBILITY: 'auto'
|
|
44
46
|
};
|
|
45
47
|
export const POPOVER_CONSTANTS = {
|
|
46
48
|
elementName,
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { IOverlayAwareCore, OverlayAwareCore } from '../overlay/base/overlay-aware-core';
|
|
7
7
|
import { OverlayLightDismissEventData } from '../overlay/overlay-constants';
|
|
8
8
|
import { IPopoverAdapter } from './popover-adapter';
|
|
9
|
-
import { PopoverAnimationType, PopoverTriggerType, PopoverPreset } from './popover-constants';
|
|
9
|
+
import { PopoverAnimationType, PopoverTriggerType, PopoverPreset, PopoverAnchorAccessibility } from './popover-constants';
|
|
10
10
|
import { IDismissibleStackState } from '../core/utils/dismissible-stack';
|
|
11
11
|
import { VirtualElement } from '../core/utils/position-utils';
|
|
12
12
|
export interface IPopoverCore extends IOverlayAwareCore {
|
|
@@ -19,6 +19,7 @@ export interface IPopoverCore extends IOverlayAwareCore {
|
|
|
19
19
|
hoverDelay: number;
|
|
20
20
|
preset: PopoverPreset;
|
|
21
21
|
distinct: string | null;
|
|
22
|
+
anchorAccessibility: PopoverAnchorAccessibility;
|
|
22
23
|
hideAsync(): Promise<void>;
|
|
23
24
|
dispatchBeforeToggleEvent(state: IDismissibleStackState): boolean;
|
|
24
25
|
}
|
|
@@ -33,6 +34,7 @@ export declare class PopoverCore extends PopoverCore_base implements IPopoverCor
|
|
|
33
34
|
private _hoverDelay;
|
|
34
35
|
private _preset;
|
|
35
36
|
private _distinct;
|
|
37
|
+
private _anchorAccessibility;
|
|
36
38
|
private _previouslyFocusedElement;
|
|
37
39
|
private _hoverAnchorLeaveTimeout;
|
|
38
40
|
private _popoverMouseleaveTimeout;
|
|
@@ -150,5 +152,7 @@ export declare class PopoverCore extends PopoverCore_base implements IPopoverCor
|
|
|
150
152
|
set preset(value: PopoverPreset);
|
|
151
153
|
get distinct(): string | null;
|
|
152
154
|
set distinct(value: string | null);
|
|
155
|
+
get anchorAccessibility(): PopoverAnchorAccessibility;
|
|
156
|
+
set anchorAccessibility(value: PopoverAnchorAccessibility);
|
|
153
157
|
}
|
|
154
158
|
export {};
|
|
@@ -20,6 +20,7 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
|
|
|
20
20
|
this._hoverDelay = POPOVER_CONSTANTS.defaults.HOVER_DELAY;
|
|
21
21
|
this._preset = POPOVER_CONSTANTS.defaults.PRESET;
|
|
22
22
|
this._distinct = null;
|
|
23
|
+
this._anchorAccessibility = POPOVER_CONSTANTS.defaults.ANCHOR_ACCESSIBILITY;
|
|
23
24
|
this._previouslyFocusedElement = null;
|
|
24
25
|
// Click trigger listeners
|
|
25
26
|
this._anchorClickListener = this._onAnchorClick.bind(this);
|
|
@@ -533,4 +534,16 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
|
|
|
533
534
|
set distinct(value) {
|
|
534
535
|
this._distinct = value;
|
|
535
536
|
}
|
|
537
|
+
get anchorAccessibility() {
|
|
538
|
+
return this._anchorAccessibility;
|
|
539
|
+
}
|
|
540
|
+
set anchorAccessibility(value) {
|
|
541
|
+
if (this._anchorAccessibility !== value) {
|
|
542
|
+
this._anchorAccessibility = value;
|
|
543
|
+
this._adapter.setHostAttribute(POPOVER_CONSTANTS.attributes.ANCHOR_ACCESSIBILITY, this._anchorAccessibility);
|
|
544
|
+
if (this._adapter.isConnected) {
|
|
545
|
+
this._adapter.initializeAnchorElement();
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
}
|
|
536
549
|
}
|
package/esm/popover/popover.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { IPopoverToggleEventData, PopoverAnimationType, PopoverPreset, PopoverTriggerType } from './popover-constants';
|
|
6
|
+
import { IPopoverToggleEventData, PopoverAnimationType, PopoverPreset, PopoverTriggerType, PopoverAnchorAccessibility } from './popover-constants';
|
|
7
7
|
import { IPopoverCore } from './popover-core';
|
|
8
8
|
import { IOverlayAware, OverlayAware } from '../overlay/base/overlay-aware';
|
|
9
9
|
import { IDismissible, tryDismiss, IDismissibleStackState } from '../core/utils/dismissible-stack';
|
|
@@ -17,6 +17,7 @@ export interface IPopoverProperties extends IOverlayAware, IDismissible {
|
|
|
17
17
|
hoverDismissDelay: number;
|
|
18
18
|
preset: PopoverPreset;
|
|
19
19
|
distinct: string | null;
|
|
20
|
+
anchorAccessibility: PopoverAnchorAccessibility;
|
|
20
21
|
}
|
|
21
22
|
export interface IPopoverComponent extends IPopoverProperties {
|
|
22
23
|
hideAsync(): Promise<void>;
|
|
@@ -33,7 +34,7 @@ declare global {
|
|
|
33
34
|
/**
|
|
34
35
|
* @tag forge-popover
|
|
35
36
|
*
|
|
36
|
-
* @summary Popovers are used to
|
|
37
|
+
* @summary Popovers are used to show content in an element that is rendered above all other content on the page. Use popovers to display additional information or actions related to a specific element. Popovers are typically triggered by user interaction, such as clicking a button or hovering over an element.
|
|
37
38
|
*
|
|
38
39
|
* @dependency forge-overlay
|
|
39
40
|
*
|
|
@@ -46,6 +47,7 @@ declare global {
|
|
|
46
47
|
* @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
|
|
47
48
|
* @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
|
|
48
49
|
* @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
|
|
50
|
+
* @property {PopoverAnchorAccessibility} [anchorAccessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
|
|
49
51
|
*
|
|
50
52
|
* @globalconfig placement
|
|
51
53
|
* @globalconfig animationType
|
|
@@ -67,6 +69,7 @@ declare global {
|
|
|
67
69
|
* @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
|
|
68
70
|
* @attribute {string} [preset="popover"] - The preset to use for the popover.
|
|
69
71
|
* @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
|
|
72
|
+
* @attribute {string} [anchor-accessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
|
|
70
73
|
*
|
|
71
74
|
* @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
|
|
72
75
|
* @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.
|
|
@@ -129,6 +132,7 @@ export declare class PopoverComponent extends OverlayAware<IPopoverCore> impleme
|
|
|
129
132
|
hoverDismissDelay: number;
|
|
130
133
|
preset: PopoverPreset;
|
|
131
134
|
distinct: string | null;
|
|
135
|
+
anchorAccessibility: PopoverAnchorAccessibility;
|
|
132
136
|
/**
|
|
133
137
|
* Hides the popover, and returns a `Promise` that resolves when the hide animation is complete.
|
|
134
138
|
*/
|
package/esm/popover/popover.js
CHANGED
|
@@ -13,11 +13,11 @@ import { OverlayAware } from '../overlay/base/overlay-aware';
|
|
|
13
13
|
import { coerceStringToArray } from '../core/utils/utils';
|
|
14
14
|
import { tryDismiss } from '../core/utils/dismissible-stack';
|
|
15
15
|
const template = '<template><forge-overlay exportparts=\"root:overlay\"><div class=\"forge-popover\" part=\"surface\"><slot></slot></div></forge-overlay></template>';
|
|
16
|
-
const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)}}@keyframes zoomout{from{transform:scale(1)}to{transform:scale(.8)}}@keyframes slidein{from{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{transform:translateX(0) translateY(0)}}@keyframes slideout{from{transform:translateX(0) translateY(0)}to{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@layer base,animation,preset,reduced-motion; @layer base{:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-width:var(--forge-popover-width, auto);--_popover-height:var(--forge-popover-height, auto);--_popover-min-width:var(--forge-popover-min-width, none);--_popover-max-width:var(--forge-popover-max-width, none);--_popover-min-height:var(--forge-popover-min-height, none);--_popover-max-height:var(--forge-popover-max-height, none);--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_popover-box-shadow:var(--forge-popover-box-shadow, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-overflow:var(--forge-popover-overflow, initial);--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-enter-duration:var(--forge-popover-animation-enter-duration, var(--forge-animation-duration-short3, 150ms));--_popover-animation-enter-timing:var(--forge-popover-animation-enter-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-animation-exit-duration:var(--forge-popover-animation-exit-duration, var(--forge-animation-duration-short2, 100ms));--_popover-animation-exit-timing:var(--forge-popover-animation-exit-timing, var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)));--_popover-zoom-enter-duration:var(--forge-popover-zoom-enter-duration, var(--_popover-animation-enter-duration));--_popover-zoom-enter-timing:var(--forge-popover-zoom-enter-timing, var(--_popover-animation-enter-timing));--_popover-zoom-exit-duration:var(--forge-popover-zoom-exit-duration, var(--_popover-animation-exit-duration));--_popover-zoom-exit-timing:var(--forge-popover-zoom-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-enter-duration:var(--forge-popover-slide-enter-duration, var(--_popover-animation-enter-duration));--_popover-slide-enter-timing:var(--forge-popover-slide-enter-timing, var(--_popover-animation-enter-timing));--_popover-slide-exit-duration:var(--forge-popover-slide-exit-duration, var(--_popover-animation-exit-duration));--_popover-slide-exit-timing:var(--forge-popover-slide-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-enter-duration:var(--forge-popover-fade-enter-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-enter-timing:var(--forge-popover-fade-enter-timing, var(--_popover-animation-enter-timing));--_popover-fade-exit-duration:var(--forge-popover-fade-exit-duration, var(--_popover-animation-exit-duration));--_popover-fade-exit-timing:var(--forge-popover-fade-exit-timing, var(--_popover-animation-exit-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto);--_popover-preset-dropdown-max-height:var(--forge-popover-preset-dropdown-max-height, 256px);--_popover-preset-dropdown-overflow:var(--forge-popover-preset-dropdown-overflow, auto visible);--_popover-preset-dropdown-padding-block:var(--forge-popover-preset-dropdown-padding-block, var(--forge-spacing-xsmall, 8px));--_popover-preset-list-padding-block:var(--forge-popover-preset-list-padding-block, var(--forge-spacing-xsmall, 8px))}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover{position:relative;overflow:var(--_popover-overflow);box-sizing:border-box;background:var(--_popover-background);border-radius:var(--_popover-border-radius);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);width:var(--_popover-width);height:var(--_popover-height);min-width:var(--_popover-min-width);max-width:var(--_popover-max-width);min-height:var(--_popover-min-height);max-height:var(--_popover-max-height)}.forge-popover::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-popover::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-popover::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}}@layer preset{:host([preset=dropdown]) .forge-popover{--_popover-max-height:var(--_popover-preset-dropdown-max-height);--_popover-overflow:var(--_popover-preset-dropdown-overflow);padding-block:var(--_popover-preset-dropdown-padding-block)}:host([preset=list]) .forge-popover{padding-block:var(--_popover-preset-list-padding-block)}:host([constrain-viewport-width]) .forge-popover{--_popover-max-width:var(--forge-popover-max-width, 100vw)}}@layer animation{:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{animation-duration:var(--_popover-zoom-enter-duration);animation-timing-function:var(--_popover-zoom-enter-timing);animation-name:fadein,zoomin;transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host(:not([animation-type])) forge-overlay[open] .forge-popover.exiting,:host([animation-type=zoom]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-zoom-exit-duration);animation-timing-function:var(--_popover-zoom-exit-timing);animation-name:fadeout,zoomout}:host([animation-type=slide]) .forge-popover{animation-duration:var(--_popover-slide-enter-duration);animation-timing-function:var(--_popover-slide-enter-timing);animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-slide-exit-duration);animation-timing-function:var(--_popover-slide-exit-timing);animation-name:fadeout,slideout}:host([animation-type=fade]) .forge-popover{animation-duration:var(--_popover-fade-enter-duration);animation-timing-function:var(--_popover-fade-enter-timing);animation-name:fadein}:host([animation-type=fade]) .forge-popover.exiting{animation-duration:var(--_popover-fade-exit-duration);animation-timing-function:var(--_popover-fade-exit-timing);animation-name:fadeout}}forge-overlay[clipped-x] .forge-popover{width:auto;min-width:0;max-width:100vw;overflow-x:auto}forge-overlay[clipped-y] .forge-popover{height:auto;min-height:0;overflow-y:auto}@layer reduced-motion{@media (prefers-reduced-motion:reduce){.forge-popover{animation:none}.forge-popover.exiting{animation:none}}}';
|
|
16
|
+
const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)}}@keyframes zoomout{from{transform:scale(1)}to{transform:scale(.8)}}@keyframes slidein{from{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{transform:translateX(0) translateY(0)}}@keyframes slideout{from{transform:translateX(0) translateY(0)}to{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@layer base,animation,preset,reduced-motion; @layer base{:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-width:var(--forge-popover-width, auto);--_popover-height:var(--forge-popover-height, auto);--_popover-min-width:var(--forge-popover-min-width, none);--_popover-max-width:var(--forge-popover-max-width, none);--_popover-min-height:var(--forge-popover-min-height, none);--_popover-max-height:var(--forge-popover-max-height, none);--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_popover-box-shadow:var(--forge-popover-box-shadow, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-overflow:var(--forge-popover-overflow, initial);--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-enter-duration:var(--forge-popover-animation-enter-duration, var(--forge-animation-duration-short3, 150ms));--_popover-animation-enter-timing:var(--forge-popover-animation-enter-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-animation-exit-duration:var(--forge-popover-animation-exit-duration, var(--forge-animation-duration-short2, 100ms));--_popover-animation-exit-timing:var(--forge-popover-animation-exit-timing, var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)));--_popover-zoom-enter-duration:var(--forge-popover-zoom-enter-duration, var(--_popover-animation-enter-duration));--_popover-zoom-enter-timing:var(--forge-popover-zoom-enter-timing, var(--_popover-animation-enter-timing));--_popover-zoom-exit-duration:var(--forge-popover-zoom-exit-duration, var(--_popover-animation-exit-duration));--_popover-zoom-exit-timing:var(--forge-popover-zoom-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-enter-duration:var(--forge-popover-slide-enter-duration, var(--_popover-animation-enter-duration));--_popover-slide-enter-timing:var(--forge-popover-slide-enter-timing, var(--_popover-animation-enter-timing));--_popover-slide-exit-duration:var(--forge-popover-slide-exit-duration, var(--_popover-animation-exit-duration));--_popover-slide-exit-timing:var(--forge-popover-slide-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-enter-duration:var(--forge-popover-fade-enter-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-enter-timing:var(--forge-popover-fade-enter-timing, var(--_popover-animation-enter-timing));--_popover-fade-exit-duration:var(--forge-popover-fade-exit-duration, var(--_popover-animation-exit-duration));--_popover-fade-exit-timing:var(--forge-popover-fade-exit-timing, var(--_popover-animation-exit-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto);--_popover-preset-dropdown-max-height:var(--forge-popover-preset-dropdown-max-height, 256px);--_popover-preset-dropdown-overflow:var(--forge-popover-preset-dropdown-overflow, auto visible);--_popover-preset-dropdown-padding-block:var(--forge-popover-preset-dropdown-padding-block, var(--forge-spacing-xsmall, 8px));--_popover-preset-list-padding-block:var(--forge-popover-preset-list-padding-block, var(--forge-spacing-xsmall, 8px))}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-popover::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-popover::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-popover{position:relative;overflow:var(--_popover-overflow);box-sizing:border-box;background:var(--_popover-background);border-radius:var(--_popover-border-radius);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);width:var(--_popover-width);height:var(--_popover-height);min-width:var(--_popover-min-width);max-width:var(--_popover-max-width);min-height:var(--_popover-min-height);max-height:var(--_popover-max-height)}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}}@layer preset{:host([preset=dropdown]) .forge-popover{--_popover-max-height:var(--_popover-preset-dropdown-max-height);--_popover-overflow:var(--_popover-preset-dropdown-overflow);padding-block:var(--_popover-preset-dropdown-padding-block)}:host([preset=list]) .forge-popover{padding-block:var(--_popover-preset-list-padding-block)}:host([constrain-viewport-width]) .forge-popover{--_popover-max-width:var(--forge-popover-max-width, 100vw)}}@layer animation{:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{animation-duration:var(--_popover-zoom-enter-duration);animation-timing-function:var(--_popover-zoom-enter-timing);animation-name:fadein,zoomin;transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host(:not([animation-type])) forge-overlay[open] .forge-popover.exiting,:host([animation-type=zoom]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-zoom-exit-duration);animation-timing-function:var(--_popover-zoom-exit-timing);animation-name:fadeout,zoomout}:host([animation-type=slide]) .forge-popover{animation-duration:var(--_popover-slide-enter-duration);animation-timing-function:var(--_popover-slide-enter-timing);animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-slide-exit-duration);animation-timing-function:var(--_popover-slide-exit-timing);animation-name:fadeout,slideout}:host([animation-type=fade]) .forge-popover{animation-duration:var(--_popover-fade-enter-duration);animation-timing-function:var(--_popover-fade-enter-timing);animation-name:fadein}:host([animation-type=fade]) .forge-popover.exiting{animation-duration:var(--_popover-fade-exit-duration);animation-timing-function:var(--_popover-fade-exit-timing);animation-name:fadeout}}forge-overlay[clipped-x] .forge-popover{width:auto;min-width:0;max-width:100vw;overflow-x:auto}forge-overlay[clipped-y] .forge-popover{height:auto;min-height:0;overflow-y:auto}@layer reduced-motion{@media (prefers-reduced-motion:reduce){.forge-popover{animation:none}.forge-popover.exiting{animation:none}}}';
|
|
17
17
|
/**
|
|
18
18
|
* @tag forge-popover
|
|
19
19
|
*
|
|
20
|
-
* @summary Popovers are used to
|
|
20
|
+
* @summary Popovers are used to show content in an element that is rendered above all other content on the page. Use popovers to display additional information or actions related to a specific element. Popovers are typically triggered by user interaction, such as clicking a button or hovering over an element.
|
|
21
21
|
*
|
|
22
22
|
* @dependency forge-overlay
|
|
23
23
|
*
|
|
@@ -30,6 +30,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
|
|
|
30
30
|
* @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
|
|
31
31
|
* @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
|
|
32
32
|
* @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
|
|
33
|
+
* @property {PopoverAnchorAccessibility} [anchorAccessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
|
|
33
34
|
*
|
|
34
35
|
* @globalconfig placement
|
|
35
36
|
* @globalconfig animationType
|
|
@@ -51,6 +52,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
|
|
|
51
52
|
* @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
|
|
52
53
|
* @attribute {string} [preset="popover"] - The preset to use for the popover.
|
|
53
54
|
* @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
|
|
55
|
+
* @attribute {string} [anchor-accessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
|
|
54
56
|
*
|
|
55
57
|
* @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
|
|
56
58
|
* @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.
|
|
@@ -144,6 +146,9 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
|
|
|
144
146
|
case POPOVER_CONSTANTS.observedAttributes.DISTINCT:
|
|
145
147
|
this.distinct = newValue;
|
|
146
148
|
return;
|
|
149
|
+
case POPOVER_CONSTANTS.observedAttributes.ANCHOR_ACCESSIBILITY:
|
|
150
|
+
this.anchorAccessibility = newValue || POPOVER_CONSTANTS.defaults.ANCHOR_ACCESSIBILITY;
|
|
151
|
+
return;
|
|
147
152
|
}
|
|
148
153
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
149
154
|
}
|
|
@@ -181,6 +186,9 @@ __decorate([
|
|
|
181
186
|
__decorate([
|
|
182
187
|
coreProperty()
|
|
183
188
|
], PopoverComponent.prototype, "distinct", void 0);
|
|
189
|
+
__decorate([
|
|
190
|
+
coreProperty()
|
|
191
|
+
], PopoverComponent.prototype, "anchorAccessibility", void 0);
|
|
184
192
|
PopoverComponent = __decorate([
|
|
185
193
|
customElement({
|
|
186
194
|
name: POPOVER_CONSTANTS.elementName,
|
|
@@ -27,6 +27,9 @@ declare global {
|
|
|
27
27
|
}
|
|
28
28
|
/**
|
|
29
29
|
* @tag forge-profile-card
|
|
30
|
+
*
|
|
31
|
+
* @summary Profile cards display user information and actions in a structured card format. This component is deprecated prefer using the `<forge-user-profile>` component from the extended library instead.
|
|
32
|
+
|
|
30
33
|
*/
|
|
31
34
|
export declare class ProfileCardComponent extends BaseComponent implements IProfileCardComponent {
|
|
32
35
|
static get observedAttributes(): string[];
|
|
@@ -17,6 +17,9 @@ const template = '<template><div class=\"forge-profile-card\" part=\"root\"><div
|
|
|
17
17
|
const styles = ':host{display:block}:host([hidden]){display:none}.forge-profile-card{--_profile-card-min-width:var(--forge-profile-card-min-width, 360px);--_profile-card-shape:var(--forge-profile-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_profile-card-avatar-size:var(--forge-profile-card-avatar-size, 56px)}.forge-profile-card{min-width:var(--_profile-card-min-width);border-radius:var(--_profile-card-shape)}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card .info-container{display:flex;align-items:center;padding-block:var(--forge-spacing-xsmall,8px);padding-inline:var(--forge-spacing-medium,16px)}.forge-profile-card .avatar{display:flex;align-items:center;padding:var(--forge-spacing-xsmall,8px);margin-inline-end:var(--forge-spacing-medium,16px);--forge-avatar-size:var(--_profile-card-avatar-size)}.forge-profile-card .text{display:flex;flex-direction:column}.forge-profile-card .full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-font-size-scale, 1)));font-weight:var(--forge-typography-heading2-font-weight,500);line-height:var(--forge-typography-heading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-heading2-letter-spacing, .0125em);text-transform:var(--forge-typography-heading2-text-transform,inherit);text-decoration:var(--forge-typography-heading2-text-decoration,inherit)}.forge-profile-card .email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-font-size-scale, .875)));font-weight:var(--forge-typography-subheading1-font-weight,400);line-height:var(--forge-typography-subheading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-subheading1-letter-spacing, normal);text-transform:var(--forge-typography-subheading1-text-transform,inherit);text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}#action-toolbar{--forge-toolbar-padding:8px}#action-toolbar forge-button:not(:last-of-type){margin-inline-end:8px}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-profile-card
|
|
20
|
+
*
|
|
21
|
+
* @summary Profile cards display user information and actions in a structured card format. This component is deprecated prefer using the `<forge-user-profile>` component from the extended library instead.
|
|
22
|
+
|
|
20
23
|
*/
|
|
21
24
|
let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
|
|
22
25
|
static get observedAttributes() {
|
|
@@ -30,8 +30,7 @@ declare const RadioComponent_base: import("../../constants").AbstractConstructor
|
|
|
30
30
|
/**
|
|
31
31
|
* @tag forge-radio
|
|
32
32
|
*
|
|
33
|
-
* @summary The Forge Radio component is used to create a form input where only one out of a set of
|
|
34
|
-
* values should be selected.
|
|
33
|
+
* @summary The Forge Radio component is used to create a form input where only one out of a set of values should be selected.
|
|
35
34
|
*
|
|
36
35
|
* @cssproperty --forge-radio-primary-color - The primary color of the radio button when checked.
|
|
37
36
|
* @cssproperty --forge-radio-inactive-color - The color of the radio button when unchecked.
|
package/esm/radio/radio/radio.js
CHANGED
|
@@ -23,8 +23,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
|
|
|
23
23
|
/**
|
|
24
24
|
* @tag forge-radio
|
|
25
25
|
*
|
|
26
|
-
* @summary The Forge Radio component is used to create a form input where only one out of a set of
|
|
27
|
-
* values should be selected.
|
|
26
|
+
* @summary The Forge Radio component is used to create a form input where only one out of a set of values should be selected.
|
|
28
27
|
*
|
|
29
28
|
* @cssproperty --forge-radio-primary-color - The primary color of the radio button when checked.
|
|
30
29
|
* @cssproperty --forge-radio-inactive-color - The color of the radio button when unchecked.
|
|
@@ -15,7 +15,7 @@ declare global {
|
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-scaffold
|
|
17
17
|
*
|
|
18
|
-
* @summary
|
|
18
|
+
* @summary The scaffold provides a generic layout structure for your content using common named areas. Use scaffolds for full page layouts or smaller sections within other elements where you want positioned content areas and scrollable body content.
|
|
19
19
|
*
|
|
20
20
|
* @property {boolean} [viewport=false] - Whether the scaffold should be full viewport height.
|
|
21
21
|
*
|
package/esm/scaffold/scaffold.js
CHANGED
|
@@ -12,7 +12,7 @@ const styles = ':host{--_scaffold-height:var(--forge-scaffold-height, 100%);--_s
|
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-scaffold
|
|
14
14
|
*
|
|
15
|
-
* @summary
|
|
15
|
+
* @summary The scaffold provides a generic layout structure for your content using common named areas. Use scaffolds for full page layouts or smaller sections within other elements where you want positioned content areas and scrollable body content.
|
|
16
16
|
*
|
|
17
17
|
* @property {boolean} [viewport=false] - Whether the scaffold should be full viewport height.
|
|
18
18
|
*
|