@tylertech/forge 3.10.5 → 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 +341 -139
- 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/utils/a11y-utils.js +17 -0
- package/esm/core/utils/utils.js +8 -2
- package/esm/date-picker/date-picker.d.ts +2 -0
- package/esm/date-picker/date-picker.js +2 -0
- package/esm/date-range-picker/date-range-picker.d.ts +2 -0
- package/esm/date-range-picker/date-range-picker.js +2 -0
- package/esm/deprecated/button/deprecated-button.js +3 -3
- package/esm/deprecated/icon-button/deprecated-icon-button.js +2 -2
- package/esm/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/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.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/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
|
@@ -15,6 +15,8 @@ declare global {
|
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-accordion
|
|
17
17
|
*
|
|
18
|
+
* @summary Accordions display a collection of panels that can be expanded or collapsed to show content.
|
|
19
|
+
*
|
|
18
20
|
* @dependency forge-expansion-panel
|
|
19
21
|
*
|
|
20
22
|
* @fires {CustomEvent<IExpansionPanelComponent>} forge-accordion-toggle - Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.
|
|
@@ -13,6 +13,8 @@ import { AccordionCore } from './accordion-core';
|
|
|
13
13
|
/**
|
|
14
14
|
* @tag forge-accordion
|
|
15
15
|
*
|
|
16
|
+
* @summary Accordions display a collection of panels that can be expanded or collapsed to show content.
|
|
17
|
+
*
|
|
16
18
|
* @dependency forge-expansion-panel
|
|
17
19
|
*
|
|
18
20
|
* @fires {CustomEvent<IExpansionPanelComponent>} forge-accordion-toggle - Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.
|
|
@@ -8,7 +8,7 @@ import { replaceElement } from '../../core/utils/utils';
|
|
|
8
8
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
9
9
|
import { APP_BAR_CONSTANTS } from './app-bar-constants';
|
|
10
10
|
import { STATE_LAYER_CONSTANTS } from '../../state-layer';
|
|
11
|
-
import {
|
|
11
|
+
import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
|
|
12
12
|
export class AppBarAdapter extends BaseAdapter {
|
|
13
13
|
constructor(component) {
|
|
14
14
|
super(component);
|
|
@@ -50,7 +50,7 @@ export class AppBarAdapter extends BaseAdapter {
|
|
|
50
50
|
this._logoTitleContainerElement = replaceElement(this._logoTitleContainerElement, document.createElement('div'));
|
|
51
51
|
this._logoTitleContainerElement.classList.add(APP_BAR_CONSTANTS.classes.LOGO_TITLE_CONTAINER);
|
|
52
52
|
this._logoTitleContainerElement.querySelector(STATE_LAYER_CONSTANTS.elementName)?.remove();
|
|
53
|
-
this._logoTitleContainerElement.querySelector(
|
|
53
|
+
this._logoTitleContainerElement.querySelector(FOCUS_INDICATOR_TAG_NAME)?.remove();
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
setTarget(value) {
|
|
@@ -24,7 +24,7 @@ declare global {
|
|
|
24
24
|
/**
|
|
25
25
|
* @tag forge-app-bar
|
|
26
26
|
*
|
|
27
|
-
* @
|
|
27
|
+
* @summary App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.
|
|
28
28
|
*
|
|
29
29
|
* @property {string} titleText - The text to display in the title.
|
|
30
30
|
* @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
|
|
@@ -14,7 +14,7 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
|
|
|
14
14
|
/**
|
|
15
15
|
* @tag forge-app-bar
|
|
16
16
|
*
|
|
17
|
-
* @
|
|
17
|
+
* @summary App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.
|
|
18
18
|
*
|
|
19
19
|
* @property {string} titleText - The text to display in the title.
|
|
20
20
|
* @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
|
|
@@ -17,7 +17,7 @@ declare global {
|
|
|
17
17
|
/**
|
|
18
18
|
* @tag forge-app-bar-help-button
|
|
19
19
|
*
|
|
20
|
-
* @
|
|
20
|
+
* @summary A help button component with a predefined help icon that displays a dropdown menu when clicked, designed for use in an app bar's end slot.
|
|
21
21
|
*
|
|
22
22
|
* @property {IMenuOption[]} [options=[]] - The menu options to display when the button is clicked
|
|
23
23
|
* @property {string} [icon=help] - The name of an alternative icon to display.
|
|
@@ -18,7 +18,7 @@ const template = '<template><forge-menu placement=\"bottom-end\"><forge-icon-but
|
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-app-bar-help-button
|
|
20
20
|
*
|
|
21
|
-
* @
|
|
21
|
+
* @summary A help button component with a predefined help icon that displays a dropdown menu when clicked, designed for use in an app bar's end slot.
|
|
22
22
|
*
|
|
23
23
|
* @property {IMenuOption[]} [options=[]] - The menu options to display when the button is clicked
|
|
24
24
|
* @property {string} [icon=help] - The name of an alternative icon to display.
|
|
@@ -15,7 +15,7 @@ declare global {
|
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-app-bar-menu-button
|
|
17
17
|
*
|
|
18
|
-
* @
|
|
18
|
+
* @summary A menu toggle button component with a predefined hamburger menu icon, typically used in an app bar's start slot to open navigation menus.
|
|
19
19
|
*
|
|
20
20
|
* @property {string} [icon=menu] - The name of an alternative icon to display.
|
|
21
21
|
*
|
|
@@ -16,7 +16,7 @@ const template = '<template><forge-icon-button theme=\"app-bar\"><forge-icon nam
|
|
|
16
16
|
/**
|
|
17
17
|
* @tag forge-app-bar-menu-button
|
|
18
18
|
*
|
|
19
|
-
* @
|
|
19
|
+
* @summary A menu toggle button component with a predefined hamburger menu icon, typically used in an app bar's start slot to open navigation menus.
|
|
20
20
|
*
|
|
21
21
|
* @property {string} [icon=menu] - The name of an alternative icon to display.
|
|
22
22
|
*
|
|
@@ -19,6 +19,8 @@ export interface IAppBarNotificationButtonComponent extends IBaseComponent {
|
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-app-bar-notification-button
|
|
21
21
|
*
|
|
22
|
+
* @summary A notification button component with a predefined notification bell icon that can display a badge with count or dot indicator, designed for use in app bars.
|
|
23
|
+
*
|
|
22
24
|
* @property {number | string} [count = 0] - The number to display in the badge.
|
|
23
25
|
* @property {boolean} [dot = false] - Whether to display the dot variant of the badge or not.
|
|
24
26
|
* @property {boolean} [showBadge = false] - Whether to display the badge or not.
|
|
@@ -18,6 +18,8 @@ const template = '<template><forge-icon-button theme=\"app-bar\"><forge-icon></f
|
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-app-bar-notification-button
|
|
20
20
|
*
|
|
21
|
+
* @summary A notification button component with a predefined notification bell icon that can display a badge with count or dot indicator, designed for use in app bars.
|
|
22
|
+
*
|
|
21
23
|
* @property {number | string} [count = 0] - The number to display in the badge.
|
|
22
24
|
* @property {boolean} [dot = false] - Whether to display the dot variant of the badge or not.
|
|
23
25
|
* @property {boolean} [showBadge = false] - Whether to display the badge or not.
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
|
|
7
7
|
import { IAppBarProfileButtonComponent } from './app-bar-profile-button';
|
|
8
8
|
import { IAppBarProfileCardConfig } from './app-bar-profile-button-constants';
|
|
9
|
-
import { IPopoverComponent } from '../../popover';
|
|
9
|
+
import { type IPopoverComponent } from '../../popover';
|
|
10
10
|
export interface IAppBarProfileButtonAdapter extends IBaseAdapter {
|
|
11
11
|
popupElement: IPopoverComponent | undefined;
|
|
12
12
|
initialize(): void;
|
|
@@ -25,6 +25,7 @@ export interface IAppBarProfileButtonAdapter extends IBaseAdapter {
|
|
|
25
25
|
}
|
|
26
26
|
export declare class AppBarProfileButtonAdapter extends BaseAdapter<IAppBarProfileButtonComponent> implements IAppBarProfileButtonAdapter {
|
|
27
27
|
private _avatarElement;
|
|
28
|
+
private _tooltipElement;
|
|
28
29
|
private _iconButtonElement;
|
|
29
30
|
private _popupElement?;
|
|
30
31
|
private _profileCardElement?;
|
|
@@ -20,6 +20,7 @@ export class AppBarProfileButtonAdapter extends BaseAdapter {
|
|
|
20
20
|
}
|
|
21
21
|
initialize() {
|
|
22
22
|
this._avatarElement = getLightElement(this._component, AVATAR_CONSTANTS.elementName);
|
|
23
|
+
this._tooltipElement = getLightElement(this._component, 'forge-tooltip');
|
|
23
24
|
this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
|
|
24
25
|
const originalAriaLabelledBy = this._iconButtonElement.getAttribute('aria-labelledby'); // Set by tooltip
|
|
25
26
|
this._forwardObserver = forwardAttributes(this._component, APP_BAR_PROFILE_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
|
|
@@ -97,6 +98,7 @@ export class AppBarProfileButtonAdapter extends BaseAdapter {
|
|
|
97
98
|
}
|
|
98
99
|
setAvatarText(value) {
|
|
99
100
|
this._avatarElement.text = value;
|
|
101
|
+
this._tooltipElement.textContent = `View ${value}'s profile`;
|
|
100
102
|
removeAllChildren(this._avatarElement);
|
|
101
103
|
}
|
|
102
104
|
setAvatarIcon(value) {
|
|
@@ -29,6 +29,8 @@ declare global {
|
|
|
29
29
|
/**
|
|
30
30
|
* @tag forge-app-bar-profile-button
|
|
31
31
|
*
|
|
32
|
+
* @summary A user profile button component that displays an avatar and opens a profile card popup with user information and action buttons when clicked.
|
|
33
|
+
*
|
|
32
34
|
* @property {string} avatarImageUrl - The url of the avatar image to display.
|
|
33
35
|
* @property {number} [avatarLetterCount=2] - The number of letters to display in the avatar.
|
|
34
36
|
* @property {string} avatarText - The text to display in the avatar.
|
|
@@ -18,6 +18,8 @@ const template = '<template><forge-icon-button theme=\"app-bar\"><forge-avatar a
|
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-app-bar-profile-button
|
|
20
20
|
*
|
|
21
|
+
* @summary A user profile button component that displays an avatar and opens a profile card popup with user information and action buttons when clicked.
|
|
22
|
+
*
|
|
21
23
|
* @property {string} avatarImageUrl - The url of the avatar image to display.
|
|
22
24
|
* @property {number} [avatarLetterCount=2] - The number of letters to display in the avatar.
|
|
23
25
|
* @property {string} avatarText - The text to display in the avatar.
|
|
@@ -21,6 +21,8 @@ declare global {
|
|
|
21
21
|
/**
|
|
22
22
|
* @tag forge-app-bar-search
|
|
23
23
|
*
|
|
24
|
+
* @summary A search input component with integrated search icon and styling optimized for use within app bars, supporting keyboard interaction and customizable actions.
|
|
25
|
+
*
|
|
24
26
|
* @slot - The default (unnamed) slot is where child `<input>` elements will be placed.
|
|
25
27
|
* @slot action - Places actions at the end of the input.
|
|
26
28
|
*
|
|
@@ -17,6 +17,8 @@ const styles = ':host{display:block;color:var(--_app-bar-theme-foreground)}:host
|
|
|
17
17
|
/**
|
|
18
18
|
* @tag forge-app-bar-search
|
|
19
19
|
*
|
|
20
|
+
* @summary A search input component with integrated search icon and styling optimized for use within app bars, supporting keyboard interaction and customizable actions.
|
|
21
|
+
*
|
|
20
22
|
* @slot - The default (unnamed) slot is where child `<input>` elements will be placed.
|
|
21
23
|
* @slot action - Places actions at the end of the input.
|
|
22
24
|
*
|
|
@@ -41,6 +41,8 @@ declare global {
|
|
|
41
41
|
/**
|
|
42
42
|
* @tag forge-autocomplete
|
|
43
43
|
*
|
|
44
|
+
* @summary Autocomplete components provide real-time suggestions as users type in a text field.
|
|
45
|
+
*
|
|
44
46
|
* @event {CustomEvent<any>} forge-autocomplete-change - Fired when the value changes.
|
|
45
47
|
* @event {CustomEvent<IAutocompleteSelectEventData>} forge-autocomplete-select - Fired when an option is selected. Only applies when in "stateless" `mode`.
|
|
46
48
|
* @event {CustomEvent<void>} forge-autocomplete-scrolled-bottom - Fired when the dropdown is scrolled to the bottom. Only applies when `observe-scroll` is enabled.
|
|
@@ -22,6 +22,8 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
|
|
|
22
22
|
/**
|
|
23
23
|
* @tag forge-autocomplete
|
|
24
24
|
*
|
|
25
|
+
* @summary Autocomplete components provide real-time suggestions as users type in a text field.
|
|
26
|
+
*
|
|
25
27
|
* @event {CustomEvent<any>} forge-autocomplete-change - Fired when the value changes.
|
|
26
28
|
* @event {CustomEvent<IAutocompleteSelectEventData>} forge-autocomplete-select - Fired when an option is selected. Only applies when in "stateless" `mode`.
|
|
27
29
|
* @event {CustomEvent<void>} forge-autocomplete-scrolled-bottom - Fired when the dropdown is scrolled to the bottom. Only applies when `observe-scroll` is enabled.
|
|
@@ -20,6 +20,8 @@ declare global {
|
|
|
20
20
|
/**
|
|
21
21
|
* @tag forge-backdrop
|
|
22
22
|
*
|
|
23
|
+
* @summary Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers.
|
|
24
|
+
*
|
|
23
25
|
* @property {boolean} [visible=false] - Whether the backdrop is visible.
|
|
24
26
|
* @property {boolean} [fixed=false] - Whether the backdrop uses "fixed" or "relative" positioning.
|
|
25
27
|
*
|
package/esm/backdrop/backdrop.js
CHANGED
|
@@ -12,6 +12,8 @@ const styles = '@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opaci
|
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-backdrop
|
|
14
14
|
*
|
|
15
|
+
* @summary Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers.
|
|
16
|
+
*
|
|
15
17
|
* @property {boolean} [visible=false] - Whether the backdrop is visible.
|
|
16
18
|
* @property {boolean} [fixed=false] - Whether the backdrop uses "fixed" or "relative" positioning.
|
|
17
19
|
*
|
package/esm/badge/badge.d.ts
CHANGED
|
@@ -22,6 +22,8 @@ export declare const BADGE_TAG_NAME: keyof HTMLElementTagNameMap;
|
|
|
22
22
|
/**
|
|
23
23
|
* @tag forge-badge
|
|
24
24
|
*
|
|
25
|
+
* @summary Badges display small amounts of information like counts, status indicators, or notifications.
|
|
26
|
+
*
|
|
25
27
|
* @cssproperty --forge-badge-background - The background color.
|
|
26
28
|
* @cssproperty --forge-badge-color - The text color.
|
|
27
29
|
* @cssproperty --forge-badge-shape - The shape radius.
|
package/esm/badge/badge.js
CHANGED
|
@@ -15,6 +15,8 @@ export const BADGE_TAG_NAME = 'forge-badge';
|
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-badge
|
|
17
17
|
*
|
|
18
|
+
* @summary Badges display small amounts of information like counts, status indicators, or notifications.
|
|
19
|
+
*
|
|
18
20
|
* @cssproperty --forge-badge-background - The background color.
|
|
19
21
|
* @cssproperty --forge-badge-color - The text color.
|
|
20
22
|
* @cssproperty --forge-badge-shape - The shape radius.
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { getShadowElement } from '@tylertech/forge-core';
|
|
7
7
|
import { tylIconArrowDropDown } from '@tylertech/tyler-icons';
|
|
8
8
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
9
|
-
import {
|
|
9
|
+
import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
|
|
10
10
|
import { STATE_LAYER_CONSTANTS } from '../../state-layer';
|
|
11
11
|
import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
|
|
12
12
|
import { BUTTON_FORM_ATTRIBUTES, cloneAttributes } from '../../core/utils/reflect-utils';
|
|
@@ -16,7 +16,7 @@ export class BaseButtonAdapter extends BaseAdapter {
|
|
|
16
16
|
constructor(component) {
|
|
17
17
|
super(component);
|
|
18
18
|
this._rootElement = getShadowElement(this._component, BASE_BUTTON_CONSTANTS.selectors.ROOT);
|
|
19
|
-
this._focusIndicatorElement = getShadowElement(this._component,
|
|
19
|
+
this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_TAG_NAME);
|
|
20
20
|
this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
|
|
21
21
|
this._defaultSlotElement = getShadowElement(this._component, BASE_BUTTON_CONSTANTS.selectors.DEFAULT_SLOT);
|
|
22
22
|
this._endSlotElement = getShadowElement(this._component, BASE_BUTTON_CONSTANTS.selectors.END_SLOT);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { getShadowElement } from '@tylertech/forge-core';
|
|
7
7
|
import { BaseAdapter } from '../core';
|
|
8
|
-
import {
|
|
8
|
+
import { FOCUS_INDICATOR_TAG_NAME } from '../focus-indicator';
|
|
9
9
|
import { STATE_LAYER_CONSTANTS } from '../state-layer';
|
|
10
10
|
import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
|
|
11
11
|
export class ButtonAreaAdapter extends BaseAdapter {
|
|
@@ -14,7 +14,7 @@ export class ButtonAreaAdapter extends BaseAdapter {
|
|
|
14
14
|
this._rootElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.ROOT);
|
|
15
15
|
this._buttonSlotElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.BUTTON_SLOT);
|
|
16
16
|
this._contentSlotElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.CONTENT_SLOT);
|
|
17
|
-
this._focusIndicatorElement = getShadowElement(component,
|
|
17
|
+
this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_TAG_NAME);
|
|
18
18
|
this._stateLayerElement = getShadowElement(component, STATE_LAYER_CONSTANTS.elementName);
|
|
19
19
|
}
|
|
20
20
|
setDisabled(value) {
|
|
@@ -7,11 +7,11 @@ import { getShadowElement } from '@tylertech/forge-core';
|
|
|
7
7
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
8
8
|
import { isFocusable, setDefaultAria } from '../../constants';
|
|
9
9
|
import { STATE_LAYER_CONSTANTS } from '../../state-layer/state-layer-constants';
|
|
10
|
-
import {
|
|
10
|
+
import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator/focus-indicator';
|
|
11
11
|
export class ButtonToggleAdapter extends BaseAdapter {
|
|
12
12
|
constructor(component) {
|
|
13
13
|
super(component);
|
|
14
|
-
this._focusIndicatorElement = getShadowElement(component,
|
|
14
|
+
this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_TAG_NAME);
|
|
15
15
|
this._stateLayerElement = getShadowElement(component, STATE_LAYER_CONSTANTS.elementName);
|
|
16
16
|
}
|
|
17
17
|
initialize() {
|
|
@@ -27,6 +27,8 @@ declare const ButtonToggleComponent_base: import("../../constants").AbstractCons
|
|
|
27
27
|
/**
|
|
28
28
|
* @tag forge-button-toggle
|
|
29
29
|
*
|
|
30
|
+
* @summary Toggle buttons allow users to select from a group of choices with single or multiple selection.
|
|
31
|
+
*
|
|
30
32
|
* @property {unknown} value - The value of the button toggle.
|
|
31
33
|
* @property {boolean} [selected=false] - Whether or not the button is selected.
|
|
32
34
|
* @property {boolean} [disabled=false] - Whether or not the button is disabled.
|
|
@@ -19,6 +19,8 @@ const styles = ':host{--_button-toggle-display:var(--forge-button-toggle-display
|
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-button-toggle
|
|
21
21
|
*
|
|
22
|
+
* @summary Toggle buttons allow users to select from a group of choices with single or multiple selection.
|
|
23
|
+
*
|
|
22
24
|
* @property {unknown} value - The value of the button toggle.
|
|
23
25
|
* @property {boolean} [selected=false] - Whether or not the button is selected.
|
|
24
26
|
* @property {boolean} [disabled=false] - Whether or not the button is disabled.
|
|
@@ -36,7 +36,7 @@ declare const ButtonToggleGroupComponent_base: import("../../constants").Abstrac
|
|
|
36
36
|
/**
|
|
37
37
|
* @tag forge-button-toggle-group
|
|
38
38
|
*
|
|
39
|
-
* @
|
|
39
|
+
* @summary Button toggle groups allow users to select one or more options from a set of related options.
|
|
40
40
|
*
|
|
41
41
|
* @property {any} value - The value of the selected button toggle(s).
|
|
42
42
|
* @property {boolean} [outlined=true] - Whether or not the group should be outlined.
|
|
@@ -21,7 +21,7 @@ const styles = ':host{--_button-toggle-group-display:var(--forge-button-toggle-g
|
|
|
21
21
|
/**
|
|
22
22
|
* @tag forge-button-toggle-group
|
|
23
23
|
*
|
|
24
|
-
* @
|
|
24
|
+
* @summary Button toggle groups allow users to select one or more options from a set of related options.
|
|
25
25
|
*
|
|
26
26
|
* @property {any} value - The value of the selected button toggle(s).
|
|
27
27
|
* @property {boolean} [outlined=true] - Whether or not the group should be outlined.
|
|
@@ -12,7 +12,7 @@ import { CALENDAR_MENU_CONSTANTS } from './calendar-menu-constants';
|
|
|
12
12
|
import { CalendarMenuCore } from './calendar-menu-core';
|
|
13
13
|
import { BaseComponent } from '../../core/base/base-component';
|
|
14
14
|
const template = '<template><div class=\"forge-calendar-menu\" part=\"root\"></div></template>';
|
|
15
|
-
const styles = '.forge-calendar-menu{background-color:var(--forge-theme-surface,#fff);position:relative;height:100%;width:100%;overflow:hidden}.forge-calendar-menu__view{position:absolute;top:0;left:0;height:100%;width:100%;background-color:inherit}.forge-calendar-menu__grid{max-height:var(--forge-calendar-menu-max-height,320px);display:grid;gap:16px;justify-items:center;align-items:center;padding:8px;box-sizing:border-box}.forge-calendar-menu__grid--three-col{grid-template-columns:repeat(3,1fr)}.forge-calendar-menu__grid--four-col{grid-template-columns:repeat(4,1fr)}.forge-calendar-menu__list{position:relative;background-color:inherit}.forge-calendar-menu__list__wrapper
|
|
15
|
+
const styles = '.forge-calendar-menu{background-color:var(--forge-theme-surface,#fff);position:relative;height:100%;width:100%;overflow:hidden}.forge-calendar-menu__view{position:absolute;top:0;left:0;height:100%;width:100%;background-color:inherit}.forge-calendar-menu__grid{max-height:var(--forge-calendar-menu-max-height,320px);display:grid;gap:16px;justify-items:center;align-items:center;padding:8px;box-sizing:border-box}.forge-calendar-menu__grid--three-col{grid-template-columns:repeat(3,1fr)}.forge-calendar-menu__grid--four-col{grid-template-columns:repeat(4,1fr)}.forge-calendar-menu__list{position:relative;background-color:inherit}.forge-calendar-menu__list__wrapper::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-calendar-menu__list__wrapper::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-calendar-menu__list__wrapper::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-calendar-menu__list__wrapper::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-calendar-menu__list__wrapper::-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-calendar-menu__list__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-calendar-menu__list__wrapper{position:relative;height:100%;overflow:auto}.forge-calendar-menu__item--grid{-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);display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;font-weight:500;user-select:none}.forge-calendar-menu__item--grid:not([disabled]){border:1px solid var(--forge-theme-outline,#e0e0e0);cursor:pointer}.forge-calendar-menu__item--grid[disabled]{color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar-menu__item--grid.forge-calendar-menu__item--selected{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar-menu__item--grid.forge-calendar-menu__item--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container, #d1d5ed)}.forge-calendar-menu__item--list{display:flex;align-items:center;justify-content:center;margin:0 4px;width:calc(100% - 8px);height:48px;border-radius:4px;overflow:hidden;text-align:center;cursor:pointer;position:relative}.forge-calendar-menu__item--list.forge-calendar-menu__item--selected{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar-menu__item--list.forge-calendar-menu__item--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container)}.forge-calendar-menu__item--focused,.forge-calendar-menu__item:focus{outline:0}.forge-calendar-menu--open{animation-duration:.2s;animation-name:scale-open;transform-origin:top center}.forge-calendar-menu--open[data-animation=fade]{animation-name:fade-in}.forge-calendar-menu--open[data-animation=none]{animation-duration:1ms}@media (prefers-reduced-motion){.forge-calendar-menu--open{animation-name:fade-in}}.forge-calendar-menu--closing{animation-duration:.2s;animation-name:scale-closed;transform-origin:top center}.forge-calendar-menu--closing[data-animation=fade]{animation-name:fade-out}.forge-calendar-menu--closing[data-animation=none]{animation-duration:1ms}@media (prefers-reduced-motion){.forge-calendar-menu--closing{animation-name:fade-out}}.forge-calendar-menu--slide-right .forge-calendar-menu__view:first-child{animation-duration:.2s;animation-name:slide-out-to-right}@media (prefers-reduced-motion){.forge-calendar-menu--slide-right .forge-calendar-menu__view:first-child{animation-name:fade-out}}.forge-calendar-menu--slide-right .forge-calendar-menu__view:last-child{animation-duration:.2s;animation-name:slide-in-from-left}@media (prefers-reduced-motion){.forge-calendar-menu--slide-right .forge-calendar-menu__view:last-child{animation-name:fade-in}}.forge-calendar-menu--slide-left .forge-calendar-menu__view:first-child{animation-duration:.2s;animation-name:slide-out-to-left}@media (prefers-reduced-motion){.forge-calendar-menu--slide-left .forge-calendar-menu__view:first-child{animation-name:fade-out}}.forge-calendar-menu--slide-left .forge-calendar-menu__view:last-child{animation-duration:.2s;animation-name:slide-in-from-right}@media (prefers-reduced-motion){.forge-calendar-menu--slide-left .forge-calendar-menu__view:last-child{animation-name:fade-in}}.forge-calendar-menu--replacing-view .forge-calendar-menu__view:first-child{animation-duration:.2s;animation-name:fade-out}.forge-calendar-menu--replacing-view .forge-calendar-menu__view:last-child{animation-duration:.2s;animation-name:fade-in}#scroll-spy-bottom{position:absolute;bottom:0;height:48px;pointer-events:none}#scroll-spy-top{position:absolute;top:0;height:48px;pointer-events:none}@keyframes scale-open{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes scale-closed{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.4)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}:host{display:block;position:absolute;top:0;left:0;height:100%;width:100%}:host([hidden]){display:none}:host([forge-popover-context=true]) .forge-calendar-menu{background-color:var(--forge-theme-surface-bright,#fff)}';
|
|
16
16
|
/**
|
|
17
17
|
* @internal
|
|
18
18
|
* @tag forge-calendar-menu
|
|
@@ -42,6 +42,8 @@ declare global {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
/**
|
|
45
|
+
* @summary A flexible calendar component for date selection with support for single dates, ranges, multiple selections, and extensive customization options.
|
|
46
|
+
*
|
|
45
47
|
* @tag forge-calendar
|
|
46
48
|
*
|
|
47
49
|
* @property {Date} activeDate - The currently active date in the calendar.
|
package/esm/calendar/calendar.js
CHANGED
|
@@ -18,8 +18,10 @@ import { StateLayerComponent } from '../state-layer';
|
|
|
18
18
|
import { FocusIndicatorComponent } from '../focus-indicator';
|
|
19
19
|
import { BaseComponent } from '../core/base/base-component';
|
|
20
20
|
const template = '<template><div class=\"forge-calendar\" part=\"root\"><div id=\"view\" class=\"forge-calendar__view\" part=\"view\"><div id=\"date-view\" class=\"forge-calendar__date-view\" role=\"grid\" part=\"date-view\"><div role=\"rowgroup\" part=\"date-view-container\"><div id=\"day-row\" class=\"forge-calendar__date-view__row\" role=\"row\" part=\"date-view-row\"></div></div><div id=\"date-grid\" class=\"forge-calendar__date-grid\" role=\"rowgroup\" part=\"date-grid-container\"></div></div><forge-calendar-menu id=\"menu\" part=\"calendar-menu\"></forge-calendar-menu></div></div></template>';
|
|
21
|
-
const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fit-content;position:relative}.forge-calendar__header{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__footer{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__view{position:relative}.forge-calendar__date-view{display:block}.forge-calendar__date-view__row{display:grid;grid-template-columns:repeat(7,1fr)}.forge-calendar__date-grid{display:grid}.forge-calendar__day{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);display:flex;justify-content:center;align-items:center;min-width:0;padding:0;font-weight:700;user-select:none}.forge-
|
|
21
|
+
const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fit-content;position:relative}.forge-calendar__header{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__footer{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__view{position:relative}.forge-calendar__date-view{display:block}.forge-calendar__date-view__row{display:grid;grid-template-columns:repeat(7,1fr)}.forge-calendar__date-grid{display:grid}.forge-calendar__day{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-calendar__day::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__day{display:flex;justify-content:center;align-items:center;min-width:0;padding:0;font-weight:700;user-select:none}.forge-calendar__date::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date{margin-top:var(--forge-calendar-row-gap,2px);min-width:0;padding:0;border-radius:50%;position:relative;outline:0;cursor:default;user-select:none}.forge-calendar__date forge-focus-indicator{--forge-focus-indicator-shape:50%}.forge-calendar__date__inner{-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:absolute;width:calc(100% - 2px);height:calc(100% - 2px);top:calc(2px / 2);left:calc(2px / 2);display:flex;justify-content:center;align-items:center;border-radius:inherit;box-sizing:border-box}.forge-calendar--show-today .forge-calendar__date--today:not([disabled]){color:var(--forge-theme-primary,#3f51b5);border-color:var(--forge-theme-primary,#3f51b5)}.forge-calendar--show-today .forge-calendar__date--today .forge-calendar__date__inner{border-color:inherit;border-width:1px;border-style:solid;font-weight:700}.forge-calendar--show-today .forge-calendar__date--today.forge-calendar__date--selected{color:var(--forge-theme-on-primary,#fff)}.forge-calendar:not(.forge-calendar--readonly) .forge-calendar__date:not([disabled]){cursor:pointer}.forge-calendar__date--selected:not([disabled]) .forge-calendar__date__inner{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar__date--selected[disabled] .forge-calendar__date__inner{background-color:var(--forge-theme-primary-container-minimum,#f7f8fc);color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container)}.forge-calendar__date[disabled]{color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date-spacer{pointer-events:none}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.forge-calendar--fixed-height .forge-calendar__date-spacer{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar__range:not(.forge-calendar__date-spacer) .forge-calendar__range__target{background-color:var(--forge-theme-primary,#3f51b5);position:absolute;width:100%;height:100%;opacity:.14;border-radius:0}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--start .forge-calendar__range__target{border-top-left-radius:50%;border-bottom-left-radius:50%}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--end .forge-calendar__range__target{border-top-right-radius:50%;border-bottom-right-radius:50%}.forge-calendar__range:not(.forge-calendar__range--start):first-of-type .forge-calendar__range__target{border-top-left-radius:4px;border-bottom-left-radius:4px}.forge-calendar__range:not(.forge-calendar__range--end):last-of-type .forge-calendar__range__target{border-top-right-radius:4px;border-bottom-right-radius:4px}.forge-calendar--allow-single-date-range .forge-calendar__range--start.forge-calendar__range--end .forge-calendar__range__target{transition:transform .2s;transform:scale(1.15);transform-origin:center}.forge-calendar__event[data-event-theme=primary]{color:var(--forge-calendar-theme-event-primary-accent,#3f51b5)}.forge-calendar__event[data-event-theme=secondary]{color:var(--forge-calendar-theme-event-secondary-accent,#ffc107)}.forge-calendar__event[data-event-theme=blue]{color:var(--forge-calendar-theme-event-blue-accent,#2196f3)}.forge-calendar__event[data-event-theme=light-green]{color:var(--forge-calendar-theme-event-light-green-accent,#8bc34a)}.forge-calendar__event[data-event-theme=cyan]{color:var(--forge-calendar-theme-event-cyan-accent,#00bcd4)}.forge-calendar__event[data-event-theme=teal]{color:var(--forge-calendar-theme-event-teal-accent,#009688)}.forge-calendar__event[data-event-theme=orange]{color:var(--forge-calendar-theme-event-orange-accent,#ff9800)}.forge-calendar__event[data-event-theme=blue-grey]{color:var(--forge-calendar-theme-event-blue-grey-accent,#607d8b)}.forge-calendar__event[data-event-theme=grey]{color:var(--forge-calendar-theme-event-grey-accent,#9e9e9e)}.forge-calendar__event[data-event-theme=red]{color:var(--forge-calendar-theme-event-red-accent,#f44336)}.forge-calendar__event[data-event-theme=pink]{color:var(--forge-calendar-theme-event-pink-accent,#e91e63)}.forge-calendar__event[data-event-theme=purple]{color:var(--forge-calendar-theme-event-purple-accent,#9c27b0)}.forge-calendar__event[data-event-theme=light-blue]{color:var(--forge-calendar-theme-event-light-blue-accent,#03a9f4)}.forge-calendar__event[data-event-theme=deep-purple]{color:var(--forge-calendar-theme-event-deep-purple-accent,#673ab7)}.forge-calendar__event[data-event-theme=green]{color:var(--forge-calendar-theme-event-green-accent,#4caf50)}.forge-calendar__event[data-event-theme=lime]{color:var(--forge-calendar-theme-event-lime-accent,#cddc39)}.forge-calendar__event[data-event-theme=yellow]{color:var(--forge-calendar-theme-event-yellow-accent,#ffeb3b)}.forge-calendar__event[data-event-theme=brown]{color:var(--forge-calendar-theme-event-brown-accent,#795548)}.forge-calendar__event[data-event-theme=deep-orange]{color:var(--forge-calendar-theme-event-deep-orange-accent,#ff5722)}.forge-calendar__event{font-size:var(--forge-calendar-event-dot-size, 12px)}.forge-calendar__date[disabled] .forge-calendar__event{opacity:.14}.forge-calendar__event--overflow{background-color:var(--forge-theme-surface,#fff);color:var(--forge-theme-on-surface,#000);border-radius:50%}.forge-calendar__event__wrapper{display:flex;justify-content:center;gap:2px;position:absolute;bottom:0;left:0;width:100%;padding-bottom:2px;pointer-events:none}.forge-calendar__date-spacer .forge-calendar__event__wrapper{display:none}.forge-calendar--rtl .forge-calendar__header forge-icon-button forge-icon{transform:rotate(180deg)}#accessible-header{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}#month-button forge-icon{transition:transform .2s}.forge-calendar--month-menu-open #month-button forge-icon{transform:rotate(180deg)}#year-button forge-icon{transition:transform .2s}.forge-calendar--year-menu-open #year-button forge-icon{transform:rotate(180deg)}:host{--forge-calendar-event-stroke-color:var(--forge-theme-surface, #ffffff);display:inline-block}:host([hidden]){display:none}:host([forge-popover-context=true]){--forge-calendar-event-stroke-color:var(--forge-theme-surface-bright, #ffffff)}';
|
|
22
22
|
/**
|
|
23
|
+
* @summary A flexible calendar component for date selection with support for single dates, ranges, multiple selections, and extensive customization options.
|
|
24
|
+
*
|
|
23
25
|
* @tag forge-calendar
|
|
24
26
|
*
|
|
25
27
|
* @property {Date} activeDate - The currently active date in the calendar.
|
package/esm/card/card.d.ts
CHANGED
|
@@ -18,6 +18,8 @@ export declare const CARD_TAG_NAME: keyof HTMLElementTagNameMap;
|
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-card
|
|
20
20
|
*
|
|
21
|
+
* @summary Cards group related content and actions together in a single container.
|
|
22
|
+
*
|
|
21
23
|
* @attribute {boolean} [no-padding=false] - Removes the default padding from the card.
|
|
22
24
|
*
|
|
23
25
|
* @cssproperty --forge-card-background - The background color of the card.
|
package/esm/card/card.js
CHANGED
|
@@ -15,6 +15,8 @@ export const CARD_TAG_NAME = 'forge-card';
|
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-card
|
|
17
17
|
*
|
|
18
|
+
* @summary Cards group related content and actions together in a single container.
|
|
19
|
+
*
|
|
18
20
|
* @attribute {boolean} [no-padding=false] - Removes the default padding from the card.
|
|
19
21
|
*
|
|
20
22
|
* @cssproperty --forge-card-background - The background color of the card.
|
|
@@ -19,6 +19,8 @@ declare global {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
|
+
* @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections.
|
|
23
|
+
*
|
|
22
24
|
* @tag forge-chip-field
|
|
23
25
|
*
|
|
24
26
|
* @property {boolean} [addOnBlur=false] - Whether or not to add chip when blur event
|
|
@@ -14,6 +14,8 @@ import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
|
|
|
14
14
|
const template = '<template><forge-field id=\"field\" multiline><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><div class=\"container\" data-forge-field-input><slot name=\"member\"></slot><slot></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
|
|
15
15
|
const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing)}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
|
|
16
16
|
/**
|
|
17
|
+
* @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections.
|
|
18
|
+
*
|
|
17
19
|
* @tag forge-chip-field
|
|
18
20
|
*
|
|
19
21
|
* @property {boolean} [addOnBlur=false] - Whether or not to add chip when blur event
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { elementFromHTML, getShadowElement, toggleAttribute, walkUpUntil } from '@tylertech/forge-core';
|
|
7
7
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
8
|
-
import {
|
|
8
|
+
import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
|
|
9
9
|
import { STATE_LAYER_CONSTANTS } from '../../state-layer';
|
|
10
10
|
import { CHIP_SET_CONSTANTS } from '../chip-set/chip-set-constants';
|
|
11
11
|
import { CHIP_CONSTANTS } from './chip-constants';
|
|
@@ -18,7 +18,7 @@ export class ChipAdapter extends BaseAdapter {
|
|
|
18
18
|
this._rootElement = getShadowElement(this._component, CHIP_CONSTANTS.selectors.ROOT);
|
|
19
19
|
this._triggerElement = getShadowElement(this._component, CHIP_CONSTANTS.selectors.TRIGGER);
|
|
20
20
|
this._startSlotElement = getShadowElement(this._component, 'slot[name=start]');
|
|
21
|
-
this._focusIndicatorElement = getShadowElement(this._component,
|
|
21
|
+
this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_TAG_NAME);
|
|
22
22
|
this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
|
|
23
23
|
}
|
|
24
24
|
get removeButtonElement() {
|
package/esm/chips/chip/chip.d.ts
CHANGED
|
@@ -30,6 +30,8 @@ declare global {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
|
+
* @summary A compact, interactive element that represents an entity, action, or attribute with support for selection, removal, and various styling options.
|
|
34
|
+
*
|
|
33
35
|
* @tag forge-chip
|
|
34
36
|
*
|
|
35
37
|
* @property {ChipType} type - The type of chip.
|
package/esm/chips/chip/chip.js
CHANGED
|
@@ -17,6 +17,8 @@ import { ChipCore } from './chip-core';
|
|
|
17
17
|
const template = '<template><div class=\"forge-chip\" part=\"root\"><button type=\"button\" id=\"trigger\" class=\"trigger\" part=\"trigger\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><slot></slot><slot name=\"end\"><slot name=\"trailing\"></slot></slot></button><forge-focus-indicator target=\"trigger\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\"trigger\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
|
|
18
18
|
const styles = ':host{display:inline-flex}:host([hidden]){display:none}.forge-chip{--_chip-background:var(--forge-chip-background, transparent);--_chip-color:var(--forge-chip-color, var(--forge-theme-primary, #3f51b5));--_chip-shape:var(--forge-chip-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_chip-spacing:var(--forge-chip-spacing, var(--forge-spacing-xsmall, 8px));--_chip-height:var(--forge-chip-height, 32px);--_chip-padding-inline:var(--forge-chip-padding-inline, var(--forge-spacing-small, 12px));--_chip-padding-block:var(--forge-chip-padding-block, 0);--_chip-cursor:var(--forge-chip-cursor, pointer);--_chip-icon-font-size:var(--forge-chip-icon-font-size, 1.5rem);--_chip-focus-indicator-color:var(--forge-chip-focus-indicator-color, var(--_chip-color));--_chip-disabled-opacity:var(--forge-chip-disabled-opacity, 0.38);--_chip-disabled-cursor:var(--forge-chip-disabled-cursor, not-allowed);--_chip-dense-height:var(--forge-chip-dense-height, 24px);--_chip-dense-padding-inline:var(--forge-chip-dense-padding-inline, var(--forge-spacing-xsmall, 8px));--_chip-dense-spacing:var(--forge-chip-dense-spacing, var(--forge-spacing-xxsmall, 4px));--_chip-dense-font-size:var(--forge-chip-dense-font-size, 0.75rem);--_chip-dense-font-weight:var(--forge-chip-dense-font-weight, normal);--_chip-dense-focus-indicator-offset:var(--forge-chip-dense-focus-indicator-offset, var(--forge-spacing-xxxsmall, 2px));--_chip-dense-icon-font-size:var(--forge-chip-dense-icon-font-size, 1.25rem);--_chip-remove-button-spacing:var(--forge-chip-remove-button-spacing, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-xxsmall, 4px));--_chip-remove-button-height-dense:var(--forge-chip-remove-button-height-dense, 18px);--_chip-remove-button-icon-size-dense:var(--forge-chip-remove-button-icon-size-dense, 16px);--_chip-remove-button-spacing-dense:var(--forge-chip-remove-button-spacing-dense, 0 var(--forge-spacing-xxxsmall, 2px));--_chip-selected-background:var(--forge-chip-selected-background, var(--forge-theme-primary, #3f51b5));--_chip-selected-color:var(--forge-chip-selected-color, var(--forge-theme-on-primary, #ffffff));--_chip-invalid-color:var(--forge-chip-invalid-color, var(--forge-theme-error, #b00020));--_chip-invalid-selected-background:var(--forge-chip-invalid-selected-background, var(--forge-theme-error, #b00020));--_chip-invalid-selected-color:var(--forge-chip-invalid-selected-color, var(--forge-theme-on-error, #ffffff));--_chip-border-width:var(--forge-chip-border-width, var(--forge-border-thin, 1px));--_chip-border-style:var(--forge-chip-border-style, solid);--_chip-border-color:var(--forge-chip-border-color, var(--_chip-color));--_chip-field-background:var(--forge-chip-field-background, var(--forge-theme-surface-container-low, #ebebeb));--_chip-field-color:var(--forge-chip-field-color, var(--forge-theme-on-surface-container-low, #000000));--_chip-field-shape:var(--forge-chip-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_chip-field-border-color:var(--forge-chip-field-border-color, transparent);--_chip-field-cursor:var(--forge-chip-field-cursor, default);--_chip-checkmark-size:var(--forge-chip-checkmark-size, 1.25em);--_chip-checkmark-color:var(--forge-chip-checkmark-color, var(--_chip-color));--_chip-checkmark-spacing:var(--forge-chip-checkmark-spacing, var(--forge-spacing-xsmall, 8px));--_chip-avatar-size:var(--forge-chip-avatar-size, 24px);--_chip-avatar-size-dense:var(--forge-chip-avatar-size-dense, 18px);--_chip-avatar-font-size:var(--forge-chip-avatar-font-size, 0.75rem);--_chip-avatar-font-size-dense:var(--forge-chip-avatar-font-size-dense, 0.5rem);--_chip-avatar-spacing:var(--forge-chip-avatar-spacing, calc(var(--forge-spacing-xsmall, 8px) * -1));--_chip-avatar-spacing-dense:var(--forge-chip-avatar-spacing-dense, calc(var(--forge-spacing-xxsmall, 4px) * -1));--_chip-transition-duration:var(--forge-chip-transition-duration, var(--forge-animation-duration-short3, 150ms));--_chip-transition-easing:var(--forge-chip-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_chip-checkmark-transition-delay:var(--forge-chip-checkmark-transition-delay, 50ms)}.forge-chip{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;height:var(--_chip-height);border-width:var(--_chip-border-width);border-style:var(--_chip-border-style);border-color:var(--_chip-border-color);border-radius:var(--_chip-shape);background:var(--_chip-background);color:var(--_chip-color);transition-property:background-color,color;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing)}.trigger{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:inline-flex;align-items:center;justify-content:center;gap:var(--_chip-spacing);box-sizing:border-box;height:100%;padding-inline:var(--_chip-padding-inline);padding-block:var(--_chip-padding-block);cursor:var(--_chip-cursor);z-index:0;text-decoration:none;border:none;background:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:var(--_chip-shape);outline:0}.remove{padding-inline:var(--_chip-remove-button-spacing);--forge-icon-button-focus-indicator-color:var(--_chip-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-focus-indicator-color);--forge-focus-indicator-shape:var(--_chip-shape)}forge-state-layer{--forge-state-layer-color:var(--_chip-color)}:host([dense]) .forge-chip{--_chip-height:var(--_chip-dense-height);--_chip-padding-inline:var(--_chip-dense-padding-inline);--_chip-spacing:var(--_chip-dense-spacing)}:host([dense]) .trigger{--forge-typography-button-font-size:var(--_chip-dense-font-size);--forge-typography-button-font-weight:var(--_chip-dense-font-weight)}:host([dense]) .remove{--_chip-remove-button-spacing:var(--_chip-remove-button-spacing-dense);--forge-icon-button-density-small-size:var(--_chip-remove-button-height-dense);--forge-icon-button-density-small-icon-size:var(--_chip-remove-button-icon-size-dense)}:host([dense]) forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_chip-dense-focus-indicator-offset)}:host([dense]) ::slotted(forge-avatar){--_chip-avatar-spacing:var(--_chip-avatar-spacing-dense);--forge-typography-subheading2-font-size:var(--_chip-avatar-font-size-dense);--forge-avatar-size:var(--_chip-avatar-size-dense)}:host([dense]) ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])){--_chip-icon-font-size:var(--_chip-dense-icon-font-size)}:host(:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-selected-background);--_chip-color:var(--_chip-selected-color)}:host(:is([type=filter],[type=choice],[type=input])[selected]) forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-background)}:host([invalid]) .forge-chip{--_chip-color:var(--_chip-invalid-color)}:host([invalid]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-invalid-selected-background);--_chip-color:var(--_chip-invalid-selected-color)}:host([disabled]:not([href])) .forge-chip{opacity:var(--_chip-disabled-opacity)}:host([disabled]:not([href])) .trigger{cursor:var(--_chip-disabled-cursor)}::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])){font-size:var(--_chip-icon-font-size)}::slotted(forge-avatar:is([slot=start],[slot=leading])){margin-inline-start:var(--_chip-avatar-spacing)}::slotted(forge-avatar:is([slot=end],[slot=trailing])){margin-inline-end:var(--_chip-avatar-spacing)}::slotted(forge-avatar){--forge-typography-subheading2-font-size:var(--_chip-avatar-font-size);--forge-avatar-size:var(--_chip-avatar-size)}:host([type=filter]) .checkmark{height:var(--_chip-checkmark-size)}:host([type=filter]) .checkmark svg{width:0;height:var(--_chip-checkmark-size);transition-property:width;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing)}:host([type=filter]) .checkmark svg path{stroke:var(--_chip-checkmark-color);transition-property:stroke-dashoffset;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host([type=filter][selected]) .checkmark{padding-inline-start:var(--_chip-checkmark-spacing)}:host([type=filter][selected]) .checkmark svg{width:var(--_chip-checkmark-size)}:host([type=filter][selected]) .checkmark svg path{transition-delay:var(--_chip-checkmark-transition-delay);stroke-dashoffset:0}:host([type=input]) .trigger{padding-inline:var(--_chip-padding-inline) 0}:host([type=field]) .forge-chip{--_chip-background:var(--_chip-field-background);--_chip-color:var(--_chip-field-color);--_chip-border-color:var(--_chip-field-border-color);--_chip-shape:var(--_chip-field-shape);--_chip-cursor:var(--_chip-field-cursor)}:host([theme=secondary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_chip-border-color:var(--forge-chip-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary, #ffc107));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary-container-low, #fff8e1));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary, #3d5afe));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success, #2e7d32));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success-container-low, #e6efe6));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=warning]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning, #d14900));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning-container-low, #f9e9e0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=error]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error, #b00020));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error-container-low, #f6e0e4));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=info]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info, #1565c0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info-container-low, #e3edf7));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info-container-low, #0b3768))}';
|
|
19
19
|
/**
|
|
20
|
+
* @summary A compact, interactive element that represents an entity, action, or attribute with support for selection, removal, and various styling options.
|
|
21
|
+
*
|
|
20
22
|
* @tag forge-chip
|
|
21
23
|
*
|
|
22
24
|
* @property {ChipType} type - The type of chip.
|
|
@@ -22,6 +22,8 @@ declare global {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
|
+
* @summary An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control.
|
|
26
|
+
*
|
|
25
27
|
* @tag forge-color-picker
|
|
26
28
|
*
|
|
27
29
|
* @property {boolean} [allowOpacity=false] Gets/sets whether opacity is displayed and allowed be to changed.
|