@tylertech/forge 3.4.0 → 3.4.2
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 +42 -20
- package/dist/avatar/forge-avatar.css +0 -1
- package/dist/dialog/forge-dialog.css +0 -1
- package/dist/divider/forge-divider.css +0 -1
- package/dist/lib.js +1 -1
- package/dist/lib.js.map +3 -3
- package/dist/radio/forge-radio.css +16 -21
- package/dist/vscode.css-custom-data.json +10 -20
- package/dist/vscode.html-custom-data.json +4 -4
- package/esm/avatar/avatar.js +1 -1
- package/esm/backdrop/backdrop.js +1 -1
- package/esm/button-area/button-area.js +1 -1
- package/esm/calendar/calendar.js +1 -1
- package/esm/date-range-picker/date-range-picker.d.ts +5 -0
- package/esm/date-range-picker/date-range-picker.js +5 -0
- package/esm/divider/divider.js +1 -1
- package/esm/drawer/drawer/drawer.js +1 -1
- package/esm/drawer/mini-drawer/mini-drawer.d.ts +1 -0
- package/esm/drawer/mini-drawer/mini-drawer.js +2 -1
- package/esm/field/field.js +1 -1
- package/esm/linear-progress/linear-progress.js +1 -1
- package/esm/radio/radio/radio.d.ts +1 -4
- package/esm/radio/radio/radio.js +2 -5
- package/esm/split-view/split-view/split-view.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/text-field/text-field-core.js +7 -2
- package/esm/text-field/text-field.d.ts +1 -0
- package/esm/text-field/text-field.js +3 -0
- package/esm/toolbar/toolbar.d.ts +2 -2
- package/esm/toolbar/toolbar.js +3 -3
- package/esm/tooltip/tooltip.js +1 -1
- package/package.json +1 -1
- package/sass/avatar/_core.scss +0 -2
- package/sass/backdrop/_core.scss +0 -1
- package/sass/core/styles/tokens/drawer/mini/_tokens.scss +1 -0
- package/sass/core/styles/tokens/field/_tokens.scss +2 -2
- package/sass/core/styles/tokens/radio/_tokens.scss +2 -5
- package/sass/divider/_core.scss +0 -1
- package/sass/drawer/base/_core.scss +1 -2
- package/sass/drawer/drawer/drawer.scss +3 -9
- package/sass/drawer/mini-drawer/_core.scss +1 -0
- package/sass/linear-progress/_core.scss +4 -1
- package/sass/radio/forge-radio.scss +3 -3
- package/sass/radio/radio/_core.scss +14 -20
- package/sass/split-view/split-view/_mixins.scss +0 -1
- package/sass/split-view/split-view-panel/_mixins.scss +2 -2
- package/sass/toolbar/_core.scss +0 -1
- package/sass/utils/_mixins.scss +1 -1
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--_radio-primary-color: var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));
|
|
9
9
|
--_radio-inactive-color: var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));
|
|
10
10
|
--_radio-size: var(--forge-radio-size, 20px);
|
|
11
|
-
--_radio-mark-size: var(--forge-radio-mark-size,
|
|
11
|
+
--_radio-mark-size: var(--forge-radio-mark-size, 75%);
|
|
12
12
|
--_radio-state-layer-size: var(--forge-radio-state-layer-size, 40px);
|
|
13
13
|
--_radio-state-layer-dense-size: var(--forge-radio-state-layer-dense-size, 24px);
|
|
14
14
|
--_radio-width: var(--forge-radio-width, var(--_radio-size));
|
|
@@ -20,10 +20,7 @@
|
|
|
20
20
|
--_radio-shape: var(--forge-radio-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));
|
|
21
21
|
--_radio-mark-width: var(--forge-radio-mark-width, var(--_radio-mark-size));
|
|
22
22
|
--_radio-mark-height: var(--forge-radio-mark-height, var(--_radio-mark-size));
|
|
23
|
-
--_radio-mark-
|
|
24
|
-
--_radio-mark-checked-color: var(--forge-radio-mark-checked-color, var(--_radio-primary-color));
|
|
25
|
-
--_radio-mark-unchecked-background: var(--forge-radio-mark-unchecked-background, transparent);
|
|
26
|
-
--_radio-mark-checked-background: var(--forge-radio-mark-checked-background, transparent);
|
|
23
|
+
--_radio-mark-color: var(--forge-radio-mark-color, var(--_radio-primary-color));
|
|
27
24
|
--_radio-gap: var(--forge-radio-gap, 0);
|
|
28
25
|
--_radio-justify: var(--forge-radio-justify, start);
|
|
29
26
|
--_radio-direction: var(--forge-radio-direction, initial);
|
|
@@ -146,9 +143,7 @@
|
|
|
146
143
|
block-size: var(--_radio-state-layer-height);
|
|
147
144
|
cursor: pointer;
|
|
148
145
|
position: relative;
|
|
149
|
-
|
|
150
|
-
justify-content: center;
|
|
151
|
-
display: flex;
|
|
146
|
+
display: inline block;
|
|
152
147
|
overflow: hidden;
|
|
153
148
|
transition-duration: var(--_radio-animation-duration);
|
|
154
149
|
transition-delay: var(--_radio-animation-delay);
|
|
@@ -167,28 +162,28 @@
|
|
|
167
162
|
.forge-radio::before::after {
|
|
168
163
|
content: "";
|
|
169
164
|
position: absolute;
|
|
170
|
-
|
|
165
|
+
top: 50%;
|
|
166
|
+
left: 50%;
|
|
167
|
+
transform: translate(-50%, -50%);
|
|
168
|
+
transform-origin: top left;
|
|
171
169
|
transition-duration: var(--_radio-animation-duration);
|
|
172
170
|
transition-delay: var(--_radio-animation-delay);
|
|
173
171
|
transition-timing-function: var(--_radio-animation-timing-function);
|
|
174
|
-
transition-property:
|
|
172
|
+
transition-property: opacity, scale;
|
|
175
173
|
border-radius: var(--_radio-shape);
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
background: var(--_radio-mark-unchecked-background);
|
|
174
|
+
inline-size: var(--_radio-mark-width);
|
|
175
|
+
block-size: var(--_radio-mark-height);
|
|
176
|
+
background: var(--_radio-mark-color);
|
|
177
|
+
scale: 0.5;
|
|
178
|
+
opacity: 0;
|
|
182
179
|
}
|
|
183
180
|
.forge-radio:has(input[type=radio]:checked)::before {
|
|
184
181
|
border-color: var(--_radio-checked-border-color);
|
|
185
|
-
background: radial-gradient(circle, var(--_radio-mark-
|
|
182
|
+
background: radial-gradient(circle, var(--_radio-mark-color) 0%, var(--_radio-mark-color) calc(calc(var(--_radio-mark-size) / 1.4) - 0.2px), transparent calc(calc(var(--_radio-mark-size) / 1.4) + 0.2px), transparent 100%);
|
|
186
183
|
}
|
|
187
184
|
.forge-radio:has(input[type=radio]:checked)::before::after {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
block-size: 0px;
|
|
191
|
-
background: var(--_radio-mark-checked-background);
|
|
185
|
+
scale: 1;
|
|
186
|
+
opacity: 1;
|
|
192
187
|
}
|
|
193
188
|
.forge-radio:has(input[type=radio]:disabled) {
|
|
194
189
|
opacity: var(--_radio-disabled-opacity);
|
|
@@ -3483,13 +3483,13 @@
|
|
|
3483
3483
|
"values": []
|
|
3484
3484
|
},
|
|
3485
3485
|
{
|
|
3486
|
-
"name": "--forge-
|
|
3486
|
+
"name": "--forge-toolbar-height",
|
|
3487
3487
|
"description": "Controls the height.",
|
|
3488
3488
|
"values": []
|
|
3489
3489
|
},
|
|
3490
3490
|
{
|
|
3491
|
-
"name": "--forge-
|
|
3492
|
-
"description": "Controls the minimum height.",
|
|
3491
|
+
"name": "--forge-toolbar-min-height",
|
|
3492
|
+
"description": "Controls the minimum height. Defaults to the toolbar height.",
|
|
3493
3493
|
"values": []
|
|
3494
3494
|
},
|
|
3495
3495
|
{
|
|
@@ -4267,6 +4267,11 @@
|
|
|
4267
4267
|
"description": "The width of the drawer.",
|
|
4268
4268
|
"values": []
|
|
4269
4269
|
},
|
|
4270
|
+
{
|
|
4271
|
+
"name": "--forge-mini-drawer-min-width",
|
|
4272
|
+
"description": "The minimum width of the drawer. Defaults to match the width.",
|
|
4273
|
+
"values": []
|
|
4274
|
+
},
|
|
4270
4275
|
{
|
|
4271
4276
|
"name": "--forge-mini-drawer-hover-width",
|
|
4272
4277
|
"description": "The width of the drawer when hovered.",
|
|
@@ -4598,23 +4603,8 @@
|
|
|
4598
4603
|
"values": []
|
|
4599
4604
|
},
|
|
4600
4605
|
{
|
|
4601
|
-
"name": "--forge-radio-mark-
|
|
4602
|
-
"description": "The color of the radio button's mark
|
|
4603
|
-
"values": []
|
|
4604
|
-
},
|
|
4605
|
-
{
|
|
4606
|
-
"name": "--forge-radio-mark-checked-color",
|
|
4607
|
-
"description": "The color of the radio button's mark when checked.",
|
|
4608
|
-
"values": []
|
|
4609
|
-
},
|
|
4610
|
-
{
|
|
4611
|
-
"name": "--forge-radio-mark-unchecked-background",
|
|
4612
|
-
"description": "The background of the radio button's mark when unchecked.",
|
|
4613
|
-
"values": []
|
|
4614
|
-
},
|
|
4615
|
-
{
|
|
4616
|
-
"name": "--forge-radio-mark-checked-background",
|
|
4617
|
-
"description": "The background of the radio button's mark when checked.",
|
|
4606
|
+
"name": "--forge-radio-mark-color",
|
|
4607
|
+
"description": "The color of the radio button's mark.",
|
|
4618
4608
|
"values": []
|
|
4619
4609
|
},
|
|
4620
4610
|
{
|
|
@@ -689,7 +689,7 @@
|
|
|
689
689
|
},
|
|
690
690
|
{
|
|
691
691
|
"name": "forge-date-range-picker",
|
|
692
|
-
"description": "\n---\n",
|
|
692
|
+
"description": "\n---\n\n\n### **Events:**\n - **forge-date-range-picker-change** - Emits when the value of the date range picker changes.\n- **forge-date-range-picker-open** - Emits when the date range picker calendar opens.\n- **forge-date-range-picker-close** - Emits when the date range picker calendar closes.\n- **forge-date-range-picker-input** - Emits when the user inputs a value into the date range picker.",
|
|
693
693
|
"attributes": [
|
|
694
694
|
{
|
|
695
695
|
"name": "allow-invalid-date",
|
|
@@ -2394,7 +2394,7 @@
|
|
|
2394
2394
|
},
|
|
2395
2395
|
{
|
|
2396
2396
|
"name": "forge-toolbar",
|
|
2397
|
-
"description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.\nThis component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-
|
|
2397
|
+
"description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.\nThis component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-toolbar-height** - Controls the height. _(default: undefined)_\n- **--forge-toolbar-min-height** - Controls the minimum height. Defaults to the toolbar height. _(default: undefined)_\n- **--forge-theme-surface** - Controls the background-color of the toolbar. _(default: undefined)_\n- **--forge-toolbar-divider-width** - Controls the divider width. _(default: undefined)_\n- **--forge-toolbar-divider-style** - Controls the divider style. _(default: undefined)_\n- **--forge-toolbar-divider-color** - Controls the divider color. _(default: undefined)_\n- **--forge-toolbar-shape** - Controls the border radius of the toolbar. _(default: undefined)_\n- **--forge-toolbar-start-start-shape** - Controls the border radius of the top left corner. _(default: undefined)_\n- **--forge-toolbar-start-end-shape** - Controls the border radius of the top right corner. _(default: undefined)_\n- **--forge-toolbar-end-start-shape** - Controls the border radius of the bottom left corner. _(default: undefined)_\n- **--forge-toolbar-end-end-shape** - Controls the border radius of the bottom right corner. _(default: undefined)_\n- **--forge-toolbar-padding** - Controls the left and right padding using the padding-inline style. _(default: undefined)_\n- **--forge-toolbar-padding-block** - Controls the top and bottom padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-padding-inline** - Controls the left and right padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-columns** - The grid column track sizes. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element wrapping all slots and content.\n- **inner** - The internal container element for the start, center, and end slots.\n- **before-section-start** - The container element for the before-start slot.\n- **section-start** - The container element for the start slot.\n- **section-center** - The container element for the center slot.\n- **section-end** - The container element for the end slot.\n- **after-section-end** - The container element for the after-end slot.",
|
|
2398
2398
|
"attributes": [
|
|
2399
2399
|
{
|
|
2400
2400
|
"name": "inverted",
|
|
@@ -2918,7 +2918,7 @@
|
|
|
2918
2918
|
},
|
|
2919
2919
|
{
|
|
2920
2920
|
"name": "forge-mini-drawer",
|
|
2921
|
-
"description": "\n---\n\n\n### **Events:**\n - **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-mini-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-width** - The width of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-delay** - The delay before the drawer closes when the mouse leaves the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-duration** - The transition duration of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-easing** - The transition timing function of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-delay** - The delay before the drawer closes when the mouse leaves the drawer when hovered. _(default: undefined)_\n- **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **container** - The container element around the content.\n- **content** - The content container element.",
|
|
2921
|
+
"description": "\n---\n\n\n### **Events:**\n - **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-mini-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-min-width** - The minimum width of the drawer. Defaults to match the width. _(default: undefined)_\n- **--forge-mini-drawer-hover-width** - The width of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-delay** - The delay before the drawer closes when the mouse leaves the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-duration** - The transition duration of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-easing** - The transition timing function of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-delay** - The delay before the drawer closes when the mouse leaves the drawer when hovered. _(default: undefined)_\n- **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **container** - The container element around the content.\n- **content** - The content container element.",
|
|
2922
2922
|
"attributes": [
|
|
2923
2923
|
{
|
|
2924
2924
|
"name": "hover",
|
|
@@ -3061,7 +3061,7 @@
|
|
|
3061
3061
|
},
|
|
3062
3062
|
{
|
|
3063
3063
|
"name": "forge-radio",
|
|
3064
|
-
"description": "The Forge Radio component is used to create a form input where only one out of a set of\nvalues should be selected.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n\n### **CSS Properties:**\n - **--forge-radio-primary-color** - The primary color of the radio button when checked. _(default: undefined)_\n- **--forge-radio-inactive-color** - The color of the radio button when unchecked. _(default: undefined)_\n- **--forge-radio-size** - The size of the radio button in the inline and block directions. _(default: undefined)_\n- **--forge-radio-width** - The width of the radio button. _(default: undefined)_\n- **--forge-radio-height** - The height of the radio button. _(default: undefined)_\n- **--forge-radio-border-width** - The width of the radio button's border. _(default: undefined)_\n- **--forge-radio-unchecked-border-color** - The color of the radio button's border when unchecked. _(default: undefined)_\n- **--forge-radio-checked-border-color** - The color of the radio button's border when checked. _(default: undefined)_\n- **--forge-radio-background** - The background of the radio button. _(default: undefined)_\n- **--forge-radio-shape** - The shape of the radio button. _(default: undefined)_\n- **--forge-radio-mark-size** - The size of the radio button's mark in the inline and block directions. _(default: undefined)_\n- **--forge-radio-mark-width** - The width of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-height** - The height of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-
|
|
3064
|
+
"description": "The Forge Radio component is used to create a form input where only one out of a set of\nvalues should be selected.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n\n### **CSS Properties:**\n - **--forge-radio-primary-color** - The primary color of the radio button when checked. _(default: undefined)_\n- **--forge-radio-inactive-color** - The color of the radio button when unchecked. _(default: undefined)_\n- **--forge-radio-size** - The size of the radio button in the inline and block directions. _(default: undefined)_\n- **--forge-radio-width** - The width of the radio button. _(default: undefined)_\n- **--forge-radio-height** - The height of the radio button. _(default: undefined)_\n- **--forge-radio-border-width** - The width of the radio button's border. _(default: undefined)_\n- **--forge-radio-unchecked-border-color** - The color of the radio button's border when unchecked. _(default: undefined)_\n- **--forge-radio-checked-border-color** - The color of the radio button's border when checked. _(default: undefined)_\n- **--forge-radio-background** - The background of the radio button. _(default: undefined)_\n- **--forge-radio-shape** - The shape of the radio button. _(default: undefined)_\n- **--forge-radio-mark-size** - The size of the radio button's mark in the inline and block directions. _(default: undefined)_\n- **--forge-radio-mark-width** - The width of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-height** - The height of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-color** - The color of the radio button's mark. _(default: undefined)_\n- **--forge-radio-gap** - The gap between the radio button and its label. _(default: undefined)_\n- **--forge-radio-justify** - The alignment of the radio button and its label in the inline direction. _(default: undefined)_\n- **--forge-radio-direction** - The direction of the radio button and its label. _(default: undefined)_\n- **--forge-radio-state-layer-size** - The size of the radio button's state layer in the inline and block directions. _(default: undefined)_\n- **--forge-radio-state-layer-width** - The width of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-height** - The height of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-unchecked** - color - The color of the radio button's state layer when unchecked. _(default: undefined)_\n- **--forge-radio-state-layer-checked-color** - The color of the radio button's state layer when checked. _(default: undefined)_\n- **--forge-radio-state-layer-shape** - The shape of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-dense-size** - The size of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-width** - The width of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-height** - The height of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-disabled-opacity** - The opacity of the radio button when disabled. _(default: undefined)_\n- **--forge-radio-animation-duration** - The duration of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-timing-function** - The timing function of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-delay** - The delay of the radio button's animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - Styles the radio's root element.\n- **background** - Styles the border and background of the radio.\n- **focus-indicator** - Styles the focus indicator of the radio.\n- **state-layer** - Styles the state layer of the radio.",
|
|
3065
3065
|
"attributes": [
|
|
3066
3066
|
{
|
|
3067
3067
|
"name": "checked",
|
package/esm/avatar/avatar.js
CHANGED
|
@@ -10,7 +10,7 @@ import { AvatarCore } from './avatar-core';
|
|
|
10
10
|
import { AVATAR_CONSTANTS } from './avatar-constants';
|
|
11
11
|
import { BaseComponent } from '../core/base/base-component';
|
|
12
12
|
const template = '<template><div class=\"forge-avatar\" aria-hidden=\"true\" part=\"root\"><slot></slot></div></template>';
|
|
13
|
-
const styles = ':host{
|
|
13
|
+
const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-avatar{--_avatar-size:var(--forge-avatar-size, 40px);--_avatar-background:var(--forge-avatar-background, var(--forge-theme-tertiary, #3d5afe));--_avatar-color:var(--forge-avatar-color, var(--forge-theme-on-tertiary, #ffffff));--_avatar-transition-duration:var(--forge-avatar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_avatar-transition-timing:var(--forge-avatar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_avatar-shape:var(--forge-avatar-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)))}.forge-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;transition:height var(--_avatar-transition-duration) var(--_avatar-transition-timing),width var(--_avatar-transition-duration) var(--_avatar-transition-timing);border-radius:var(--_avatar-shape);box-sizing:border-box;width:var(--_avatar-size);height:var(--_avatar-size);background-color:var(--_avatar-background);background-position:center;background-repeat:no-repeat;background-size:cover;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));font-weight:var(--forge-typography-subheading2-font-weight,400);line-height:var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-subheading2-letter-spacing, normal);text-transform:var(--forge-typography-subheading2-text-transform,inherit);text-decoration:var(--forge-typography-subheading2-text-decoration,inherit);color:var(--_avatar-color)}.forge-avatar--image{background-color:inherit}';
|
|
14
14
|
/**
|
|
15
15
|
* @tag forge-avatar
|
|
16
16
|
*
|
package/esm/backdrop/backdrop.js
CHANGED
|
@@ -8,7 +8,7 @@ import { attachShadowTemplate, coerceBoolean, customElement, getShadowElement }
|
|
|
8
8
|
import { BaseComponent } from '../core/base/base-component';
|
|
9
9
|
import { BACKDROP_CONSTANTS } from './backdrop-constants';
|
|
10
10
|
const template = '<template><div class=\"forge-backdrop\" part=\"root\"></div></template>';
|
|
11
|
-
const styles = '@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}:host{display:contents}:host([hidden]){display:none}.forge-backdrop{--_backdrop-background:var(--forge-backdrop-background, #000);--_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);--_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));--_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));--_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));--_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-backdrop{position:absolute;inset:0;
|
|
11
|
+
const styles = '@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}:host{display:contents}:host([hidden]){display:none}.forge-backdrop{--_backdrop-background:var(--forge-backdrop-background, #000);--_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);--_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));--_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));--_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));--_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-backdrop{position:absolute;inset:0;z-index:var(--_backdrop-z-index);background:var(--_backdrop-background);opacity:0;animation-fill-mode:forwards}:host([fixed]) .forge-backdrop{position:fixed}:host([visible]) .forge-backdrop{opacity:var(--_backdrop-opacity)}:host([visible]) .forge-backdrop.entering{animation-name:enter;animation-duration:var(--_backdrop-enter-animation-duration);animation-timing-function:var(--_backdrop-enter-animation-easing)}:host([visible]) .forge-backdrop.exiting{animation-name:exit;animation-duration:var(--_backdrop-exit-animation-duration);animation-timing-function:var(--_backdrop-exit-animation-easing)}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-backdrop
|
|
14
14
|
*
|
|
@@ -12,7 +12,7 @@ import { FocusIndicatorComponent } from '../focus-indicator';
|
|
|
12
12
|
import { StateLayerComponent } from '../state-layer';
|
|
13
13
|
import { BaseComponent } from '../core/base/base-component';
|
|
14
14
|
const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot id=\"content\"></slot><forge-state-layer target=\"root\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator target=\"button\" part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
|
|
15
|
-
const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:
|
|
15
|
+
const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}forge-focus-indicator{z-index:1;--forge-focus-indicator-color:var(--_button-area-focus-indicator-color);--forge-focus-indicator-outward-offset:var(--_button-area-focus-indicator-offset)}forge-state-layer{--forge-state-layer-color:var(--_button-area-primary-color);border-radius:inherit}';
|
|
16
16
|
/**
|
|
17
17
|
* @tag forge-button-area
|
|
18
18
|
*
|
package/esm/calendar/calendar.js
CHANGED
|
@@ -18,7 +18,7 @@ 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-calendar__day::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::after{float:left;padding-top:100%;content:\"\"}.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{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.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{font-size:var(--forge-calendar-event-dot-size, 12px)}.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__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{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:
|
|
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-calendar__day::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::after{float:left;padding-top:100%;content:\"\"}.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{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.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{font-size:var(--forge-calendar-event-dot-size, 12px)}.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__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{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}#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
23
|
* @tag forge-calendar
|
|
24
24
|
*
|
|
@@ -48,6 +48,11 @@ declare global {
|
|
|
48
48
|
* @property {DayOfWeek[]} [disabledDaysOfWeek=[]] - Gets/sets the disabled days of the week.
|
|
49
49
|
* @property {string} [yearRange=''] - Gets/sets the year range for the date range picker.
|
|
50
50
|
* @property {string | undefined} [locale=undefined] - Gets/sets the locale for the date range picker.
|
|
51
|
+
*
|
|
52
|
+
* @event {CustomEvent<IDateRangePickerChangeEventData>} forge-date-range-picker-change - Emits when the value of the date range picker changes.
|
|
53
|
+
* @event {CustomEvent<void>} forge-date-range-picker-open - Emits when the date range picker calendar opens.
|
|
54
|
+
* @event {CustomEvent<void>} forge-date-range-picker-close - Emits when the date range picker calendar closes.
|
|
55
|
+
* @event {CustomEvent<string>} forge-date-range-picker-input - Emits when the user inputs a value into the date range picker.
|
|
51
56
|
*/
|
|
52
57
|
export declare class DateRangePickerComponent extends BaseDatePickerComponent<IDatePickerRange, IDatePickerRange, DateRangePickerCore> implements IDateRangePickerComponent {
|
|
53
58
|
static get observedAttributes(): string[];
|
|
@@ -44,6 +44,11 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
|
|
|
44
44
|
* @property {DayOfWeek[]} [disabledDaysOfWeek=[]] - Gets/sets the disabled days of the week.
|
|
45
45
|
* @property {string} [yearRange=''] - Gets/sets the year range for the date range picker.
|
|
46
46
|
* @property {string | undefined} [locale=undefined] - Gets/sets the locale for the date range picker.
|
|
47
|
+
*
|
|
48
|
+
* @event {CustomEvent<IDateRangePickerChangeEventData>} forge-date-range-picker-change - Emits when the value of the date range picker changes.
|
|
49
|
+
* @event {CustomEvent<void>} forge-date-range-picker-open - Emits when the date range picker calendar opens.
|
|
50
|
+
* @event {CustomEvent<void>} forge-date-range-picker-close - Emits when the date range picker calendar closes.
|
|
51
|
+
* @event {CustomEvent<string>} forge-date-range-picker-input - Emits when the user inputs a value into the date range picker.
|
|
47
52
|
*/
|
|
48
53
|
let DateRangePickerComponent = class DateRangePickerComponent extends BaseDatePickerComponent {
|
|
49
54
|
static get observedAttributes() {
|
package/esm/divider/divider.js
CHANGED
|
@@ -8,7 +8,7 @@ import { attachShadowTemplate, coerceBoolean, customElement } from '@tylertech/f
|
|
|
8
8
|
import { BaseComponent } from '../core/base/base-component';
|
|
9
9
|
import { DIVIDER_CONSTANTS } from './divider-constants';
|
|
10
10
|
const template = '<template><div class=\"forge-divider\" part=\"root\"></div></template>';
|
|
11
|
-
const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{display:block;
|
|
11
|
+
const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{display:block;margin:var(--_divider-margin)}:host([hidden]){display:none}.forge-divider{--_divider-color:var(--forge-divider-color, var(--forge-theme-outline, #e0e0e0));--_divider-width:var(--forge-divider-width, var(--forge-border-thin, 1px));--_divider-border-style:var(--forge-divider-border-style, solid)}.forge-divider{border:none;border-bottom-color:var(--_divider-color);border-bottom-width:var(--_divider-width);border-bottom-style:var(--_divider-border-style);height:0}:host([vertical]){display:inline-block;height:100%}:host([vertical]) .forge-divider{border:none;border-right-color:var(--_divider-color);border-right-width:var(--_divider-width);border-right-style:var(--_divider-border-style);height:100%;width:0}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-divider
|
|
14
14
|
*
|
|
@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate } from '@tylertech/forge-core';
|
|
|
8
8
|
import { DRAWER_CONSTANTS } from './drawer-constants';
|
|
9
9
|
import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
|
|
10
10
|
const template = '<template><div class=\"forge-drawer\" part=\"root\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
|
|
11
|
-
const styles = ':host{display:
|
|
11
|
+
const styles = ':host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-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-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}:host([open]){transform:translateZ(0)}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-drawer
|
|
14
14
|
*
|
|
@@ -20,6 +20,7 @@ declare global {
|
|
|
20
20
|
* @attribute {boolean} [hover=false] - The drawer will expand open when hovered.
|
|
21
21
|
*
|
|
22
22
|
* @cssproperty --forge-mini-drawer-width - The width of the drawer.
|
|
23
|
+
* @cssproperty --forge-mini-drawer-min-width - The minimum width of the drawer. Defaults to match the width.
|
|
23
24
|
* @cssproperty --forge-mini-drawer-hover-width - The width of the drawer when hovered.
|
|
24
25
|
* @cssproperty --forge-mini-drawer-transition-duration - The transition duration of the drawer.
|
|
25
26
|
* @cssproperty --forge-mini-drawer-transition-easing - The transition timing function of the drawer.
|
|
@@ -8,7 +8,7 @@ import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
|
|
|
8
8
|
import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
|
|
9
9
|
import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants';
|
|
10
10
|
const template = '<template><div class=\"root\" part=\"root\"><div class=\"forge-drawer mini\" part=\"container\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></div></template>';
|
|
11
|
-
const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:
|
|
11
|
+
const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto;overflow:overlay}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-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-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-mini-drawer
|
|
14
14
|
*
|
|
@@ -17,6 +17,7 @@ const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);
|
|
|
17
17
|
* @attribute {boolean} [hover=false] - The drawer will expand open when hovered.
|
|
18
18
|
*
|
|
19
19
|
* @cssproperty --forge-mini-drawer-width - The width of the drawer.
|
|
20
|
+
* @cssproperty --forge-mini-drawer-min-width - The minimum width of the drawer. Defaults to match the width.
|
|
20
21
|
* @cssproperty --forge-mini-drawer-hover-width - The width of the drawer when hovered.
|
|
21
22
|
* @cssproperty --forge-mini-drawer-transition-duration - The transition duration of the drawer.
|
|
22
23
|
* @cssproperty --forge-mini-drawer-transition-easing - The transition timing function of the drawer.
|