@tylertech/forge 3.7.0 → 3.8.0-dev.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/custom-elements.json +175 -131
- package/dist/button/forge-button.css +3 -2
- package/dist/dialog/forge-dialog.css +3 -0
- package/dist/lib.js +23 -15
- package/dist/lib.js.map +4 -4
- package/dist/switch/forge-switch.css +1 -1
- package/dist/vscode.html-custom-data.json +9 -30
- package/esm/app-bar/notification-button/app-bar-notification-button-adapter.js +4 -5
- package/esm/app-bar/notification-button/app-bar-notification-button.js +6 -3
- package/esm/app-bar/profile-button/app-bar-profile-button.js +1 -1
- package/esm/autocomplete/autocomplete-adapter.js +1 -1
- package/esm/avatar/avatar-constants.d.ts +1 -0
- package/esm/avatar/avatar-constants.js +1 -0
- package/esm/avatar/avatar.d.ts +1 -1
- package/esm/avatar/avatar.js +1 -1
- package/esm/badge/badge-component-delegate.js +1 -2
- package/esm/badge/badge-constants.d.ts +1 -0
- package/esm/badge/badge-constants.js +1 -0
- package/esm/badge/badge.d.ts +20 -23
- package/esm/badge/badge.js +57 -47
- package/esm/badge/index.js +3 -3
- package/esm/bottom-sheet/bottom-sheet-constants.d.ts +1 -1
- package/esm/bottom-sheet/bottom-sheet.d.ts +3 -1
- package/esm/button/button.js +1 -1
- package/esm/button-toggle/button-toggle-group/button-toggle-group-adapter.js +1 -2
- package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +6 -6
- package/esm/button-toggle/button-toggle-group/button-toggle-group.js +6 -6
- package/esm/card/card-constants.d.ts +1 -0
- package/esm/card/card-constants.js +1 -0
- package/esm/card/card.d.ts +12 -13
- package/esm/card/card.js +25 -34
- package/esm/card/index.js +3 -3
- package/esm/checkbox/checkbox.d.ts +5 -1
- package/esm/chips/chip/chip-constants.d.ts +1 -1
- package/esm/core/delegates/base-component-delegate.d.ts +1 -1
- package/esm/core/mask/date-input-mask.d.ts +3 -3
- package/esm/core/mask/date-input-mask.js +7 -8
- package/esm/core/mask/intermediate-time-parser.d.ts +2 -2
- package/esm/core/mask/intermediate-time-parser.js +2 -3
- package/esm/core/mask/time-input-mask.d.ts +3 -3
- package/esm/core/mask/time-input-mask.js +4 -5
- package/esm/core/mixins/label/with-label-aware.d.ts +4 -1
- package/esm/core/utils/a11y-utils.d.ts +0 -8
- package/esm/core/utils/a11y-utils.js +5 -25
- package/esm/core/utils/dismissible-stack.d.ts +7 -0
- package/esm/core/utils/position-utils.d.ts +1 -2
- package/esm/core/utils/position-utils.js +7 -22
- package/esm/core/utils/utils.d.ts +8 -0
- package/esm/core/utils/utils.js +26 -1
- package/esm/date-picker/base/base-date-picker-constants.d.ts +2 -2
- package/esm/deprecated/button/deprecated-button.js +1 -1
- package/esm/dialog/dialog-core.js +2 -2
- package/esm/dialog/dialog.d.ts +2 -0
- package/esm/dialog/dialog.js +1 -1
- package/esm/expansion-panel/expansion-panel-adapter.d.ts +31 -0
- package/esm/expansion-panel/expansion-panel-adapter.js +60 -1
- package/esm/expansion-panel/expansion-panel-constants.d.ts +4 -0
- package/esm/expansion-panel/expansion-panel-constants.js +4 -1
- package/esm/expansion-panel/expansion-panel-core.d.ts +13 -1
- package/esm/expansion-panel/expansion-panel-core.js +63 -1
- package/esm/expansion-panel/expansion-panel.d.ts +9 -0
- package/esm/expansion-panel/expansion-panel.js +14 -0
- package/esm/floating-action-button/floating-action-button-constants.d.ts +1 -1
- package/esm/icon/icon-constants.d.ts +1 -1
- package/esm/icon/icon-registry.d.ts +6 -0
- package/esm/icon-button/icon-button-constants.d.ts +1 -1
- package/esm/label/label-adapter.js +1 -1
- package/esm/list/list-item/list-item.js +1 -1
- package/esm/meter/meter/meter.js +2 -1
- package/esm/meter/meter-group/meter-group.js +2 -1
- package/esm/overlay/base/base-overlay-core.d.ts +3 -3
- package/esm/overlay/base/base-overlay.d.ts +3 -3
- package/esm/overlay/base/base-overlay.js +11 -1
- package/esm/overlay/base/overlay-aware-core.d.ts +3 -3
- package/esm/overlay/base/overlay-aware-core.js +2 -1
- package/esm/overlay/overlay-adapter.d.ts +2 -2
- package/esm/overlay/overlay-adapter.js +6 -14
- package/esm/overlay/overlay-constants.d.ts +2 -5
- package/esm/overlay/overlay-constants.js +2 -23
- package/esm/overlay/overlay-core.d.ts +3 -3
- package/esm/overlay/overlay-core.js +13 -3
- package/esm/overlay/overlay.d.ts +2 -2
- package/esm/overlay/overlay.js +2 -2
- package/esm/popover/popover.js +1 -1
- package/esm/profile-card/profile-card-core.js +4 -4
- package/esm/radio/core/radio-group-manager.d.ts +2 -1
- package/esm/radio/radio/radio.d.ts +1 -0
- package/esm/split-button/split-button-constants.d.ts +2 -2
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/stepper/stepper/stepper-constants.d.ts +1 -3
- package/esm/switch/switch.d.ts +5 -1
- package/esm/switch/switch.js +1 -1
- package/esm/table/table-core.js +10 -2
- package/esm/table/table-utils.js +8 -4
- package/esm/time-picker/time-picker-constants.d.ts +2 -2
- package/esm/toast/toast-constants.d.ts +1 -1
- package/esm/tooltip/tooltip-constants.d.ts +1 -1
- package/package.json +4 -4
- package/sass/badge/badge.scss +10 -10
- package/sass/button/_core.scss +1 -0
- package/sass/calendar/_variables.scss +3 -2
- package/sass/card/card.scss +1 -1
- package/sass/core/styles/tokens/button/_tokens.scss +2 -2
- package/sass/core/styles/tokens/slider/_tokens.scss +10 -4
- package/sass/core/styles/tokens/switch/_tokens.scss +1 -1
- package/sass/dialog/dialog.scss +8 -0
- package/sass/dialog/forge-dialog.scss +4 -0
- package/sass/linear-progress/linear-progress.scss +7 -3
- package/sass/list/list-item/list-item.scss +1 -1
- package/sass/popover/popover.scss +0 -1
- package/sass/slider/_core.scss +2 -3
|
@@ -33,7 +33,7 @@ export declare const ICON_CONSTANTS: {
|
|
|
33
33
|
DEFAULT_NETWORK_BASE_URL: string;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
|
-
export declare const ICON_REGISTRY_KEY
|
|
36
|
+
export declare const ICON_REGISTRY_KEY: "forgeIcons";
|
|
37
37
|
export type IconUrlBuilder = (name: string, type: IconExternalType) => string;
|
|
38
38
|
export type IconExternalType = '' | 'custom' | 'standard' | 'extended';
|
|
39
39
|
export type IconTheme = Theme | 'text-medium' | 'text-low';
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { ICON_REGISTRY_KEY } from './icon-constants';
|
|
6
7
|
/** The shape of an SVG icon that can be defined with the icon registry. */
|
|
7
8
|
export interface IIcon {
|
|
8
9
|
/** The unique name of the icon. */
|
|
@@ -14,6 +15,11 @@ export interface IIconDescriptor {
|
|
|
14
15
|
raw: string;
|
|
15
16
|
node?: SVGElement;
|
|
16
17
|
}
|
|
18
|
+
declare global {
|
|
19
|
+
interface Window {
|
|
20
|
+
[ICON_REGISTRY_KEY]: Map<string, IIconDescriptor>;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
17
23
|
/**
|
|
18
24
|
* The registry for SVG icon instances being used within the current context.
|
|
19
25
|
*/
|
|
@@ -34,7 +34,7 @@ export declare const ICON_BUTTON_CONSTANTS: {
|
|
|
34
34
|
DEFAULT_VARIANT: IconButtonVariant;
|
|
35
35
|
DEFAULT_THEME: IconButtonTheme;
|
|
36
36
|
DEFAULT_SHAPE: IconButtonShape;
|
|
37
|
-
DEFAULT_DENSITY:
|
|
37
|
+
DEFAULT_DENSITY: IconButtonDensity;
|
|
38
38
|
};
|
|
39
39
|
};
|
|
40
40
|
export type IconButtonVariant = 'icon' | 'outlined' | 'tonal' | 'filled' | 'raised';
|
|
@@ -103,7 +103,7 @@ export class LabelAdapter extends BaseAdapter {
|
|
|
103
103
|
targetEl = this._component.querySelector(selector);
|
|
104
104
|
}
|
|
105
105
|
if (targetEl && !targetEl.shadowRoot) {
|
|
106
|
-
// If the target element has not been
|
|
106
|
+
// If the target element has not been upgraded, mark it to connect later
|
|
107
107
|
targetEl.setAttribute(DEFERRED_LABEL_TARGET, '');
|
|
108
108
|
targetEl[forgeLabelRef] = this._component;
|
|
109
109
|
return null;
|
|
@@ -14,7 +14,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
|
|
|
14
14
|
import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
15
15
|
import { BaseComponent } from '../../core/base/base-component';
|
|
16
16
|
const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div></template>';
|
|
17
|
-
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button
|
|
17
|
+
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button:not([slot]),[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-list-item
|
|
20
20
|
*
|
package/esm/meter/meter/meter.js
CHANGED
|
@@ -8,7 +8,8 @@ import { LitElement, html, unsafeCSS } from 'lit';
|
|
|
8
8
|
import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js';
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
10
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
11
|
-
import { setDefaultAria
|
|
11
|
+
import { setDefaultAria } from '../../core/utils/a11y-utils';
|
|
12
|
+
import { toggleState } from '../../core/utils/utils';
|
|
12
13
|
const styles = ':host{display:inline}.forge-meter{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe));--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px));--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-inner-shape:var(--forge-meter-inner-shape, 0);--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_meter-tickmarks:var(--forge-meter-tickmarks, 10);--_meter-tickmark-opacity:var(--forge-meter-tickmark-opacity, 54%);--_meter-transition-duration:var(--forge-meter-transition-duration, var(--forge-animation-duration-short4, 200ms));--_meter-transition-timing:var(--forge-meter-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-meter{box-sizing:border-box}.forge-meter .heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter .track{position:relative;block-size:var(--_meter-height);border-radius:var(--_meter-shape);overflow:hidden;background:var(--_meter-background)}.forge-meter .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900));transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.forge-meter .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.forge-meter .track.segmented .bar{transition-property:translate,box-shadow,background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.lowest{--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0)}.forge-meter .track.tickmarks::after{content:\"\";position:relative;display:block;width:100%;height:100%;margin-left:2px;background:repeating-linear-gradient(90deg,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:-2px;opacity:var(--_meter-tickmark-opacity);pointer-events:none;transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .bar{position:absolute;left:-100%;width:100%;height:100%;border-radius:var(--_meter-inner-shape);box-shadow:var(--_meter-inner-elevation);background:var(--_meter-color);translate:var(--_meter-percentage) 0;transition-property:translate,box-shadow;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter.grouped{display:block;position:absolute;z-index:var(--_meter-z-index);top:0;left:var(--_meter-inset);width:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);height:100%;border-radius:var(--_meter-inner-shape);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(-1 * var(--_meter-group-height) * .5);background:var(--_meter-color);box-shadow:var(--_meter-inner-elevation)}.forge-meter.grouped.muted{--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.density--small{--_meter-height:var(--forge-meter-height, var(--forge-spacing-xsmall, 8px))}.forge-meter.density--medium{--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px))}.forge-meter.density--large{--_meter-height:var(--forge-meter-height, var(--forge-spacing-large, 24px))}.forge-meter.shape--default{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--rounded{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--squared{--_meter-shape:var(--forge-meter-shape, 0)}.forge-meter.inner-shape--inherit{--_meter-inner-shape:var(--_meter-shape)}.forge-meter.muted .track{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.muted .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.forge-meter.muted .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.forge-meter.muted .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter .track{width:var(--_meter-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .track.tickmarks::after{margin-top:-2px;margin-left:0;background:repeating-linear-gradient(0,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:0;background-position-y:2px}:host(:is(:state(vertical),:--vertical)) .forge-meter .bar{left:initial;top:100%;translate:0 calc(-1 * var(--_meter-percentage))}:host(:is(:state(vertical),:--vertical)) .forge-meter.grouped{display:block;top:calc(100% - var(--_meter-percentage) - var(--_meter-inset));left:0;width:100%;height:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);max-width:initial;border-radius:var(--_meter-inner-shape);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-left:0;margin-bottom:calc(-1 * var(--_meter-group-height) * .5)}.theme--primary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--primary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--secondary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--secondary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--tertiary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--tertiary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--success:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--success.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--warning:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--warning.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--error:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--error.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--info:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}.theme--info.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}@media (prefers-reduced-motion:reduce){.track{--_meter-transition-duration:var(--forge-meter-transition-duration, 0)}}@media (forced-colors:active){.track{border:1px solid CanvasText}.track .bar{background:CanvasText}.grouped{border-inline-end:1px solid Canvas!important;background:CanvasText!important}:host(:is(:state(vertical),:--vertical)) .grouped{border-block-start:1px solid CanvasText!important;border-inline-end:initial!important}}';
|
|
13
14
|
const VALUE_STATE_MAP = new Map([
|
|
14
15
|
['optimal', 'optimum-value'],
|
|
@@ -8,7 +8,8 @@ import { debounce } from '@tylertech/forge-core';
|
|
|
8
8
|
import { html, LitElement, unsafeCSS } from 'lit';
|
|
9
9
|
import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
|
-
import { setDefaultAria
|
|
11
|
+
import { setDefaultAria } from '../../core/utils/a11y-utils';
|
|
12
|
+
import { toggleState } from '../../core/utils/utils';
|
|
12
13
|
const styles = ':host{display:inline}.forge-meter-group{--_meter-group-background:var(--forge-meter-group-background, var(--forge-theme-surface-container-low, #ebebeb));--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px));--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-group-tickmarks:var(--forge-meter-group-tickmarks, 10);--_meter-group-tickmark-color:var(--forge-meter-group-tickmark-color, var(--forge-theme-outline-high, #212121));--_meter-group-tickmark-opacity:var(--forge-meter-group-tickmark-opacity, 54%)}.forge-meter-group{box-sizing:border-box}.forge-meter-group .heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter-group .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter-group .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter-group .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter-group .track{position:relative;height:var(--_meter-group-height);border-radius:var(--_meter-group-shape);overflow:hidden;background:var(--_meter-group-background)}.forge-meter-group .track.tickmarks::after{content:\"\";position:relative;display:block;z-index:9999;width:100%;height:100%;margin-left:-1px;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color) 0,var(--_meter-group-tickmark-color) 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px));opacity:var(--_meter-group-tickmark-opacity);pointer-events:none}.forge-meter-group .track.inner-shape--inherit{--forge-meter-inner-shape:var(--_meter-group-shape)}.forge-meter-group .track.shape--default{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--rounded{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--squared{--_meter-group-shape:var(--forge-meter-group-shape, 0)}.forge-meter-group .track.density--small{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-xsmall, 8px))}.forge-meter-group .track.density--medium{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px))}.forge-meter-group .track.density--large{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-large, 24px))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter-group{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track{width:var(--_meter-group-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track.tickmarks::after{margin-top:1px;margin-left:0;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color),true 0,var(--_meter-group-tickmark-color),true 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px))}@media (forced-colors:active){.track{border:1px solid CanvasText}}';
|
|
13
14
|
/**
|
|
14
15
|
* @tag forge-meter-group
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { IBaseAdapter } from '../../core';
|
|
7
7
|
import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
|
|
8
|
-
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
|
|
8
|
+
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
|
|
9
9
|
export interface IBaseOverlayCore {
|
|
10
10
|
initialize(): void;
|
|
11
11
|
destroy(): void;
|
|
@@ -19,7 +19,7 @@ export interface IBaseOverlayCore {
|
|
|
19
19
|
offset: IOverlayOffset;
|
|
20
20
|
hide: OverlayHideState;
|
|
21
21
|
persistent: boolean;
|
|
22
|
-
shift:
|
|
22
|
+
shift: OverlayShiftState;
|
|
23
23
|
flip: OverlayFlipState;
|
|
24
24
|
boundary: string | null;
|
|
25
25
|
boundaryElement: HTMLElement | null;
|
|
@@ -41,7 +41,7 @@ export declare abstract class BaseOverlayCore<T extends IBaseAdapter> implements
|
|
|
41
41
|
abstract offset: IOverlayOffset;
|
|
42
42
|
abstract hide: OverlayHideState;
|
|
43
43
|
abstract persistent: boolean;
|
|
44
|
-
abstract shift:
|
|
44
|
+
abstract shift: OverlayShiftState;
|
|
45
45
|
abstract flip: OverlayFlipState;
|
|
46
46
|
abstract boundary: string | null;
|
|
47
47
|
abstract boundaryElement: HTMLElement | null;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
|
|
7
7
|
import { IBaseOverlayCore } from './base-overlay-core';
|
|
8
|
-
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
|
|
8
|
+
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
|
|
9
9
|
import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
|
|
10
10
|
export interface IBaseOverlay extends IBaseComponent {
|
|
11
11
|
anchorElement: HTMLElement | VirtualElement | null;
|
|
@@ -16,7 +16,7 @@ export interface IBaseOverlay extends IBaseComponent {
|
|
|
16
16
|
placement: OverlayPlacement;
|
|
17
17
|
positionStrategy: OverlayPositionStrategy;
|
|
18
18
|
offset: IOverlayOffset;
|
|
19
|
-
shift:
|
|
19
|
+
shift: OverlayShiftState;
|
|
20
20
|
hide: OverlayHideState;
|
|
21
21
|
persistent: boolean;
|
|
22
22
|
flip: OverlayFlipState;
|
|
@@ -38,7 +38,7 @@ export declare abstract class BaseOverlay<T extends IBaseOverlayCore> extends Ba
|
|
|
38
38
|
placement: OverlayPlacement;
|
|
39
39
|
positionStrategy: OverlayPositionStrategy;
|
|
40
40
|
offset: IOverlayOffset;
|
|
41
|
-
shift:
|
|
41
|
+
shift: OverlayShiftState;
|
|
42
42
|
hide: OverlayHideState;
|
|
43
43
|
persistent: boolean;
|
|
44
44
|
flip: OverlayFlipState;
|
|
@@ -42,7 +42,17 @@ export class BaseOverlay extends BaseComponent {
|
|
|
42
42
|
this.persistent = coerceBoolean(newValue);
|
|
43
43
|
break;
|
|
44
44
|
case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
|
|
45
|
-
|
|
45
|
+
// Handle legacy boolean attributes for shift by converting to corresponding type values
|
|
46
|
+
// TODO: Remove support for boolean attribute conversion in v4
|
|
47
|
+
if (newValue === '' || newValue?.trim() === 'true') {
|
|
48
|
+
this.shift = 'auto';
|
|
49
|
+
}
|
|
50
|
+
else if (newValue == null || newValue?.trim() === 'false') {
|
|
51
|
+
this.shift = 'never';
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
this.shift = newValue;
|
|
55
|
+
}
|
|
46
56
|
break;
|
|
47
57
|
case OVERLAY_CONSTANTS.observedAttributes.FLIP:
|
|
48
58
|
this.flip = newValue;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { IBaseOverlayCore } from './base-overlay-core';
|
|
7
7
|
import { IOverlayComponent } from '../overlay';
|
|
8
8
|
import { IOverlayAwareAdapter } from './overlay-aware-adapter';
|
|
9
|
-
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
|
|
9
|
+
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
|
|
10
10
|
import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
|
|
11
11
|
export interface IOverlayAwareCore extends IBaseOverlayCore {
|
|
12
12
|
readonly overlayElement: IOverlayComponent;
|
|
@@ -39,8 +39,8 @@ export declare abstract class OverlayAwareCore<T extends IOverlayAwareAdapter> i
|
|
|
39
39
|
set hide(value: OverlayHideState);
|
|
40
40
|
get persistent(): boolean;
|
|
41
41
|
set persistent(value: boolean);
|
|
42
|
-
get shift():
|
|
43
|
-
set shift(value:
|
|
42
|
+
get shift(): OverlayShiftState;
|
|
43
|
+
set shift(value: OverlayShiftState);
|
|
44
44
|
get flip(): OverlayFlipState;
|
|
45
45
|
set flip(value: OverlayFlipState);
|
|
46
46
|
get boundary(): string | null;
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { OVERLAY_CONSTANTS } from '../overlay-constants';
|
|
7
|
+
import { toggleAttribute } from '@tylertech/forge-core';
|
|
7
8
|
export class OverlayAwareCore {
|
|
8
9
|
constructor(_adapter) {
|
|
9
10
|
this._adapter = _adapter;
|
|
@@ -115,7 +116,7 @@ export class OverlayAwareCore {
|
|
|
115
116
|
set shift(value) {
|
|
116
117
|
if (this._adapter.overlayElement.shift !== value) {
|
|
117
118
|
this._adapter.overlayElement.shift = value;
|
|
118
|
-
this._adapter.
|
|
119
|
+
toggleAttribute(this._adapter.hostElement, this._adapter.overlayElement.shift !== OVERLAY_CONSTANTS.defaults.SHIFT, OVERLAY_CONSTANTS.attributes.SHIFT, String(this._adapter.overlayElement.shift));
|
|
119
120
|
}
|
|
120
121
|
}
|
|
121
122
|
get flip() {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
|
|
7
7
|
import { PositionPlacement, VirtualElement } from '../core/utils/position-utils';
|
|
8
8
|
import { IOverlayComponent } from './overlay';
|
|
9
|
-
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy } from './overlay-constants';
|
|
9
|
+
import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy, OverlayShiftState } from './overlay-constants';
|
|
10
10
|
export interface IOverlayAdapter extends IBaseAdapter<IOverlayComponent> {
|
|
11
11
|
show(): void;
|
|
12
12
|
hide(): void;
|
|
@@ -24,7 +24,7 @@ export interface IPositionElementConfig {
|
|
|
24
24
|
placement: PositionPlacement;
|
|
25
25
|
hide: OverlayHideState;
|
|
26
26
|
offset: IOverlayOffset;
|
|
27
|
-
shift:
|
|
27
|
+
shift: OverlayShiftState;
|
|
28
28
|
flip: OverlayFlipState;
|
|
29
29
|
boundary: string | null;
|
|
30
30
|
boundaryElement: HTMLElement | null;
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
import { autoUpdate } from '@floating-ui/dom';
|
|
7
7
|
import { getShadowElement } from '@tylertech/forge-core';
|
|
8
8
|
import { BaseAdapter } from '../core/base/base-adapter';
|
|
9
|
-
import {
|
|
10
|
-
import { locateElementById
|
|
9
|
+
import { positionElementAsync, VirtualElement } from '../core/utils/position-utils';
|
|
10
|
+
import { locateElementById } from '../core/utils/utils';
|
|
11
11
|
import { OverlayComponent } from './overlay';
|
|
12
|
-
import {
|
|
12
|
+
import { OVERLAY_CONSTANTS, overlayStack, SUPPORTS_POPOVER } from './overlay-constants';
|
|
13
13
|
export class OverlayAdapter extends BaseAdapter {
|
|
14
14
|
constructor(component) {
|
|
15
15
|
super(component);
|
|
@@ -73,14 +73,14 @@ export class OverlayAdapter extends BaseAdapter {
|
|
|
73
73
|
strategy,
|
|
74
74
|
placement,
|
|
75
75
|
hide: hide !== 'never',
|
|
76
|
-
shift,
|
|
76
|
+
shift: shift !== 'never',
|
|
77
77
|
shiftOptions: {
|
|
78
78
|
boundary: boundaryEl
|
|
79
79
|
},
|
|
80
80
|
flip: flip !== 'never',
|
|
81
81
|
flipOptions: {
|
|
82
|
-
|
|
83
|
-
fallbackPlacements
|
|
82
|
+
boundary: boundaryEl,
|
|
83
|
+
fallbackPlacements,
|
|
84
84
|
crossAxis: flip === 'cross' || flip === 'auto',
|
|
85
85
|
mainAxis: flip === 'main' || flip === 'auto'
|
|
86
86
|
},
|
|
@@ -117,14 +117,6 @@ export class OverlayAdapter extends BaseAdapter {
|
|
|
117
117
|
// Update the clipped attributes to allow for state-based clipping adjustments by consumers
|
|
118
118
|
this._component.toggleAttribute(OVERLAY_CONSTANTS.attributes.CLIPPED_X, isClippedX);
|
|
119
119
|
this._component.toggleAttribute(OVERLAY_CONSTANTS.attributes.CLIPPED_Y, isClippedY);
|
|
120
|
-
// If clipped, adjust the position by the clipping delta on each axis
|
|
121
|
-
if (isClippedX || isClippedY) {
|
|
122
|
-
const { x, y } = result;
|
|
123
|
-
const { height, width } = overlayRect;
|
|
124
|
-
const clippedDeltaX = isClippedX ? x + width - viewportWidth : 0;
|
|
125
|
-
const clippedDeltaY = isClippedY ? y + height - viewportHeight : 0;
|
|
126
|
-
this._rootElement.style.translate = `${roundByDPR(x - clippedDeltaX)}px ${roundByDPR(y - clippedDeltaY)}px`;
|
|
127
|
-
}
|
|
128
120
|
});
|
|
129
121
|
}
|
|
130
122
|
tryCleanupAutoUpdate() {
|
|
@@ -50,6 +50,7 @@ export declare const OVERLAY_CONSTANTS: {
|
|
|
50
50
|
defaults: {
|
|
51
51
|
readonly HIDE: "anchor-hidden";
|
|
52
52
|
readonly FLIP: "auto";
|
|
53
|
+
readonly SHIFT: "auto";
|
|
53
54
|
};
|
|
54
55
|
};
|
|
55
56
|
export declare const SUPPORTS_POPOVER: boolean;
|
|
@@ -62,6 +63,7 @@ export type OverlayPositionStrategy = 'absolute' | 'fixed';
|
|
|
62
63
|
export type OverlayPlacement = PositionPlacement;
|
|
63
64
|
export type OverlayHideState = 'anchor-hidden' | 'never';
|
|
64
65
|
export type OverlayFlipState = 'auto' | 'main' | 'cross' | 'never';
|
|
66
|
+
export type OverlayShiftState = 'auto' | 'never' | boolean;
|
|
65
67
|
export type OverlayLightDismissReason = 'click' | 'escape';
|
|
66
68
|
export interface IOverlayToggleEvent extends Event {
|
|
67
69
|
newState: 'closed' | 'open';
|
|
@@ -71,8 +73,3 @@ export interface OverlayLightDismissEventData {
|
|
|
71
73
|
reason: OverlayLightDismissReason;
|
|
72
74
|
}
|
|
73
75
|
export declare const overlayStack: unique symbol;
|
|
74
|
-
/**
|
|
75
|
-
* This is a map of fallback placements for each placement. The fallback placements are used when the
|
|
76
|
-
* original placement is not possible due to the boundary or other constraints.
|
|
77
|
-
*/
|
|
78
|
-
export declare const OVERLAY_FALLBACK_PLACEMENT_MAP: Record<OverlayPlacement, OverlayPlacement[]>;
|
|
@@ -38,7 +38,8 @@ const events = {
|
|
|
38
38
|
};
|
|
39
39
|
const defaults = {
|
|
40
40
|
HIDE: 'anchor-hidden',
|
|
41
|
-
FLIP: 'auto'
|
|
41
|
+
FLIP: 'auto',
|
|
42
|
+
SHIFT: 'auto'
|
|
42
43
|
};
|
|
43
44
|
export const OVERLAY_CONSTANTS = {
|
|
44
45
|
elementName,
|
|
@@ -51,25 +52,3 @@ export const OVERLAY_CONSTANTS = {
|
|
|
51
52
|
};
|
|
52
53
|
export const SUPPORTS_POPOVER = supportsPopover();
|
|
53
54
|
export const overlayStack = Symbol('overlayStack');
|
|
54
|
-
/**
|
|
55
|
-
* This is a map of fallback placements for each placement. The fallback placements are used when the
|
|
56
|
-
* original placement is not possible due to the boundary or other constraints.
|
|
57
|
-
*/
|
|
58
|
-
export const OVERLAY_FALLBACK_PLACEMENT_MAP = {
|
|
59
|
-
// Left
|
|
60
|
-
left: ['right', 'bottom', 'top', 'top-start', 'top-end', 'left-start', 'left-end', 'right-start', 'right-end'],
|
|
61
|
-
'left-start': ['left-end', 'right-start', 'right-end', 'bottom', 'top'],
|
|
62
|
-
'left-end': ['left-start', 'right-end', 'right-start', 'bottom', 'top', 'bottom-start', 'bottom-end'],
|
|
63
|
-
// Right
|
|
64
|
-
right: ['left', 'bottom', 'top', 'top-start', 'top-end', 'left-start', 'left-end', 'right-start', 'right-end'],
|
|
65
|
-
'right-start': ['right-end', 'left-start', 'left-end', 'bottom', 'top'],
|
|
66
|
-
'right-end': ['right-start', 'left-end', 'left-start', 'bottom', 'top', 'bottom-start', 'bottom-end'],
|
|
67
|
-
// Top
|
|
68
|
-
top: ['bottom', 'left', 'right', 'bottom-start', 'left-start', 'left-end', 'right-start', 'right-end'],
|
|
69
|
-
'top-start': ['bottom-start', 'left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],
|
|
70
|
-
'top-end': ['bottom-end', 'left', 'right', 'right-start', 'right-end', 'left-start', 'left-end'],
|
|
71
|
-
// Bottom
|
|
72
|
-
bottom: ['top', 'left', 'right', 'top-start', 'left-start', 'left-end', 'right-start', 'right-end'],
|
|
73
|
-
'bottom-start': ['top-start', 'left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],
|
|
74
|
-
'bottom-end': ['top-end', 'left', 'right', 'right-start', 'right-end', 'left-start', 'left-end']
|
|
75
|
-
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { PositionPlacement } from '../core/utils/position-utils';
|
|
7
7
|
import { IBaseOverlayCore, BaseOverlayCore } from './base/base-overlay-core';
|
|
8
8
|
import { IOverlayAdapter } from './overlay-adapter';
|
|
9
|
-
import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayFlipState, OverlayHideState } from './overlay-constants';
|
|
9
|
+
import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayFlipState, OverlayHideState, OverlayShiftState } from './overlay-constants';
|
|
10
10
|
export interface IOverlayCore extends IBaseOverlayCore {
|
|
11
11
|
arrowElement: HTMLElement;
|
|
12
12
|
arrowElementOffset: number;
|
|
@@ -59,8 +59,8 @@ export declare class OverlayCore extends BaseOverlayCore<IOverlayAdapter> implem
|
|
|
59
59
|
set positionStrategy(value: OverlayPositionStrategy);
|
|
60
60
|
get offset(): IOverlayOffset;
|
|
61
61
|
set offset(value: IOverlayOffset);
|
|
62
|
-
get shift():
|
|
63
|
-
set shift(value:
|
|
62
|
+
get shift(): OverlayShiftState;
|
|
63
|
+
set shift(value: OverlayShiftState);
|
|
64
64
|
get hide(): OverlayHideState;
|
|
65
65
|
set hide(value: OverlayHideState);
|
|
66
66
|
get persistent(): boolean;
|
|
@@ -14,7 +14,7 @@ export class OverlayCore extends BaseOverlayCore {
|
|
|
14
14
|
this._placement = 'bottom';
|
|
15
15
|
this._positionStrategy = 'fixed';
|
|
16
16
|
this._offset = {};
|
|
17
|
-
this._shift =
|
|
17
|
+
this._shift = OVERLAY_CONSTANTS.defaults.SHIFT;
|
|
18
18
|
this._hide = OVERLAY_CONSTANTS.defaults.HIDE;
|
|
19
19
|
this._flip = OVERLAY_CONSTANTS.defaults.FLIP;
|
|
20
20
|
this._fallbackPlacements = null;
|
|
@@ -215,13 +215,23 @@ export class OverlayCore extends BaseOverlayCore {
|
|
|
215
215
|
return this._shift;
|
|
216
216
|
}
|
|
217
217
|
set shift(value) {
|
|
218
|
-
|
|
218
|
+
// Handle legacy boolean values for shift by converting them to the corresponding type value
|
|
219
|
+
// TODO: Remove support for boolean values in v4
|
|
220
|
+
if (value === true) {
|
|
221
|
+
value = 'auto';
|
|
222
|
+
}
|
|
223
|
+
else if (value === false) {
|
|
224
|
+
value = 'never';
|
|
225
|
+
}
|
|
226
|
+
else if (!['auto', 'never'].includes(value)) {
|
|
227
|
+
value = OVERLAY_CONSTANTS.defaults.SHIFT;
|
|
228
|
+
}
|
|
219
229
|
if (this._shift !== value) {
|
|
220
230
|
this._shift = value;
|
|
221
231
|
if (this._open) {
|
|
222
232
|
this.position();
|
|
223
233
|
}
|
|
224
|
-
this._adapter.
|
|
234
|
+
this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._shift);
|
|
225
235
|
}
|
|
226
236
|
}
|
|
227
237
|
get hide() {
|
package/esm/overlay/overlay.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ declare global {
|
|
|
39
39
|
* @property {OverlayPlacement} [placement="bottom"] - The placement of the overlay relative to the anchor element.
|
|
40
40
|
* @property {OverlayPositionStrategy} [positionStrategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
|
|
41
41
|
* @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
|
|
42
|
-
* @property {
|
|
42
|
+
* @property {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
|
|
43
43
|
* @property {OverlayHideState} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
|
|
44
44
|
* @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
|
|
45
45
|
* @property {OverlayFlipState} [flip="auto"] - Whether or not the overlay should flip to the opposite placement when not enough room.
|
|
@@ -64,7 +64,7 @@ declare global {
|
|
|
64
64
|
* @attribute {string} [position-strategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
|
|
65
65
|
* @attribute {string} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
|
|
66
66
|
* @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
|
|
67
|
-
* @attribute {
|
|
67
|
+
* @attribute {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
|
|
68
68
|
* @attribute {OverlayFlipState} [flip="auto"] - Tells the overlay not to flip to the opposite placement when not enough room.
|
|
69
69
|
* @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
|
|
70
70
|
* @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
|
package/esm/overlay/overlay.js
CHANGED
|
@@ -33,7 +33,7 @@ const styles = ':host{display:contents}:host([hidden]){display:none}.forge-overl
|
|
|
33
33
|
* @property {OverlayPlacement} [placement="bottom"] - The placement of the overlay relative to the anchor element.
|
|
34
34
|
* @property {OverlayPositionStrategy} [positionStrategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
|
|
35
35
|
* @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
|
|
36
|
-
* @property {
|
|
36
|
+
* @property {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
|
|
37
37
|
* @property {OverlayHideState} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
|
|
38
38
|
* @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
|
|
39
39
|
* @property {OverlayFlipState} [flip="auto"] - Whether or not the overlay should flip to the opposite placement when not enough room.
|
|
@@ -58,7 +58,7 @@ const styles = ':host{display:contents}:host([hidden]){display:none}.forge-overl
|
|
|
58
58
|
* @attribute {string} [position-strategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
|
|
59
59
|
* @attribute {string} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
|
|
60
60
|
* @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
|
|
61
|
-
* @attribute {
|
|
61
|
+
* @attribute {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
|
|
62
62
|
* @attribute {OverlayFlipState} [flip="auto"] - Tells the overlay not to flip to the opposite placement when not enough room.
|
|
63
63
|
* @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
|
|
64
64
|
* @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
|
package/esm/popover/popover.js
CHANGED
|
@@ -13,7 +13,7 @@ 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;max-height:100vh;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{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}}}';
|
|
17
17
|
/**
|
|
18
18
|
* @tag forge-popover
|
|
19
19
|
*
|
|
@@ -19,12 +19,12 @@ export class ProfileCardCore {
|
|
|
19
19
|
this._adapter.setSignOutButtonListener(this._signOutListener);
|
|
20
20
|
}
|
|
21
21
|
focus(options) {
|
|
22
|
-
if (this.
|
|
23
|
-
this._adapter.requestSignOutButtonFocus({ ...options, focusVisible: true });
|
|
24
|
-
}
|
|
25
|
-
else if (this._showProfileButton) {
|
|
22
|
+
if (this._showProfileButton) {
|
|
26
23
|
this._adapter.requestProfileButtonFocus({ ...options, focusVisible: true });
|
|
27
24
|
}
|
|
25
|
+
else if (this._showSignOutButton) {
|
|
26
|
+
this._adapter.requestSignOutButtonFocus({ ...options, focusVisible: true });
|
|
27
|
+
}
|
|
28
28
|
}
|
|
29
29
|
_setActionVisibility() {
|
|
30
30
|
const showActionToolbar = this._showSignOutButton || this._showProfileButton;
|