@tylertech/forge 3.10.4 → 3.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +343 -141
- package/dist/app-bar/forge-app-bar.css +11 -5
- package/dist/button/forge-button.css +12 -6
- package/dist/checkbox/forge-checkbox.css +21 -17
- package/dist/chips/forge-chips.css +10 -4
- package/dist/field/forge-field.css +7 -5
- package/dist/floating-action-button/forge-floating-action-button.css +10 -6
- package/dist/forge.css +6 -1
- package/dist/icon-button/forge-icon-button.css +10 -4
- package/dist/lib.js +22 -22
- package/dist/lib.js.map +4 -4
- package/dist/list/forge-list.css +57 -3
- package/dist/radio/forge-radio.css +20 -12
- package/dist/skip-link/forge-skip-link.css +36 -32
- package/dist/switch/forge-switch.css +7 -5
- package/dist/table/forge-table.css +6 -1
- package/dist/vscode.html-custom-data.json +53 -43
- package/esm/accordion/accordion.d.ts +2 -0
- package/esm/accordion/accordion.js +2 -0
- package/esm/app-bar/app-bar/app-bar-adapter.js +2 -2
- package/esm/app-bar/app-bar/app-bar.d.ts +1 -1
- package/esm/app-bar/app-bar/app-bar.js +1 -1
- package/esm/app-bar/help-button/app-bar-help-button.d.ts +1 -1
- package/esm/app-bar/help-button/app-bar-help-button.js +1 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.d.ts +1 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.js +1 -1
- package/esm/app-bar/notification-button/app-bar-notification-button.d.ts +2 -0
- package/esm/app-bar/notification-button/app-bar-notification-button.js +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.d.ts +2 -1
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.js +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button.d.ts +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button.js +2 -0
- package/esm/app-bar/search/app-bar-search.d.ts +2 -0
- package/esm/app-bar/search/app-bar-search.js +2 -0
- package/esm/autocomplete/autocomplete.d.ts +2 -0
- package/esm/autocomplete/autocomplete.js +2 -0
- package/esm/backdrop/backdrop.d.ts +2 -0
- package/esm/backdrop/backdrop.js +2 -0
- package/esm/badge/badge.d.ts +2 -0
- package/esm/badge/badge.js +2 -0
- package/esm/button/base/base-button-adapter.js +2 -2
- package/esm/button-area/button-area-adapter.js +2 -2
- package/esm/button-toggle/button-toggle/button-toggle-adapter.js +2 -2
- package/esm/button-toggle/button-toggle/button-toggle.d.ts +2 -0
- package/esm/button-toggle/button-toggle/button-toggle.js +2 -0
- package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +1 -1
- package/esm/button-toggle/button-toggle-group/button-toggle-group.js +1 -1
- package/esm/calendar/calendar-menu/calendar-menu.js +1 -1
- package/esm/calendar/calendar.d.ts +2 -0
- package/esm/calendar/calendar.js +3 -1
- package/esm/card/card.d.ts +2 -0
- package/esm/card/card.js +2 -0
- package/esm/chip-field/chip-field.d.ts +2 -0
- package/esm/chip-field/chip-field.js +2 -0
- package/esm/chips/chip/chip-adapter.js +2 -2
- package/esm/chips/chip/chip.d.ts +2 -0
- package/esm/chips/chip/chip.js +2 -0
- package/esm/color-picker/color-picker.d.ts +2 -0
- package/esm/color-picker/color-picker.js +3 -1
- package/esm/core/mixins/interactions/moveable/with-moveable.js +5 -7
- package/esm/core/utils/a11y-utils.js +17 -0
- package/esm/core/utils/utils.d.ts +16 -0
- package/esm/core/utils/utils.js +75 -2
- package/esm/date-picker/date-picker.d.ts +2 -0
- package/esm/date-picker/date-picker.js +2 -0
- package/esm/date-range-picker/date-range-picker.d.ts +2 -0
- package/esm/date-range-picker/date-range-picker.js +2 -0
- package/esm/deprecated/button/deprecated-button.js +3 -3
- package/esm/deprecated/icon-button/deprecated-icon-button.js +2 -2
- package/esm/dialog/dialog-adapter.d.ts +6 -0
- package/esm/dialog/dialog-adapter.js +16 -0
- package/esm/dialog/dialog-core.js +4 -0
- package/esm/drawer/drawer/drawer.d.ts +2 -0
- package/esm/drawer/drawer/drawer.js +3 -1
- package/esm/drawer/mini-drawer/mini-drawer.d.ts +2 -0
- package/esm/drawer/mini-drawer/mini-drawer.js +3 -1
- package/esm/drawer/modal-drawer/modal-drawer.d.ts +2 -0
- package/esm/drawer/modal-drawer/modal-drawer.js +3 -1
- package/esm/expansion-panel/expansion-panel-adapter.js +1 -1
- package/esm/expansion-panel/expansion-panel-core.js +3 -7
- package/esm/field/field-adapter.js +2 -2
- package/esm/field/field-core.d.ts +3 -3
- package/esm/focus-indicator/focus-indicator-constants.d.ts +1 -11
- package/esm/focus-indicator/focus-indicator-constants.js +2 -17
- package/esm/focus-indicator/focus-indicator.d.ts +52 -25
- package/esm/focus-indicator/focus-indicator.js +137 -61
- package/esm/focus-indicator/index.d.ts +0 -2
- package/esm/focus-indicator/index.js +0 -2
- package/esm/icon-button/icon-button.d.ts +2 -0
- package/esm/icon-button/icon-button.js +2 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.d.ts +2 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.js +2 -0
- package/esm/list/list/list.js +1 -1
- package/esm/list/list-item/list-item-constants.js +1 -1
- package/esm/list/list-item/list-item-core.d.ts +2 -0
- package/esm/list/list-item/list-item-core.js +29 -6
- package/esm/list/list-item/list-item.d.ts +1 -0
- package/esm/list/list-item/list-item.js +2 -1
- package/esm/list-dropdown/list-dropdown-constants.d.ts +6 -0
- package/esm/list-dropdown/list-dropdown-constants.js +6 -1
- package/esm/list-dropdown/list-dropdown-utils.js +28 -1
- package/esm/menu/menu-core.js +2 -2
- package/esm/menu/menu.d.ts +2 -0
- package/esm/menu/menu.js +2 -0
- package/esm/page-state/page-state.d.ts +2 -1
- package/esm/page-state/page-state.js +2 -1
- package/esm/paginator/paginator.d.ts +2 -0
- package/esm/paginator/paginator.js +2 -0
- package/esm/popover/popover.js +1 -1
- package/esm/profile-card/profile-card.d.ts +2 -0
- package/esm/profile-card/profile-card.js +2 -0
- package/esm/select/core/base-select-constants.d.ts +4 -0
- package/esm/select/core/base-select-core.d.ts +22 -2
- package/esm/select/core/base-select-core.js +217 -40
- package/esm/select/option/option.d.ts +2 -0
- package/esm/select/option/option.js +2 -0
- package/esm/select/option-group/option-group.d.ts +2 -0
- package/esm/select/option-group/option-group.js +2 -0
- package/esm/select/select/select-constants.d.ts +5 -0
- package/esm/select/select/select-constants.js +5 -2
- package/esm/select/select/select.d.ts +14 -2
- package/esm/select/select/select.js +22 -1
- package/esm/select/select-dropdown/select-dropdown.d.ts +2 -0
- package/esm/select/select-dropdown/select-dropdown.js +2 -0
- package/esm/split-button/split-button.js +1 -1
- package/esm/split-view/split-view/split-view.d.ts +2 -0
- package/esm/split-view/split-view/split-view.js +2 -0
- package/esm/split-view/split-view-panel/split-view-panel.d.ts +2 -0
- package/esm/split-view/split-view-panel/split-view-panel.js +3 -1
- package/esm/stepper/step/step.d.ts +2 -0
- package/esm/stepper/step/step.js +3 -1
- package/esm/stepper/stepper/stepper.d.ts +2 -0
- package/esm/stepper/stepper/stepper.js +2 -0
- package/esm/table/table-utils.js +3 -0
- package/esm/table/table.d.ts +2 -0
- package/esm/table/table.js +4 -1
- package/esm/tabs/tab/tab-adapter.js +2 -2
- package/esm/tabs/tab/tab.d.ts +2 -0
- package/esm/tabs/tab/tab.js +2 -0
- package/esm/time-picker/time-picker.d.ts +2 -0
- package/esm/time-picker/time-picker.js +2 -0
- package/esm/toast/toast-core.js +1 -0
- package/esm/tooltip/tooltip-adapter.d.ts +6 -0
- package/esm/tooltip/tooltip-adapter.js +9 -0
- package/esm/tooltip/tooltip-constants.d.ts +1 -0
- package/esm/tooltip/tooltip-constants.js +2 -1
- package/esm/tooltip/tooltip-core.d.ts +20 -0
- package/esm/tooltip/tooltip-core.js +96 -2
- package/esm/tooltip/tooltip.js +1 -1
- package/esm/view-switcher/view/view.d.ts +2 -0
- package/esm/view-switcher/view/view.js +2 -0
- package/esm/view-switcher/view-switcher.d.ts +2 -0
- package/esm/view-switcher/view-switcher.js +2 -0
- package/package.json +4 -4
- package/sass/focus-indicator/focus-indicator.scss +1 -1
- package/sass/icon-button/forge-icon-button.scss +3 -3
- package/sass/list/forge-list.scss +6 -6
- package/sass/table/_core.scss +13 -1
- package/sass/tooltip/_core.scss +0 -2
- package/esm/focus-indicator/focus-indicator-adapter.d.ts +0 -29
- package/esm/focus-indicator/focus-indicator-adapter.js +0 -37
- package/esm/focus-indicator/focus-indicator-core.d.ts +0 -48
- package/esm/focus-indicator/focus-indicator-core.js +0 -129
|
@@ -14,10 +14,12 @@ import { IconComponent, IconRegistry } from '../../icon';
|
|
|
14
14
|
import { StateLayerComponent } from '../../state-layer';
|
|
15
15
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
16
16
|
const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
|
|
17
|
-
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:
|
|
17
|
+
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnngv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnngv{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:unrnnhr;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnhr{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnni8;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnni8{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:unrnnj6;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnj6{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnnjr;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnjr{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:unrnnk3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnk3{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnnke;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnke{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:unrnnla;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnla{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-split-view-panel
|
|
20
20
|
*
|
|
21
|
+
* @summary Individual panels within split views that can be resized and collapsed.
|
|
22
|
+
*
|
|
21
23
|
* @dependency forge-icon
|
|
22
24
|
* @dependency forge-state-layer
|
|
23
25
|
* @dependency forge-focus-indicator
|
|
@@ -29,6 +29,8 @@ declare global {
|
|
|
29
29
|
/**
|
|
30
30
|
* @tag forge-step
|
|
31
31
|
*
|
|
32
|
+
* @summary Individual steps within a stepper component that represent progress in a multi-step process.
|
|
33
|
+
*
|
|
32
34
|
* @property {boolean} [alternative=false] - Whether the step is in the alternative style.
|
|
33
35
|
* @property {boolean} [completed=false] - Whether the step is completed.
|
|
34
36
|
* @property {boolean} [editable=false] - Whether the step is editable.
|
package/esm/stepper/step/step.js
CHANGED
|
@@ -15,10 +15,12 @@ import { ExpansionPanelComponent } from '../../expansion-panel';
|
|
|
15
15
|
import { StateLayerComponent } from '../../state-layer';
|
|
16
16
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
17
17
|
const template = '<template><div class=\"container\" part=\"root\"><div class=\"forge-step\" part=\"step\"><div class=\"before\" part=\"before\"></div><div class=\"icon-container\" part=\"icon-container\"><div class=\"icon-content\" part=\"icon-content\"><span class=\"index\" part=\"index\"></span><forge-icon class=\"icon\" part=\"icon\"></forge-icon></div></div><div class=\"text-container\" part=\"text-container\"><div class=\"title\" part=\"title-container\"><slot></slot></div><div class=\"subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></div></template>';
|
|
18
|
-
const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:flex;overflow:hidden;align-items:center;box-sizing:border-box;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-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);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-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)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;transition:transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
|
|
18
|
+
const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:flex;overflow:hidden;align-items:center;box-sizing:border-box}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step{cursor:pointer}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-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);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-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)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;transition:transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-step
|
|
21
21
|
*
|
|
22
|
+
* @summary Individual steps within a stepper component that represent progress in a multi-step process.
|
|
23
|
+
*
|
|
22
24
|
* @property {boolean} [alternative=false] - Whether the step is in the alternative style.
|
|
23
25
|
* @property {boolean} [completed=false] - Whether the step is completed.
|
|
24
26
|
* @property {boolean} [editable=false] - Whether the step is editable.
|
|
@@ -23,6 +23,8 @@ declare global {
|
|
|
23
23
|
/**
|
|
24
24
|
* @tag forge-stepper
|
|
25
25
|
*
|
|
26
|
+
* @summary Steppers guide users through multi-step processes by breaking them into logical steps.
|
|
27
|
+
*
|
|
26
28
|
* @dependency forge-step
|
|
27
29
|
*
|
|
28
30
|
* @event {CustomEvent<number>} forge-step-select - Emits the index when a step is selected.
|
|
@@ -15,6 +15,8 @@ const styles = ':host{display:block}:host([hidden]){display:none}:host([vertical
|
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-stepper
|
|
17
17
|
*
|
|
18
|
+
* @summary Steppers guide users through multi-step processes by breaking them into logical steps.
|
|
19
|
+
*
|
|
18
20
|
* @dependency forge-step
|
|
19
21
|
*
|
|
20
22
|
* @event {CustomEvent<number>} forge-step-select - Emits the index when a step is selected.
|
package/esm/table/table-utils.js
CHANGED
|
@@ -144,6 +144,9 @@ export class TableUtils {
|
|
|
144
144
|
if (columnConfig.sortable) {
|
|
145
145
|
cellContainer = document.createElement('button');
|
|
146
146
|
cellContainer.type = 'button';
|
|
147
|
+
const focusIndicator = document.createElement('forge-focus-indicator');
|
|
148
|
+
focusIndicator.inward = true;
|
|
149
|
+
cellContainer.appendChild(focusIndicator);
|
|
147
150
|
cellContainer.addEventListener('keydown', tableConfiguration.sortableHeadCellKeydownListener);
|
|
148
151
|
}
|
|
149
152
|
else {
|
package/esm/table/table.d.ts
CHANGED
package/esm/table/table.js
CHANGED
|
@@ -15,7 +15,10 @@ import { IconRegistry, IconComponent } from '../icon';
|
|
|
15
15
|
import { BaseComponent } from '../core/base/base-component';
|
|
16
16
|
import { CellAlign } from './types';
|
|
17
17
|
import { TooltipComponent } from '../tooltip';
|
|
18
|
+
import { FocusIndicatorComponent } from '../focus-indicator';
|
|
18
19
|
/**
|
|
20
|
+
* @summary A comprehensive data table component with features for selection, sorting, filtering, resizing, and row expansion functionality.
|
|
21
|
+
*
|
|
19
22
|
* @tag forge-table
|
|
20
23
|
*
|
|
21
24
|
* @dependency forge-expansion-panel
|
|
@@ -309,7 +312,7 @@ __decorate([
|
|
|
309
312
|
TableComponent = __decorate([
|
|
310
313
|
customElement({
|
|
311
314
|
name: TABLE_CONSTANTS.elementName,
|
|
312
|
-
dependencies: [ExpansionPanelComponent, IconComponent, CheckboxComponent, TooltipComponent]
|
|
315
|
+
dependencies: [ExpansionPanelComponent, IconComponent, CheckboxComponent, TooltipComponent, FocusIndicatorComponent]
|
|
313
316
|
})
|
|
314
317
|
], TableComponent);
|
|
315
318
|
export { TableComponent };
|
|
@@ -8,12 +8,12 @@ import { STATE_LAYER_CONSTANTS } from '../../state-layer';
|
|
|
8
8
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
9
9
|
import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants';
|
|
10
10
|
import { TAB_CONSTANTS } from './tab-constants';
|
|
11
|
-
import {
|
|
11
|
+
import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
|
|
12
12
|
export class TabAdapter extends BaseAdapter {
|
|
13
13
|
constructor(component) {
|
|
14
14
|
super(component);
|
|
15
15
|
this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
|
|
16
|
-
this._focusIndicatorElement = getShadowElement(this._component,
|
|
16
|
+
this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_TAG_NAME);
|
|
17
17
|
this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
|
|
18
18
|
}
|
|
19
19
|
initialize() {
|
package/esm/tabs/tab/tab.d.ts
CHANGED
package/esm/tabs/tab/tab.js
CHANGED
|
@@ -16,6 +16,8 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
|
|
|
16
16
|
/**
|
|
17
17
|
* @tag forge-tab
|
|
18
18
|
*
|
|
19
|
+
* @summary Individual tab elements that provide navigation between different content panels.
|
|
20
|
+
*
|
|
19
21
|
* @dependency forge-focus-indicator
|
|
20
22
|
* @dependency forge-state-layer
|
|
21
23
|
*
|
|
@@ -44,6 +44,8 @@ declare global {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
/**
|
|
47
|
+
* @summary A time input component with integrated dropdown for selecting time values with support for various formats, masking, and validation options.
|
|
48
|
+
*
|
|
47
49
|
* @tag forge-time-picker
|
|
48
50
|
*/
|
|
49
51
|
export declare class TimePickerComponent extends BaseComponent implements ITimePickerComponent {
|
|
@@ -18,6 +18,8 @@ import { PopoverComponent } from '../popover/popover';
|
|
|
18
18
|
const template = '<template><slot></slot></template>';
|
|
19
19
|
const styles = ':host{display:block}:host([hidden]){display:none}';
|
|
20
20
|
/**
|
|
21
|
+
* @summary A time input component with integrated dropdown for selecting time values with support for various formats, masking, and validation options.
|
|
22
|
+
*
|
|
21
23
|
* @tag forge-time-picker
|
|
22
24
|
*/
|
|
23
25
|
let TimePickerComponent = class TimePickerComponent extends BaseComponent {
|
package/esm/toast/toast-core.js
CHANGED
|
@@ -17,6 +17,9 @@ export interface ITooltipAdapter extends IBaseAdapter<ITooltipComponent> {
|
|
|
17
17
|
removeAnchorListener(type: string, listener: EventListener): void;
|
|
18
18
|
addLightDismissListener(listener: EventListener): void;
|
|
19
19
|
removeLightDismissListener(listener: EventListener): void;
|
|
20
|
+
addTooltipListener(type: string, listener: EventListener, opts?: AddEventListenerOptions): void;
|
|
21
|
+
removeTooltipListener(type: string, listener: EventListener): void;
|
|
22
|
+
isKeyboardFocused(): boolean;
|
|
20
23
|
show(): void;
|
|
21
24
|
hide(): void;
|
|
22
25
|
}
|
|
@@ -41,6 +44,9 @@ export declare class TooltipAdapter extends BaseAdapter<ITooltipComponent> imple
|
|
|
41
44
|
removeAnchorListener(type: string, listener: EventListener): void;
|
|
42
45
|
addLightDismissListener(listener: EventListener): void;
|
|
43
46
|
removeLightDismissListener(listener: EventListener): void;
|
|
47
|
+
addTooltipListener(type: string, listener: EventListener, opts?: AddEventListenerOptions): void;
|
|
48
|
+
removeTooltipListener(type: string, listener: EventListener): void;
|
|
49
|
+
isKeyboardFocused(): boolean;
|
|
44
50
|
show(): void;
|
|
45
51
|
hide(): void;
|
|
46
52
|
/**
|
|
@@ -80,6 +80,15 @@ export class TooltipAdapter extends BaseAdapter {
|
|
|
80
80
|
removeLightDismissListener(listener) {
|
|
81
81
|
this._overlayElement?.removeEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, listener);
|
|
82
82
|
}
|
|
83
|
+
addTooltipListener(type, listener, opts) {
|
|
84
|
+
this.hostElement?.addEventListener(type, listener, opts);
|
|
85
|
+
}
|
|
86
|
+
removeTooltipListener(type, listener) {
|
|
87
|
+
this.hostElement?.removeEventListener(type, listener);
|
|
88
|
+
}
|
|
89
|
+
isKeyboardFocused() {
|
|
90
|
+
return !!this._anchorElement?.matches(':focus-visible');
|
|
91
|
+
}
|
|
83
92
|
show() {
|
|
84
93
|
// Tooltips are shown above all content via <forge-overlay>
|
|
85
94
|
// We do this by dynamically creating an overlay element and appending it to the shadow root
|
|
@@ -39,8 +39,17 @@ export declare class TooltipCore extends TooltipCore_base implements ITooltipCor
|
|
|
39
39
|
private _hoverStartListener;
|
|
40
40
|
private _hoverEndListener;
|
|
41
41
|
private _hoverTimeout;
|
|
42
|
+
private _hoverOutsideTimeout;
|
|
43
|
+
private _isHoveringTooltip;
|
|
44
|
+
private _isHoveringAnchor;
|
|
45
|
+
private _tooltipHoverStartListener;
|
|
46
|
+
private _tooltipHoverEndListener;
|
|
47
|
+
private _anchorOpenHoverStartListener;
|
|
48
|
+
private _anchorOpenHoverEndListener;
|
|
42
49
|
private _focusListener;
|
|
43
50
|
private _blurListener;
|
|
51
|
+
private _keyboardFocusListener;
|
|
52
|
+
private _keyboardBlurListener;
|
|
44
53
|
private _longpressVisibilityTimeout;
|
|
45
54
|
private _scrollListener;
|
|
46
55
|
private _mouseDownListener;
|
|
@@ -56,10 +65,21 @@ export declare class TooltipCore extends TooltipCore_base implements ITooltipCor
|
|
|
56
65
|
private _hide;
|
|
57
66
|
private _attachDismissListeners;
|
|
58
67
|
private _detachDismissListeners;
|
|
68
|
+
private _attachTooltipHoverListeners;
|
|
69
|
+
private _detachTooltipHoverListeners;
|
|
70
|
+
private _attachAnchorOpenHoverListeners;
|
|
71
|
+
private _detachAnchorOpenHoverListeners;
|
|
59
72
|
private _onHoverStart;
|
|
60
73
|
private _onHoverEnd;
|
|
61
74
|
private _onFocus;
|
|
62
75
|
private _onBlur;
|
|
76
|
+
private _onKeyboardFocus;
|
|
77
|
+
private _onKeyboardBlur;
|
|
78
|
+
private _onTooltipHoverStart;
|
|
79
|
+
private _onTooltipHoverEnd;
|
|
80
|
+
private _onAnchorOpenHoverStart;
|
|
81
|
+
private _onAnchorOpenHoverEnd;
|
|
82
|
+
private _scheduleHideIfOutsideHoverRegion;
|
|
63
83
|
protected _onLongpress(): void;
|
|
64
84
|
protected _onLongpressEnd(evt: PointerEvent | TouchEvent): void;
|
|
65
85
|
private _onTryShow;
|
|
@@ -24,9 +24,20 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
24
24
|
// Hover trigger type
|
|
25
25
|
this._hoverStartListener = this._onHoverStart.bind(this);
|
|
26
26
|
this._hoverEndListener = this._onHoverEnd.bind(this);
|
|
27
|
+
this._isHoveringTooltip = false;
|
|
28
|
+
this._isHoveringAnchor = false;
|
|
29
|
+
// Tooltip hover listeners
|
|
30
|
+
this._tooltipHoverStartListener = this._onTooltipHoverStart.bind(this);
|
|
31
|
+
this._tooltipHoverEndListener = this._onTooltipHoverEnd.bind(this);
|
|
32
|
+
// Anchor hover listeners (when tooltip is open)
|
|
33
|
+
this._anchorOpenHoverStartListener = this._onAnchorOpenHoverStart.bind(this);
|
|
34
|
+
this._anchorOpenHoverEndListener = this._onAnchorOpenHoverEnd.bind(this);
|
|
27
35
|
// Focus trigger type
|
|
28
36
|
this._focusListener = this._onFocus.bind(this);
|
|
29
37
|
this._blurListener = this._onBlur.bind(this);
|
|
38
|
+
// Keyboard-only focus for hover trigger (when focus trigger is not explicitly enabled)
|
|
39
|
+
this._keyboardFocusListener = this._onKeyboardFocus.bind(this);
|
|
40
|
+
this._keyboardBlurListener = this._onKeyboardBlur.bind(this);
|
|
30
41
|
// Dismiss/hide triggers
|
|
31
42
|
this._scrollListener = this._onTryHide.bind(this);
|
|
32
43
|
this._mouseDownListener = this._onTryHide.bind(this);
|
|
@@ -66,7 +77,13 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
66
77
|
triggerTypes.push('longpress');
|
|
67
78
|
}
|
|
68
79
|
const triggerInitializers = {
|
|
69
|
-
hover: () =>
|
|
80
|
+
hover: () => {
|
|
81
|
+
this._adapter.addAnchorListener('mouseenter', this._hoverStartListener);
|
|
82
|
+
// Add keyboard focus support if focus trigger is not explicitly enabled
|
|
83
|
+
if (!triggerTypes.includes('focus')) {
|
|
84
|
+
this._adapter.addAnchorListener('focusin', this._keyboardFocusListener);
|
|
85
|
+
}
|
|
86
|
+
},
|
|
70
87
|
longpress: () => this._startLongpressListener(this._adapter.anchorElement),
|
|
71
88
|
focus: () => this._adapter.addAnchorListener('focusin', this._focusListener)
|
|
72
89
|
};
|
|
@@ -86,6 +103,11 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
86
103
|
this._adapter.removeAnchorListener('mouseenter', this._hoverStartListener);
|
|
87
104
|
this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
|
|
88
105
|
this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
|
|
106
|
+
// Remove keyboard focus support if focus trigger is not explicitly enabled
|
|
107
|
+
if (!triggerTypes.includes('focus')) {
|
|
108
|
+
this._adapter.removeAnchorListener('focusin', this._keyboardFocusListener);
|
|
109
|
+
this._adapter.removeAnchorListener('focusout', this._keyboardBlurListener);
|
|
110
|
+
}
|
|
89
111
|
},
|
|
90
112
|
longpress: () => this._stopLongpressListener(this._adapter.anchorElement),
|
|
91
113
|
focus: () => {
|
|
@@ -101,13 +123,20 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
101
123
|
}
|
|
102
124
|
this._open = true;
|
|
103
125
|
this._adapter.show();
|
|
126
|
+
this._attachTooltipHoverListeners();
|
|
127
|
+
this._attachAnchorOpenHoverListeners();
|
|
104
128
|
DismissibleStack.instance.add(this._adapter.hostElement);
|
|
105
129
|
this._attachDismissListeners();
|
|
106
130
|
this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
|
|
107
131
|
}
|
|
108
132
|
_hide() {
|
|
109
133
|
window.clearTimeout(this._hoverTimeout);
|
|
134
|
+
window.clearTimeout(this._hoverOutsideTimeout);
|
|
110
135
|
window.clearTimeout(this._longpressVisibilityTimeout);
|
|
136
|
+
this._isHoveringTooltip = false;
|
|
137
|
+
this._isHoveringAnchor = false;
|
|
138
|
+
this._detachTooltipHoverListeners();
|
|
139
|
+
this._detachAnchorOpenHoverListeners();
|
|
111
140
|
this._open = false;
|
|
112
141
|
this._adapter.hide();
|
|
113
142
|
DismissibleStack.instance.remove(this._adapter.hostElement);
|
|
@@ -128,11 +157,35 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
128
157
|
this._adapter.removeDocumentListener('wheel', this._scrollListener);
|
|
129
158
|
this._adapter.removeLightDismissListener(this._lightDismissListener);
|
|
130
159
|
}
|
|
160
|
+
_attachTooltipHoverListeners() {
|
|
161
|
+
// Only attach hover listeners if hover is one of the active trigger types
|
|
162
|
+
if (this._triggerTypes.includes('hover')) {
|
|
163
|
+
this._adapter.addTooltipListener('mouseenter', this._tooltipHoverStartListener);
|
|
164
|
+
this._adapter.addTooltipListener('mouseleave', this._tooltipHoverEndListener);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
_detachTooltipHoverListeners() {
|
|
168
|
+
this._adapter.removeTooltipListener('mouseenter', this._tooltipHoverStartListener);
|
|
169
|
+
this._adapter.removeTooltipListener('mouseleave', this._tooltipHoverEndListener);
|
|
170
|
+
}
|
|
171
|
+
_attachAnchorOpenHoverListeners() {
|
|
172
|
+
// Only attach hover listeners if hover is one of the active trigger types
|
|
173
|
+
if (this._triggerTypes.includes('hover')) {
|
|
174
|
+
this._adapter.addAnchorListener('mouseenter', this._anchorOpenHoverStartListener);
|
|
175
|
+
this._adapter.addAnchorListener('mouseleave', this._anchorOpenHoverEndListener);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
_detachAnchorOpenHoverListeners() {
|
|
179
|
+
this._adapter.removeAnchorListener('mouseenter', this._anchorOpenHoverStartListener);
|
|
180
|
+
this._adapter.removeAnchorListener('mouseleave', this._anchorOpenHoverEndListener);
|
|
181
|
+
}
|
|
131
182
|
_onHoverStart(_evt) {
|
|
132
183
|
/* c8 ignore next 3 */
|
|
133
184
|
if (this._open) {
|
|
134
185
|
return;
|
|
135
186
|
}
|
|
187
|
+
this._isHoveringAnchor = true;
|
|
188
|
+
window.clearTimeout(this._hoverOutsideTimeout);
|
|
136
189
|
this._adapter.addAnchorListener('mousedown', this._hoverEndListener);
|
|
137
190
|
this._adapter.addAnchorListener('mouseleave', this._hoverEndListener);
|
|
138
191
|
if (this._delay) {
|
|
@@ -145,10 +198,11 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
145
198
|
}
|
|
146
199
|
}
|
|
147
200
|
_onHoverEnd(_evt) {
|
|
201
|
+
this._isHoveringAnchor = false;
|
|
148
202
|
this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
|
|
149
203
|
this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
|
|
150
204
|
window.clearTimeout(this._hoverTimeout);
|
|
151
|
-
this.
|
|
205
|
+
this._scheduleHideIfOutsideHoverRegion();
|
|
152
206
|
}
|
|
153
207
|
_onFocus(_evt) {
|
|
154
208
|
/* c8 ignore next 3 */
|
|
@@ -162,6 +216,46 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
162
216
|
this._adapter.removeAnchorListener('focusout', this._blurListener);
|
|
163
217
|
this._onTryHide();
|
|
164
218
|
}
|
|
219
|
+
_onKeyboardFocus(_evt) {
|
|
220
|
+
/* c8 ignore next 3 */
|
|
221
|
+
if (this._open) {
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
// Only show tooltip if the focus is from keyboard (focus-visible)
|
|
225
|
+
if (this._adapter.isKeyboardFocused()) {
|
|
226
|
+
this._adapter.addAnchorListener('focusout', this._keyboardBlurListener);
|
|
227
|
+
this._onTryShow();
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
_onKeyboardBlur(_evt) {
|
|
231
|
+
this._adapter.removeAnchorListener('focusout', this._keyboardBlurListener);
|
|
232
|
+
this._onTryHide();
|
|
233
|
+
}
|
|
234
|
+
_onTooltipHoverStart(_evt) {
|
|
235
|
+
this._isHoveringTooltip = true;
|
|
236
|
+
window.clearTimeout(this._hoverOutsideTimeout);
|
|
237
|
+
}
|
|
238
|
+
_onTooltipHoverEnd(_evt) {
|
|
239
|
+
this._isHoveringTooltip = false;
|
|
240
|
+
this._scheduleHideIfOutsideHoverRegion();
|
|
241
|
+
}
|
|
242
|
+
_onAnchorOpenHoverStart(_evt) {
|
|
243
|
+
this._isHoveringAnchor = true;
|
|
244
|
+
window.clearTimeout(this._hoverOutsideTimeout);
|
|
245
|
+
}
|
|
246
|
+
_onAnchorOpenHoverEnd(_evt) {
|
|
247
|
+
this._isHoveringAnchor = false;
|
|
248
|
+
this._scheduleHideIfOutsideHoverRegion();
|
|
249
|
+
}
|
|
250
|
+
_scheduleHideIfOutsideHoverRegion() {
|
|
251
|
+
window.clearTimeout(this._hoverOutsideTimeout);
|
|
252
|
+
this._hoverOutsideTimeout = window.setTimeout(() => {
|
|
253
|
+
// Only hide if user is outside both anchor and tooltip
|
|
254
|
+
if (!this._isHoveringTooltip && !this._isHoveringAnchor) {
|
|
255
|
+
this._onTryHide();
|
|
256
|
+
}
|
|
257
|
+
}, TOOLTIP_CONSTANTS.numbers.HOVER_OUTSIDE_THRESHOLD);
|
|
258
|
+
}
|
|
165
259
|
_onLongpress() {
|
|
166
260
|
this._onTryShow();
|
|
167
261
|
}
|
package/esm/tooltip/tooltip.js
CHANGED
|
@@ -15,7 +15,7 @@ import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
|
|
|
15
15
|
import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
|
|
16
16
|
import { tryDismiss } from '../core/utils/dismissible-stack';
|
|
17
17
|
const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
|
|
18
|
-
const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents
|
|
18
|
+
const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, 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)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-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);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-tooltip
|
|
21
21
|
*
|
|
@@ -12,6 +12,8 @@ declare global {
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
|
+
* @summary A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.
|
|
16
|
+
*
|
|
15
17
|
* @tag forge-view
|
|
16
18
|
*/
|
|
17
19
|
export declare class ViewComponent extends BaseComponent implements IViewComponent {
|
|
@@ -10,6 +10,8 @@ import { VIEW_CONSTANTS } from './view-constants';
|
|
|
10
10
|
const template = '<template><slot></slot></template>';
|
|
11
11
|
const styles = ':host{display:block}:host([hidden]){display:none}';
|
|
12
12
|
/**
|
|
13
|
+
* @summary A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.
|
|
14
|
+
*
|
|
13
15
|
* @tag forge-view
|
|
14
16
|
*/
|
|
15
17
|
let ViewComponent = class ViewComponent extends BaseComponent {
|
|
@@ -13,6 +13,8 @@ import { BaseComponent } from '../core/base/base-component';
|
|
|
13
13
|
const template = '<template><div class=\"forge-view-switcher\" part=\"root\"><slot></slot></div></template>';
|
|
14
14
|
const styles = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto)}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
|
|
15
15
|
/**
|
|
16
|
+
* @summary A container component that manages switching between multiple child views with configurable animations and programmatic navigation controls.
|
|
17
|
+
*
|
|
16
18
|
* @tag forge-view-switcher
|
|
17
19
|
*
|
|
18
20
|
* @dependency forge-view
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tylertech/forge",
|
|
3
3
|
"description": "Tyler Forge™ Web Components library",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.11.0",
|
|
5
5
|
"author": "Tyler Technologies, Inc.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"typings": "esm/index.d.ts",
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@floating-ui/dom": "^1.7.
|
|
16
|
+
"@floating-ui/dom": "^1.7.4",
|
|
17
17
|
"@tylertech/forge-core": "^3.2.1",
|
|
18
|
-
"@tylertech/tyler-icons": "^2.0.
|
|
18
|
+
"@tylertech/tyler-icons": "^2.0.4",
|
|
19
19
|
"imask": "^7.6.1",
|
|
20
|
-
"lit": "^3.3.
|
|
20
|
+
"lit": "^3.3.1",
|
|
21
21
|
"tslib": "^2.8.1"
|
|
22
22
|
},
|
|
23
23
|
"customElements": "custom-elements.json"
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
);
|
|
48
48
|
|
|
49
49
|
&:where(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
.forge-icon-button--text,
|
|
51
|
+
:not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))
|
|
52
|
+
) {
|
|
53
53
|
@include focus-indicator.provide-theme(
|
|
54
54
|
(
|
|
55
55
|
outward-offset: 0px // Requires unit
|