@vonage/vwc-select 2.24.1 → 2.25.3
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/package.json +11 -11
- package/readme.md +16 -15
- package/src/vwc-select.css.ts +1 -1
- package/src/vwc-select.scss +2 -1
- package/src/vwc-select.ts +6 -4
- package/vwc-select.css.js +1 -1
- package/vwc-select.css.js.map +1 -1
- package/vwc-select.d.ts +3 -2
- package/vwc-select.js +3 -4
- package/vwc-select.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-select",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.25.3",
|
|
4
4
|
"description": "select component",
|
|
5
5
|
"author": "yinonov <yinon@hotmail.com>",
|
|
6
6
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/select#readme",
|
|
@@ -29,20 +29,20 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@material/mwc-select": "^0.22.1",
|
|
32
|
-
"@vonage/vvd-core": "2.
|
|
33
|
-
"@vonage/vvd-foundation": "2.
|
|
34
|
-
"@vonage/vvd-style-coupling": "2.
|
|
35
|
-
"@vonage/vwc-helper-message": "2.
|
|
36
|
-
"@vonage/vwc-icon": "2.
|
|
37
|
-
"@vonage/vwc-notched-outline": "2.
|
|
32
|
+
"@vonage/vvd-core": "2.25.3",
|
|
33
|
+
"@vonage/vvd-foundation": "2.25.3",
|
|
34
|
+
"@vonage/vvd-style-coupling": "2.25.3",
|
|
35
|
+
"@vonage/vwc-helper-message": "2.25.3",
|
|
36
|
+
"@vonage/vwc-icon": "2.25.3",
|
|
37
|
+
"@vonage/vwc-notched-outline": "2.25.3",
|
|
38
38
|
"lit-element": "^2.4.0",
|
|
39
39
|
"tslib": "^2.3.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@vonage/vvd-design-tokens": "2.
|
|
43
|
-
"@vonage/vvd-typography": "2.
|
|
44
|
-
"@vonage/vvd-umbrella": "2.
|
|
42
|
+
"@vonage/vvd-design-tokens": "2.25.3",
|
|
43
|
+
"@vonage/vvd-typography": "2.25.3",
|
|
44
|
+
"@vonage/vvd-umbrella": "2.25.3",
|
|
45
45
|
"typescript": "^4.3.2"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "31c06c0afb665c0139f0f9f677b7489891267257"
|
|
48
48
|
}
|
package/readme.md
CHANGED
|
@@ -40,21 +40,22 @@ the text/content within the items is for **labeling** purposes only, should be c
|
|
|
40
40
|
|
|
41
41
|
#### Properties
|
|
42
42
|
|
|
43
|
-
| Property | Modifiers | Type
|
|
44
|
-
|
|
45
|
-
| `disabled` | | `boolean`
|
|
46
|
-
| `helper` | | `string`
|
|
47
|
-
| `icon` | | `string`
|
|
48
|
-
| `index` | readonly | `number`
|
|
49
|
-
| `items` | readonly | `ListItemBase[]`
|
|
50
|
-
| `label` | | `string`
|
|
51
|
-
| `naturalMenuWidth` | | `boolean`
|
|
52
|
-
| `outlined` | | `boolean`
|
|
53
|
-
| `required` | | `boolean`
|
|
54
|
-
| `selected` | readonly | `ListItemBase
|
|
55
|
-
| `validateOnInitialRender` | | `boolean`
|
|
56
|
-
| `validationMessage` | | `string`
|
|
57
|
-
| `value` | | `string`
|
|
43
|
+
| Property | Modifiers | Type | Description |
|
|
44
|
+
|---------------------------|-----------|------------------|-----------------|
|
|
45
|
+
| `disabled` | | `boolean` | |
|
|
46
|
+
| `helper` | | `string` | |
|
|
47
|
+
| `icon` | | `string` | |
|
|
48
|
+
| `index` | readonly | `number` | |
|
|
49
|
+
| `items` | readonly | `ListItemBase[]` | |
|
|
50
|
+
| `label` | | `string` | |
|
|
51
|
+
| `naturalMenuWidth` | | `boolean` | |
|
|
52
|
+
| `outlined` | | `boolean` | |
|
|
53
|
+
| `required` | | `boolean` | |
|
|
54
|
+
| `selected` | readonly | `ListItemBase \ | null` | |
|
|
55
|
+
| `validateOnInitialRender` | | `boolean` | |
|
|
56
|
+
| `validationMessage` | | `string` | |
|
|
57
|
+
| `value` | | `string` | |
|
|
58
|
+
| `appearance` | | `ghost` | no input border |
|
|
58
59
|
|
|
59
60
|
#### Methods
|
|
60
61
|
|
package/src/vwc-select.css.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// autogenerated module
|
|
2
2
|
import {css} from 'lit-element';
|
|
3
|
-
export const style = css`:host{--mdc-shape-medium: 6px;--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host{--mdc-select-fill-color: var(--vvd-color-canvas);--mdc-select-ink-color: var(--vvd-color-on-canvas);--mdc-select-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-select-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-select-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-select-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-focused-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-disabled-dropdown-icon-color: var( --mdc-select-disabled-ink-color );--mdc-select-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-select-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-select-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-select-error-color: var(--vvd-formfield-label-error-ink);--mdc-select-error-fill-color: var(--vvd-formfield-error-fill);--mdc-select-error-dropdown-icon-color: var(--mdc-select-error-color);--mdc-shape-small: var(--border-radius);--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);display:inline-flex;flex-direction:column;font-stretch:var(--mdc-typography-subtitle1-font-stretch);--vvd-select-size-block:48px}:host .mdc-select__selected-text{padding:22px 0 6px}:host .vvd-select-dropdown-icon,:host .vvd-select-icon{--icon-size: 20px;display:inline-flex;align-self:center;margin:0 16px;color:var(--mdc-select-label-ink-color)}:host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) .mdc-floating-label{color:var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select{background-color:var(--mdc-select-disabled-fill-color)}:host([disabled]) .mdc-select vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-disabled-border-color )}:host([disabled]) .mdc-select .mdc-select__selected-text{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .vvd-select-icon{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .mdc-notched-outline .mdc-floating-label--float-above{--mdc-theme-primary: var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select .vvd-select-dropdown-icon{color:var(--mdc-select-disabled-dropdown-icon-color)}:host([dense]){--vvd-select-size-block:40px}:host([dense]) .mdc-select__selected-text{padding:0}:host([dense]) .mdc-select .mdc-floating-label{--mdc-select-label-ink-color: var(--vvd-color-on-canvas);--mdc-select-error-color: var(--vvd-color-on-canvas);top:-24px;left:-12px;transform:none}:host([dense]) .mdc-select:not(.mdc-select--no-label){margin-top:24px}.mdc-select{border-radius:var(--mdc-shape-small)}.mdc-select .vvd-select-dropdown-icon{transition:transform 200ms}.mdc-select.mdc-select--activated .vvd-select-dropdown-icon{transform:rotateX(180deg)}.mdc-select--outlined{background-color:var(--mdc-select-fill-color)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:calc(20px + 16px * 2 - 12px)}.mdc-select--outlined .mdc-select__anchor{height:var(--vvd-select-size-block);padding-inline-start:16px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:transform .15s,font-size .15s}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{color:var(--mdc-select-label-ink-color);font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-100%)}@media screen and (prefers-reduced-motion: reduce){.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:none}}.mdc-select--invalid.mdc-select--outlined{background-color:var(--mdc-select-error-fill-color)}.mdc-select--invalid.mdc-select--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-select-error-color)}.mdc-select--invalid.mdc-select--outlined .mdc-floating-label{color:var(--mdc-select-error-color)}@media screen and (prefers-reduced-motion: reduce){.mdc-select .vvd-select-dropdown-icon{transition:none}}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-idle-border-color )}:host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,:host(:not([disabled]):hover) .mdc-select:not(.mdc-select--invalid):not(.mdc-select--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--mdc-shape-small:6px}:host([shape=pill i]){--mdc-shape-small:24px}:host([ghost][dense]) .mdc-select .mdc-floating-label{left:0}:host([ghost][dense]) vwc-notched-outline{--mdc-notched-outline-stroke-width: 0}:host([ghost][dense]) .mdc-select__anchor{display:block}`;
|
|
3
|
+
export const style = css`:host{--mdc-shape-medium: 6px;--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host{--mdc-select-fill-color: var(--vvd-color-canvas);--mdc-select-ink-color: var(--vvd-color-on-canvas);--mdc-select-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-select-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-select-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-select-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-focused-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-disabled-dropdown-icon-color: var( --mdc-select-disabled-ink-color );--mdc-select-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-select-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-select-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-select-error-color: var(--vvd-formfield-label-error-ink);--mdc-select-error-fill-color: var(--vvd-formfield-error-fill);--mdc-select-error-dropdown-icon-color: var(--mdc-select-error-color);--mdc-shape-small: var(--border-radius);--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);display:inline-flex;flex-direction:column;font-stretch:var(--mdc-typography-subtitle1-font-stretch);--vvd-select-size-block:48px}:host .mdc-select__selected-text{padding:22px 0 6px}:host .vvd-select-dropdown-icon,:host .vvd-select-icon{--icon-size: 20px;display:inline-flex;align-self:center;margin:0 16px;color:var(--mdc-select-label-ink-color)}:host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) .mdc-floating-label{color:var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select{background-color:var(--mdc-select-disabled-fill-color)}:host([disabled]) .mdc-select vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-disabled-border-color )}:host([disabled]) .mdc-select .mdc-select__selected-text{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .vvd-select-icon{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .mdc-notched-outline .mdc-floating-label--float-above{--mdc-theme-primary: var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select .vvd-select-dropdown-icon{color:var(--mdc-select-disabled-dropdown-icon-color)}:host([dense]){--vvd-select-size-block:40px}:host([dense]) .mdc-select__selected-text{padding:0}:host([dense]) .mdc-select .mdc-floating-label{--mdc-select-label-ink-color: var(--vvd-color-on-canvas);--mdc-select-error-color: var(--vvd-color-on-canvas);top:-24px;left:-12px;transform:none}:host([dense]) .mdc-select:not(.mdc-select--no-label){margin-top:24px}.mdc-select{border-radius:var(--mdc-shape-small)}.mdc-select .vvd-select-dropdown-icon{transition:transform 200ms}.mdc-select.mdc-select--activated .vvd-select-dropdown-icon{transform:rotateX(180deg)}.mdc-select--outlined{background-color:var(--mdc-select-fill-color)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:calc(20px + 16px * 2 - 12px)}.mdc-select--outlined .mdc-select__anchor{height:var(--vvd-select-size-block);padding-inline-start:16px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:transform .15s,font-size .15s}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{color:var(--mdc-select-label-ink-color);font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-100%)}@media screen and (prefers-reduced-motion: reduce){.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:none}}.mdc-select--invalid.mdc-select--outlined{background-color:var(--mdc-select-error-fill-color)}.mdc-select--invalid.mdc-select--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-select-error-color)}.mdc-select--invalid.mdc-select--outlined .mdc-floating-label{color:var(--mdc-select-error-color)}@media screen and (prefers-reduced-motion: reduce){.mdc-select .vvd-select-dropdown-icon{transition:none}}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-idle-border-color )}:host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,:host(:not([disabled]):hover) .mdc-select:not(.mdc-select--invalid):not(.mdc-select--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--mdc-shape-small:6px}:host([shape=pill i]){--mdc-shape-small:24px}:host([appearance=ghost i][dense]) .mdc-select .mdc-floating-label{left:0}:host([appearance=ghost i][dense]) vwc-notched-outline{--mdc-notched-outline-stroke-width: 0}:host([appearance=ghost i][dense]) .mdc-select__anchor{display:block}`;
|
package/src/vwc-select.scss
CHANGED
|
@@ -188,6 +188,7 @@ vwc-notched-outline {
|
|
|
188
188
|
--mdc-notched-outline-border-color: var(
|
|
189
189
|
--mdc-select-outlined-idle-border-color
|
|
190
190
|
);
|
|
191
|
+
|
|
191
192
|
}
|
|
192
193
|
|
|
193
194
|
:host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,
|
|
@@ -206,7 +207,7 @@ vwc-notched-outline {
|
|
|
206
207
|
)
|
|
207
208
|
);
|
|
208
209
|
|
|
209
|
-
:host([ghost][dense]) {
|
|
210
|
+
:host([appearance='ghost'i][dense]) {
|
|
210
211
|
.mdc-select .mdc-floating-label {
|
|
211
212
|
left: 0;
|
|
212
213
|
}
|
package/src/vwc-select.ts
CHANGED
|
@@ -14,7 +14,7 @@ import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupl
|
|
|
14
14
|
import { style as vwcSelectStyle } from './vwc-select.css.js';
|
|
15
15
|
import { styles as mwcSelectStyles } from '@material/mwc-select/mwc-select.css.js';
|
|
16
16
|
import { associateWithForm } from '@vonage/vvd-foundation/form-association.js';
|
|
17
|
-
import type { Shape } from '@vonage/vvd-foundation/constants.js';
|
|
17
|
+
import type { Shape, Layout } from '@vonage/vvd-foundation/constants.js';
|
|
18
18
|
import { handleAutofocus } from '@vonage/vvd-foundation/general-utils.js';
|
|
19
19
|
|
|
20
20
|
declare global {
|
|
@@ -30,6 +30,7 @@ const DROPDOWN_ICON_CLASS = 'vvd-select-dropdown-icon';
|
|
|
30
30
|
MWCSelect.styles = [styleCoupling, mwcSelectStyles, vwcSelectStyle];
|
|
31
31
|
|
|
32
32
|
type SelectShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
33
|
+
type SelectLayout = Extract<Layout, Layout.Ghost | Layout.Outlined>;
|
|
33
34
|
|
|
34
35
|
/**
|
|
35
36
|
* This component is an extension of [<mwc-select>](https://github.com/material-components/material-components-web-components/tree/master/packages/select)
|
|
@@ -48,8 +49,9 @@ export class VWCSelect extends MWCSelect {
|
|
|
48
49
|
@property({ type: String, reflect: true })
|
|
49
50
|
name: string | undefined;
|
|
50
51
|
|
|
51
|
-
@property({ type:
|
|
52
|
-
|
|
52
|
+
@property({ type: String, reflect: true })
|
|
53
|
+
appearance?: SelectLayout;
|
|
54
|
+
|
|
53
55
|
|
|
54
56
|
override connectedCallback(): void {
|
|
55
57
|
super.connectedCallback();
|
|
@@ -67,7 +69,7 @@ export class VWCSelect extends MWCSelect {
|
|
|
67
69
|
|
|
68
70
|
protected override update(changedProperties: PropertyValues): void {
|
|
69
71
|
super.update(changedProperties);
|
|
70
|
-
if (this.shape === 'pill' || this.ghost) {
|
|
72
|
+
if (this.shape === 'pill' || this.appearance === 'ghost') {
|
|
71
73
|
this.dense = true;
|
|
72
74
|
}
|
|
73
75
|
}
|
package/vwc-select.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `:host{--mdc-shape-medium: 6px;--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host{--mdc-select-fill-color: var(--vvd-color-canvas);--mdc-select-ink-color: var(--vvd-color-on-canvas);--mdc-select-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-select-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-select-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-select-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-focused-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-disabled-dropdown-icon-color: var( --mdc-select-disabled-ink-color );--mdc-select-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-select-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-select-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-select-error-color: var(--vvd-formfield-label-error-ink);--mdc-select-error-fill-color: var(--vvd-formfield-error-fill);--mdc-select-error-dropdown-icon-color: var(--mdc-select-error-color);--mdc-shape-small: var(--border-radius);--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);display:inline-flex;flex-direction:column;font-stretch:var(--mdc-typography-subtitle1-font-stretch);--vvd-select-size-block:48px}:host .mdc-select__selected-text{padding:22px 0 6px}:host .vvd-select-dropdown-icon,:host .vvd-select-icon{--icon-size: 20px;display:inline-flex;align-self:center;margin:0 16px;color:var(--mdc-select-label-ink-color)}:host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) .mdc-floating-label{color:var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select{background-color:var(--mdc-select-disabled-fill-color)}:host([disabled]) .mdc-select vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-disabled-border-color )}:host([disabled]) .mdc-select .mdc-select__selected-text{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .vvd-select-icon{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .mdc-notched-outline .mdc-floating-label--float-above{--mdc-theme-primary: var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select .vvd-select-dropdown-icon{color:var(--mdc-select-disabled-dropdown-icon-color)}:host([dense]){--vvd-select-size-block:40px}:host([dense]) .mdc-select__selected-text{padding:0}:host([dense]) .mdc-select .mdc-floating-label{--mdc-select-label-ink-color: var(--vvd-color-on-canvas);--mdc-select-error-color: var(--vvd-color-on-canvas);top:-24px;left:-12px;transform:none}:host([dense]) .mdc-select:not(.mdc-select--no-label){margin-top:24px}.mdc-select{border-radius:var(--mdc-shape-small)}.mdc-select .vvd-select-dropdown-icon{transition:transform 200ms}.mdc-select.mdc-select--activated .vvd-select-dropdown-icon{transform:rotateX(180deg)}.mdc-select--outlined{background-color:var(--mdc-select-fill-color)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:calc(20px + 16px * 2 - 12px)}.mdc-select--outlined .mdc-select__anchor{height:var(--vvd-select-size-block);padding-inline-start:16px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:transform .15s,font-size .15s}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{color:var(--mdc-select-label-ink-color);font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-100%)}@media screen and (prefers-reduced-motion: reduce){.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:none}}.mdc-select--invalid.mdc-select--outlined{background-color:var(--mdc-select-error-fill-color)}.mdc-select--invalid.mdc-select--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-select-error-color)}.mdc-select--invalid.mdc-select--outlined .mdc-floating-label{color:var(--mdc-select-error-color)}@media screen and (prefers-reduced-motion: reduce){.mdc-select .vvd-select-dropdown-icon{transition:none}}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-idle-border-color )}:host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,:host(:not([disabled]):hover) .mdc-select:not(.mdc-select--invalid):not(.mdc-select--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--mdc-shape-small:6px}:host([shape=pill i]){--mdc-shape-small:24px}:host([ghost][dense]) .mdc-select .mdc-floating-label{left:0}:host([ghost][dense]) vwc-notched-outline{--mdc-notched-outline-stroke-width: 0}:host([ghost][dense]) .mdc-select__anchor{display:block}`;
|
|
2
|
+
export const style = css `:host{--mdc-shape-medium: 6px;--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host{--mdc-select-fill-color: var(--vvd-color-canvas);--mdc-select-ink-color: var(--vvd-color-on-canvas);--mdc-select-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-select-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-select-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-select-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-focused-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-disabled-dropdown-icon-color: var( --mdc-select-disabled-ink-color );--mdc-select-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-select-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-select-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-select-error-color: var(--vvd-formfield-label-error-ink);--mdc-select-error-fill-color: var(--vvd-formfield-error-fill);--mdc-select-error-dropdown-icon-color: var(--mdc-select-error-color);--mdc-shape-small: var(--border-radius);--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);display:inline-flex;flex-direction:column;font-stretch:var(--mdc-typography-subtitle1-font-stretch);--vvd-select-size-block:48px}:host .mdc-select__selected-text{padding:22px 0 6px}:host .vvd-select-dropdown-icon,:host .vvd-select-icon{--icon-size: 20px;display:inline-flex;align-self:center;margin:0 16px;color:var(--mdc-select-label-ink-color)}:host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) .mdc-floating-label{color:var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select{background-color:var(--mdc-select-disabled-fill-color)}:host([disabled]) .mdc-select vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-disabled-border-color )}:host([disabled]) .mdc-select .mdc-select__selected-text{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .vvd-select-icon{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .mdc-notched-outline .mdc-floating-label--float-above{--mdc-theme-primary: var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select .vvd-select-dropdown-icon{color:var(--mdc-select-disabled-dropdown-icon-color)}:host([dense]){--vvd-select-size-block:40px}:host([dense]) .mdc-select__selected-text{padding:0}:host([dense]) .mdc-select .mdc-floating-label{--mdc-select-label-ink-color: var(--vvd-color-on-canvas);--mdc-select-error-color: var(--vvd-color-on-canvas);top:-24px;left:-12px;transform:none}:host([dense]) .mdc-select:not(.mdc-select--no-label){margin-top:24px}.mdc-select{border-radius:var(--mdc-shape-small)}.mdc-select .vvd-select-dropdown-icon{transition:transform 200ms}.mdc-select.mdc-select--activated .vvd-select-dropdown-icon{transform:rotateX(180deg)}.mdc-select--outlined{background-color:var(--mdc-select-fill-color)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:calc(20px + 16px * 2 - 12px)}.mdc-select--outlined .mdc-select__anchor{height:var(--vvd-select-size-block);padding-inline-start:16px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:transform .15s,font-size .15s}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{color:var(--mdc-select-label-ink-color);font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-100%)}@media screen and (prefers-reduced-motion: reduce){.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:none}}.mdc-select--invalid.mdc-select--outlined{background-color:var(--mdc-select-error-fill-color)}.mdc-select--invalid.mdc-select--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-select-error-color)}.mdc-select--invalid.mdc-select--outlined .mdc-floating-label{color:var(--mdc-select-error-color)}@media screen and (prefers-reduced-motion: reduce){.mdc-select .vvd-select-dropdown-icon{transition:none}}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-idle-border-color )}:host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,:host(:not([disabled]):hover) .mdc-select:not(.mdc-select--invalid):not(.mdc-select--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--mdc-shape-small:6px}:host([shape=pill i]){--mdc-shape-small:24px}:host([appearance=ghost i][dense]) .mdc-select .mdc-floating-label{left:0}:host([appearance=ghost i][dense]) vwc-notched-outline{--mdc-notched-outline-stroke-width: 0}:host([appearance=ghost i][dense]) .mdc-select__anchor{display:block}`;
|
|
3
3
|
//# sourceMappingURL=vwc-select.css.js.map
|
package/vwc-select.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-select.css.js","sourceRoot":"","sources":["src/vwc-select.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-select.css.js","sourceRoot":"","sources":["src/vwc-select.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,8uRAA8uR,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{--mdc-shape-medium: 6px;--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host{--mdc-select-fill-color: var(--vvd-color-canvas);--mdc-select-ink-color: var(--vvd-color-on-canvas);--mdc-select-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-select-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-select-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-select-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-focused-dropdown-icon-color: var(--mdc-select-ink-color);--mdc-select-disabled-dropdown-icon-color: var( --mdc-select-disabled-ink-color );--mdc-select-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-select-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-select-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-select-error-color: var(--vvd-formfield-label-error-ink);--mdc-select-error-fill-color: var(--vvd-formfield-error-fill);--mdc-select-error-dropdown-icon-color: var(--mdc-select-error-color);--mdc-shape-small: var(--border-radius);--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);display:inline-flex;flex-direction:column;font-stretch:var(--mdc-typography-subtitle1-font-stretch);--vvd-select-size-block:48px}:host .mdc-select__selected-text{padding:22px 0 6px}:host .vvd-select-dropdown-icon,:host .vvd-select-icon{--icon-size: 20px;display:inline-flex;align-self:center;margin:0 16px;color:var(--mdc-select-label-ink-color)}:host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) .mdc-floating-label{color:var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select{background-color:var(--mdc-select-disabled-fill-color)}:host([disabled]) .mdc-select vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-disabled-border-color )}:host([disabled]) .mdc-select .mdc-select__selected-text{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .vvd-select-icon{color:var(--mdc-select-disabled-ink-color)}:host([disabled]) .mdc-select .mdc-notched-outline .mdc-floating-label--float-above{--mdc-theme-primary: var(--mdc-select-label-ink-color)}:host([disabled]) .mdc-select .vvd-select-dropdown-icon{color:var(--mdc-select-disabled-dropdown-icon-color)}:host([dense]){--vvd-select-size-block:40px}:host([dense]) .mdc-select__selected-text{padding:0}:host([dense]) .mdc-select .mdc-floating-label{--mdc-select-label-ink-color: var(--vvd-color-on-canvas);--mdc-select-error-color: var(--vvd-color-on-canvas);top:-24px;left:-12px;transform:none}:host([dense]) .mdc-select:not(.mdc-select--no-label){margin-top:24px}.mdc-select{border-radius:var(--mdc-shape-small)}.mdc-select .vvd-select-dropdown-icon{transition:transform 200ms}.mdc-select.mdc-select--activated .vvd-select-dropdown-icon{transform:rotateX(180deg)}.mdc-select--outlined{background-color:var(--mdc-select-fill-color)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:calc(20px + 16px * 2 - 12px)}.mdc-select--outlined .mdc-select__anchor{height:var(--vvd-select-size-block);padding-inline-start:16px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:transform .15s,font-size .15s}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{color:var(--mdc-select-label-ink-color);font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-100%)}@media screen and (prefers-reduced-motion: reduce){.mdc-select--outlined .mdc-select__anchor .mdc-floating-label{padding-right:8px;line-height:var(--mdc-typography-subtitle1-line-height);transition:none}}.mdc-select--invalid.mdc-select--outlined{background-color:var(--mdc-select-error-fill-color)}.mdc-select--invalid.mdc-select--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-select-error-color)}.mdc-select--invalid.mdc-select--outlined .mdc-floating-label{color:var(--mdc-select-error-color)}@media screen and (prefers-reduced-motion: reduce){.mdc-select .vvd-select-dropdown-icon{transition:none}}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-idle-border-color )}:host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,:host(:not([disabled]):hover) .mdc-select:not(.mdc-select--invalid):not(.mdc-select--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-select-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--mdc-shape-small:6px}:host([shape=pill i]){--mdc-shape-small:24px}:host([appearance=ghost i][dense]) .mdc-select .mdc-floating-label{left:0}:host([appearance=ghost i][dense]) vwc-notched-outline{--mdc-notched-outline-stroke-width: 0}:host([appearance=ghost i][dense]) .mdc-select__anchor{display:block}`;"]}
|
package/vwc-select.d.ts
CHANGED
|
@@ -5,19 +5,20 @@ import '@vonage/vwc-notched-outline';
|
|
|
5
5
|
import { TemplateResult } from 'lit-element';
|
|
6
6
|
import type { PropertyValues } from 'lit-element';
|
|
7
7
|
import { Select as MWCSelect } from '@material/mwc-select';
|
|
8
|
-
import type { Shape } from '@vonage/vvd-foundation/constants.js';
|
|
8
|
+
import type { Shape, Layout } from '@vonage/vvd-foundation/constants.js';
|
|
9
9
|
declare global {
|
|
10
10
|
interface HTMLElementTagNameMap {
|
|
11
11
|
'vwc-select': VWCSelect;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
declare type SelectShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
15
|
+
declare type SelectLayout = Extract<Layout, Layout.Ghost | Layout.Outlined>;
|
|
15
16
|
export declare class VWCSelect extends MWCSelect {
|
|
16
17
|
dense: boolean;
|
|
17
18
|
shape?: SelectShape;
|
|
18
19
|
form: string | undefined;
|
|
19
20
|
name: string | undefined;
|
|
20
|
-
|
|
21
|
+
appearance?: SelectLayout;
|
|
21
22
|
connectedCallback(): void;
|
|
22
23
|
firstUpdated(): Promise<void>;
|
|
23
24
|
protected update(changedProperties: PropertyValues): void;
|
package/vwc-select.js
CHANGED
|
@@ -16,7 +16,6 @@ let VWCSelect = class VWCSelect extends MWCSelect {
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.dense = false;
|
|
19
|
-
this.ghost = false;
|
|
20
19
|
}
|
|
21
20
|
connectedCallback() {
|
|
22
21
|
super.connectedCallback();
|
|
@@ -32,7 +31,7 @@ let VWCSelect = class VWCSelect extends MWCSelect {
|
|
|
32
31
|
}
|
|
33
32
|
update(changedProperties) {
|
|
34
33
|
super.update(changedProperties);
|
|
35
|
-
if (this.shape === 'pill' || this.ghost) {
|
|
34
|
+
if (this.shape === 'pill' || this.appearance === 'ghost') {
|
|
36
35
|
this.dense = true;
|
|
37
36
|
}
|
|
38
37
|
}
|
|
@@ -94,8 +93,8 @@ __decorate([
|
|
|
94
93
|
property({ type: String, reflect: true })
|
|
95
94
|
], VWCSelect.prototype, "name", void 0);
|
|
96
95
|
__decorate([
|
|
97
|
-
property({ type:
|
|
98
|
-
], VWCSelect.prototype, "
|
|
96
|
+
property({ type: String, reflect: true })
|
|
97
|
+
], VWCSelect.prototype, "appearance", void 0);
|
|
99
98
|
VWCSelect = __decorate([
|
|
100
99
|
customElement('vwc-select')
|
|
101
100
|
], VWCSelect);
|
package/vwc-select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-select.js","sourceRoot":"","sources":["src/vwc-select.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,EACN,aAAa,EACb,QAAQ,EACR,IAAI,EAEJ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,oDAAoD,CAAC;AAC5F,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAE/E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAQ1E,MAAM,mBAAmB,GAAG,0BAA0B,CAAC;AAIvD,SAAS,CAAC,MAAM,GAAG,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"vwc-select.js","sourceRoot":"","sources":["src/vwc-select.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport '@vonage/vwc-helper-message';\nimport '@vonage/vwc-icon';\nimport '@vonage/vwc-notched-outline';\nimport {\n\tcustomElement,\n\tproperty,\n\thtml,\n\tTemplateResult\n} from 'lit-element';\nimport type { PropertyValues } from 'lit-element';\nimport { Select as MWCSelect } from '@material/mwc-select';\nimport { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';\nimport { style as vwcSelectStyle } from './vwc-select.css.js';\nimport { styles as mwcSelectStyles } from '@material/mwc-select/mwc-select.css.js';\nimport { associateWithForm } from '@vonage/vvd-foundation/form-association.js';\nimport type { Shape, Layout } from '@vonage/vvd-foundation/constants.js';\nimport { handleAutofocus } from '@vonage/vvd-foundation/general-utils.js';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-select': VWCSelect;\n\t}\n}\n\nconst DROPDOWN_ICON_CLASS = 'vvd-select-dropdown-icon';\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nMWCSelect.styles = [styleCoupling, mwcSelectStyles, vwcSelectStyle];\n\ntype SelectShape = Extract<Shape, Shape.Rounded | Shape.Pill>;\ntype SelectLayout = Extract<Layout, Layout.Ghost | Layout.Outlined>;\n\n/**\n * This component is an extension of [<mwc-select>](https://github.com/material-components/material-components-web-components/tree/master/packages/select)\n */\n@customElement('vwc-select')\nexport class VWCSelect extends MWCSelect {\n\t@property({ type: Boolean, reflect: true })\n\t\tdense = false;\n\n\t@property({ type: String, reflect: true })\n\t\tshape?: SelectShape;\n\n\t@property({ type: String, reflect: true })\n\t\tform: string | undefined;\n\n\t@property({ type: String, reflect: true })\n\t\tname: string | undefined;\n\n\t@property({ type: String, reflect: true })\n\t\tappearance?: SelectLayout;\n\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tif (!this.hasAttribute('outlined')) {\n\t\t\tthis.outlined = true;\n\t\t}\n\t}\n\n\toverride async firstUpdated(): Promise<void> {\n\t\tawait super.firstUpdated();\n\t\tthis.replaceDropDownIcon();\n\t\tassociateWithForm(this, this.formElement);\n\t\thandleAutofocus(this);\n\t}\n\n\tprotected override update(changedProperties: PropertyValues): void {\n\t\tsuper.update(changedProperties);\n\t\tif (this.shape === 'pill' || this.appearance === 'ghost') {\n\t\t\tthis.dense = true;\n\t\t}\n\t}\n\n\tprotected override updated(changedProperties: PropertyValues): void {\n\t\tsuper.updated(changedProperties);\n\t\tconst selectedText = this.shadowRoot?.querySelector(\n\t\t\t'.mdc-select__selected-text'\n\t\t);\n\t\tif (selectedText) {\n\t\t\tselectedText.setAttribute('aria-label', 'current selection');\n\t\t\tselectedText.setAttribute('role', 'textbox');\n\t\t}\n\t}\n\n\tprotected override renderHelperText(): TemplateResult | string {\n\t\tif (!this.shouldRenderHelperText) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst isError = this.validationMessage && !this.isUiValid;\n\t\tconst text = isError ? this.validationMessage : this.helper;\n\n\t\treturn html`<vwc-helper-message\n\t\t\tid=\"helper-text\"\n\t\t\tclass=\"helper-message\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t?is-error=\"${isError}\"\n\t\t\t>${text}</vwc-helper-message\n\t\t>`;\n\t}\n\n\tprotected override renderLeadingIcon(): TemplateResult | string {\n\t\tif (!this.icon) {\n\t\t\treturn '';\n\t\t}\n\t\treturn html`<vwc-icon class=\"vvd-select-icon\" type=\"${this.icon}\"></vwc-icon>`;\n\t}\n\n\tprotected override renderOutline(): TemplateResult | Record<string, unknown> {\n\t\tif (!this.outlined) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn html`<vwc-notched-outline class=\"mdc-notched-outline vvd-notch\">\n\t\t\t${this.renderLabel()}\n\t\t</vwc-notched-outline>`;\n\t}\n\n\tprivate replaceDropDownIcon(): void {\n\t\tconst chevronIcon = document.createElement('vwc-icon');\n\t\tchevronIcon.classList.add(DROPDOWN_ICON_CLASS);\n\t\tchevronIcon.setAttribute('type', 'down');\n\t\tthis.shadowRoot?.querySelector('.mdc-select__dropdown-icon')?.replaceWith(chevronIcon);\n\t}\n}\n"]}
|