@tylertech/forge 3.5.0 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib.js +17 -17
- package/dist/lib.js.map +3 -3
- package/dist/list/forge-list.css +1 -0
- package/esm/index.d.ts +3 -0
- package/esm/index.js +152 -156
- package/esm/list/list-item/list-item.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/package.json +1 -1
- package/sass/list/list-item/_core.scss +3 -0
package/dist/list/forge-list.css
CHANGED
|
@@ -439,6 +439,7 @@
|
|
|
439
439
|
border-radius: inherit;
|
|
440
440
|
opacity: var(--_list-item-selected-opacity);
|
|
441
441
|
background-color: var(--_list-item-selected-background);
|
|
442
|
+
pointer-events: none;
|
|
442
443
|
}
|
|
443
444
|
.forge-list-item--selected .forge-list-item__start {
|
|
444
445
|
color: var(--_list-item-start-selected-color);
|
package/esm/index.d.ts
CHANGED
|
@@ -79,4 +79,7 @@ export * from './deprecated/icon-button';
|
|
|
79
79
|
* Registers all components in the library with the browser.
|
|
80
80
|
*/
|
|
81
81
|
export declare function defineComponents(): void;
|
|
82
|
+
/**
|
|
83
|
+
* Deprecated component registration
|
|
84
|
+
*/
|
|
82
85
|
export declare function defineDeprecatedComponents(): void;
|
package/esm/index.js
CHANGED
|
@@ -9,77 +9,76 @@
|
|
|
9
9
|
* Copyright (c) Tyler Technologies, Inc.
|
|
10
10
|
* License: Apache-2.0
|
|
11
11
|
*/
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
|
|
12
|
+
import { defineAccordionComponent } from './accordion';
|
|
13
|
+
import { defineAppBarComponent, defineAppBarHelpButtonComponent, defineAppBarMenuButtonComponent, defineAppBarNotificationButtonComponent, defineAppBarProfileButtonComponent, defineAppBarSearchComponent, defineProfileCardComponent } from './app-bar';
|
|
14
|
+
import { defineAutocompleteComponent } from './autocomplete';
|
|
15
|
+
import { defineAvatarComponent } from './avatar';
|
|
16
|
+
import { defineBackdropComponent } from './backdrop';
|
|
17
|
+
import { defineBadgeComponent } from './badge';
|
|
18
|
+
import { defineBannerComponent } from './banner';
|
|
19
|
+
import { defineBottomSheetComponent } from './bottom-sheet';
|
|
20
|
+
import { defineButtonComponent } from './button';
|
|
21
|
+
import { defineButtonAreaComponent } from './button-area';
|
|
22
|
+
import { defineButtonToggleComponent, defineButtonToggleGroupComponent } from './button-toggle';
|
|
23
|
+
import { defineCalendarComponent } from './calendar';
|
|
24
|
+
import { defineCardComponent } from './card';
|
|
25
|
+
import { defineCheckboxComponent } from './checkbox';
|
|
26
|
+
import { defineChipFieldComponent } from './chip-field';
|
|
27
|
+
import { defineChipComponent, defineChipSetComponent } from './chips';
|
|
28
|
+
import { defineCircularProgressComponent } from './circular-progress';
|
|
29
|
+
import { defineColorPickerComponent } from './color-picker';
|
|
30
|
+
import { defineDatePickerComponent } from './date-picker';
|
|
31
|
+
import { defineDateRangePickerComponent } from './date-range-picker';
|
|
32
|
+
import { defineDialogComponent } from './dialog';
|
|
33
|
+
import { defineDividerComponent } from './divider';
|
|
34
|
+
import { defineDrawerComponent, defineMiniDrawerComponent, defineModalDrawerComponent } from './drawer';
|
|
35
|
+
import { defineExpansionPanelComponent } from './expansion-panel';
|
|
36
|
+
import { defineFieldComponent } from './field';
|
|
37
|
+
import { defineFilePickerComponent } from './file-picker';
|
|
38
|
+
import { defineFloatingActionButtonComponent } from './floating-action-button';
|
|
39
|
+
import { defineFocusIndicatorComponent } from './focus-indicator';
|
|
40
|
+
import { defineIconComponent } from './icon';
|
|
41
|
+
import { defineIconButtonComponent } from './icon-button';
|
|
42
|
+
import { defineInlineMessageComponent } from './inline-message';
|
|
43
|
+
import { defineKeyComponent, defineKeyItemComponent } from './key';
|
|
44
|
+
import { defineKeyboardShortcutComponent } from './keyboard-shortcut';
|
|
45
|
+
import { defineLabelComponent } from './label';
|
|
46
|
+
import { defineLabelValueComponent } from './label-value';
|
|
47
|
+
import { defineLinearProgressComponent } from './linear-progress';
|
|
48
|
+
import { defineListComponent } from './list';
|
|
49
|
+
import { defineListItemComponent } from './list/list-item';
|
|
50
|
+
import { defineMenuComponent } from './menu';
|
|
51
|
+
import { defineMeterComponent, defineMeterGroupComponent } from './meter';
|
|
52
|
+
import { defineOpenIconComponent } from './open-icon';
|
|
53
|
+
import { defineOverlayComponent } from './overlay';
|
|
54
|
+
import { definePageStateComponent } from './page-state';
|
|
55
|
+
import { definePaginatorComponent } from './paginator';
|
|
56
|
+
import { definePopoverComponent } from './popover';
|
|
57
|
+
import { defineRadioComponent, defineRadioGroupComponent } from './radio';
|
|
58
|
+
import { defineScaffoldComponent } from './scaffold';
|
|
59
|
+
import { defineOptionComponent, defineOptionGroupComponent, defineSelectComponent } from './select';
|
|
60
|
+
import { defineSelectDropdownComponent } from './select/select-dropdown';
|
|
61
|
+
import { defineSkeletonComponent } from './skeleton';
|
|
62
|
+
import { defineSkipLinkComponent } from './skip-link';
|
|
63
|
+
import { defineSliderComponent } from './slider';
|
|
64
|
+
import { defineSplitViewComponent } from './split-view';
|
|
65
|
+
import { defineStackComponent } from './stack';
|
|
66
|
+
import { defineStateLayerComponent } from './state-layer';
|
|
67
|
+
import { defineStepComponent, defineStepperComponent } from './stepper';
|
|
68
|
+
import { defineSwitchComponent } from './switch';
|
|
69
|
+
import { defineTableComponent } from './table';
|
|
70
|
+
import { defineTabBarComponent, defineTabComponent } from './tabs';
|
|
71
|
+
import { defineTextFieldComponent } from './text-field';
|
|
72
|
+
import { defineTimePickerComponent } from './time-picker';
|
|
73
|
+
import { defineToastComponent } from './toast';
|
|
74
|
+
import { defineToolbarComponent } from './toolbar';
|
|
75
|
+
import { defineTooltipComponent } from './tooltip';
|
|
76
|
+
import { defineViewComponent, defineViewSwitcherComponent } from './view-switcher';
|
|
78
77
|
/**
|
|
79
78
|
* Deprecated imports
|
|
80
79
|
*/
|
|
81
|
-
import {
|
|
82
|
-
import {
|
|
80
|
+
import { defineDeprecatedButtonComponent } from './deprecated/button';
|
|
81
|
+
import { defineDeprecatedIconButtonComponent } from './deprecated/icon-button';
|
|
83
82
|
export * from './accordion';
|
|
84
83
|
export * from './app-bar';
|
|
85
84
|
export * from './autocomplete';
|
|
@@ -152,101 +151,98 @@ export * from './view-switcher';
|
|
|
152
151
|
*/
|
|
153
152
|
export * from './deprecated/button';
|
|
154
153
|
export * from './deprecated/icon-button';
|
|
155
|
-
const CUSTOM_ELEMENTS = [
|
|
156
|
-
AccordionComponent,
|
|
157
|
-
AppBarComponent,
|
|
158
|
-
AppBarHelpButtonComponent,
|
|
159
|
-
AppBarMenuButtonComponent,
|
|
160
|
-
AppBarNotificationButtonComponent,
|
|
161
|
-
AppBarProfileButtonComponent,
|
|
162
|
-
AppBarSearchComponent,
|
|
163
|
-
AutocompleteComponent,
|
|
164
|
-
AvatarComponent,
|
|
165
|
-
BackdropComponent,
|
|
166
|
-
BadgeComponent,
|
|
167
|
-
BannerComponent,
|
|
168
|
-
BottomSheetComponent,
|
|
169
|
-
ButtonAreaComponent,
|
|
170
|
-
ButtonComponent,
|
|
171
|
-
ButtonToggleComponent,
|
|
172
|
-
ButtonToggleGroupComponent,
|
|
173
|
-
CalendarComponent,
|
|
174
|
-
CardComponent,
|
|
175
|
-
CheckboxComponent,
|
|
176
|
-
ChipComponent,
|
|
177
|
-
ChipFieldComponent,
|
|
178
|
-
ChipSetComponent,
|
|
179
|
-
CircularProgressComponent,
|
|
180
|
-
ColorPickerComponent,
|
|
181
|
-
DatePickerComponent,
|
|
182
|
-
DateRangePickerComponent,
|
|
183
|
-
DialogComponent,
|
|
184
|
-
DividerComponent,
|
|
185
|
-
DrawerComponent,
|
|
186
|
-
ExpansionPanelComponent,
|
|
187
|
-
FieldComponent,
|
|
188
|
-
FilePickerComponent,
|
|
189
|
-
FloatingActionButtonComponent,
|
|
190
|
-
FocusIndicatorComponent,
|
|
191
|
-
IconButtonComponent,
|
|
192
|
-
IconComponent,
|
|
193
|
-
InlineMessageComponent,
|
|
194
|
-
KeyComponent,
|
|
195
|
-
KeyboardShortcutComponent,
|
|
196
|
-
KeyItemComponent,
|
|
197
|
-
LabelComponent,
|
|
198
|
-
LabelValueComponent,
|
|
199
|
-
LinearProgressComponent,
|
|
200
|
-
ListComponent,
|
|
201
|
-
ListItemComponent,
|
|
202
|
-
MenuComponent,
|
|
203
|
-
MeterComponent,
|
|
204
|
-
MeterGroupComponent,
|
|
205
|
-
MiniDrawerComponent,
|
|
206
|
-
ModalDrawerComponent,
|
|
207
|
-
OpenIconComponent,
|
|
208
|
-
OptionComponent,
|
|
209
|
-
OptionGroupComponent,
|
|
210
|
-
OverlayComponent,
|
|
211
|
-
PageStateComponent,
|
|
212
|
-
PaginatorComponent,
|
|
213
|
-
PopoverComponent,
|
|
214
|
-
ProfileCardComponent,
|
|
215
|
-
RadioComponent,
|
|
216
|
-
RadioGroupComponent,
|
|
217
|
-
ScaffoldComponent,
|
|
218
|
-
SelectComponent,
|
|
219
|
-
SelectDropdownComponent,
|
|
220
|
-
SkeletonComponent,
|
|
221
|
-
SkipLinkComponent,
|
|
222
|
-
SliderComponent,
|
|
223
|
-
SplitViewComponent,
|
|
224
|
-
StackComponent,
|
|
225
|
-
StateLayerComponent,
|
|
226
|
-
StepComponent,
|
|
227
|
-
StepperComponent,
|
|
228
|
-
SwitchComponent,
|
|
229
|
-
TabBarComponent,
|
|
230
|
-
TabComponent,
|
|
231
|
-
TableComponent,
|
|
232
|
-
TextFieldComponent,
|
|
233
|
-
TimePickerComponent,
|
|
234
|
-
ToastComponent,
|
|
235
|
-
ToolbarComponent,
|
|
236
|
-
TooltipComponent,
|
|
237
|
-
ViewComponent,
|
|
238
|
-
ViewSwitcherComponent
|
|
239
|
-
];
|
|
240
154
|
/**
|
|
241
155
|
* Registers all components in the library with the browser.
|
|
242
156
|
*/
|
|
243
157
|
export function defineComponents() {
|
|
244
|
-
|
|
158
|
+
defineAccordionComponent();
|
|
159
|
+
defineAppBarComponent();
|
|
160
|
+
defineAppBarHelpButtonComponent();
|
|
161
|
+
defineAppBarMenuButtonComponent();
|
|
162
|
+
defineAppBarNotificationButtonComponent();
|
|
163
|
+
defineAppBarProfileButtonComponent();
|
|
164
|
+
defineAppBarSearchComponent();
|
|
165
|
+
defineAutocompleteComponent();
|
|
166
|
+
defineAvatarComponent();
|
|
167
|
+
defineBackdropComponent();
|
|
168
|
+
defineBadgeComponent();
|
|
169
|
+
defineBannerComponent();
|
|
170
|
+
defineBottomSheetComponent();
|
|
171
|
+
defineButtonAreaComponent();
|
|
172
|
+
defineButtonComponent();
|
|
173
|
+
defineButtonToggleComponent();
|
|
174
|
+
defineButtonToggleGroupComponent();
|
|
175
|
+
defineCalendarComponent();
|
|
176
|
+
defineCardComponent();
|
|
177
|
+
defineCheckboxComponent();
|
|
178
|
+
defineChipComponent();
|
|
179
|
+
defineChipFieldComponent();
|
|
180
|
+
defineChipSetComponent();
|
|
181
|
+
defineCircularProgressComponent();
|
|
182
|
+
defineColorPickerComponent();
|
|
183
|
+
defineDatePickerComponent();
|
|
184
|
+
defineDateRangePickerComponent();
|
|
185
|
+
defineDialogComponent();
|
|
186
|
+
defineDividerComponent();
|
|
187
|
+
defineDrawerComponent();
|
|
188
|
+
defineExpansionPanelComponent();
|
|
189
|
+
defineFieldComponent();
|
|
190
|
+
defineFilePickerComponent();
|
|
191
|
+
defineFloatingActionButtonComponent();
|
|
192
|
+
defineFocusIndicatorComponent();
|
|
193
|
+
defineIconButtonComponent();
|
|
194
|
+
defineIconComponent();
|
|
195
|
+
defineInlineMessageComponent();
|
|
196
|
+
defineKeyComponent();
|
|
197
|
+
defineKeyboardShortcutComponent();
|
|
198
|
+
defineKeyItemComponent();
|
|
199
|
+
defineLabelComponent();
|
|
200
|
+
defineLabelValueComponent();
|
|
201
|
+
defineLinearProgressComponent();
|
|
202
|
+
defineListComponent();
|
|
203
|
+
defineListItemComponent();
|
|
204
|
+
defineMenuComponent();
|
|
205
|
+
defineMeterComponent();
|
|
206
|
+
defineMeterGroupComponent();
|
|
207
|
+
defineMiniDrawerComponent();
|
|
208
|
+
defineModalDrawerComponent();
|
|
209
|
+
defineOpenIconComponent();
|
|
210
|
+
defineOptionComponent();
|
|
211
|
+
defineOptionGroupComponent();
|
|
212
|
+
defineOverlayComponent();
|
|
213
|
+
definePageStateComponent();
|
|
214
|
+
definePaginatorComponent();
|
|
215
|
+
definePopoverComponent();
|
|
216
|
+
defineProfileCardComponent();
|
|
217
|
+
defineRadioComponent();
|
|
218
|
+
defineRadioGroupComponent();
|
|
219
|
+
defineScaffoldComponent();
|
|
220
|
+
defineSelectComponent();
|
|
221
|
+
defineSelectDropdownComponent();
|
|
222
|
+
defineSkeletonComponent();
|
|
223
|
+
defineSkipLinkComponent();
|
|
224
|
+
defineSliderComponent();
|
|
225
|
+
defineSplitViewComponent();
|
|
226
|
+
defineStackComponent();
|
|
227
|
+
defineStateLayerComponent();
|
|
228
|
+
defineStepComponent();
|
|
229
|
+
defineStepperComponent();
|
|
230
|
+
defineSwitchComponent();
|
|
231
|
+
defineTabBarComponent();
|
|
232
|
+
defineTabComponent();
|
|
233
|
+
defineTableComponent();
|
|
234
|
+
defineTextFieldComponent();
|
|
235
|
+
defineTimePickerComponent();
|
|
236
|
+
defineToastComponent();
|
|
237
|
+
defineToolbarComponent();
|
|
238
|
+
defineTooltipComponent();
|
|
239
|
+
defineViewComponent();
|
|
240
|
+
defineViewSwitcherComponent();
|
|
245
241
|
}
|
|
246
242
|
/**
|
|
247
243
|
* Deprecated component registration
|
|
248
244
|
*/
|
|
249
|
-
const DEPRECATED_CUSTOM_ELEMENTS = [DeprecatedButtonComponent, DeprecatedIconButtonComponent];
|
|
250
245
|
export function defineDeprecatedComponents() {
|
|
251
|
-
|
|
246
|
+
defineDeprecatedButtonComponent();
|
|
247
|
+
defineDeprecatedIconButtonComponent();
|
|
252
248
|
}
|
|
@@ -14,7 +14,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
|
|
|
14
14
|
import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
15
15
|
import { BaseComponent } from '../../core/base/base-component';
|
|
16
16
|
const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div></template>';
|
|
17
|
-
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;display:inline}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
|
|
17
|
+
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;display:inline}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-list-item
|
|
20
20
|
*
|
|
@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
|
|
|
13
13
|
import { SplitViewPanelAdapter } from './split-view-panel-adapter';
|
|
14
14
|
import { IconComponent, IconRegistry } from '../../icon';
|
|
15
15
|
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>';
|
|
16
|
-
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:
|
|
16
|
+
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:ufuft4t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft4t{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:ufuft5a;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft5a{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:ufuft5g;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft5g{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:ufuft5z;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft5z{from{transform:none}to{transform:translateX(100%)}}.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:ufuft67;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft67{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:ufuft6a;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft6a{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:ufuft70;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft70{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ufuft75;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft75{from{transform:none}to{transform:translateY(100%)}}: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}';
|
|
17
17
|
import { StateLayerComponent } from '../../state-layer';
|
|
18
18
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
19
19
|
/**
|
package/package.json
CHANGED
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
border-radius: inherit;
|
|
95
95
|
opacity: #{token(selected-opacity)};
|
|
96
96
|
background-color: #{token(selected-background)};
|
|
97
|
+
pointer-events: none;
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
100
|
|
|
@@ -111,6 +112,8 @@
|
|
|
111
112
|
|
|
112
113
|
@mixin start-end-selected {
|
|
113
114
|
color: #{token(selected-color)};
|
|
115
|
+
|
|
116
|
+
isolation: isolate;
|
|
114
117
|
}
|
|
115
118
|
|
|
116
119
|
@mixin text {
|