@umbraco-ui/uui-color-swatches 1.4.0 → 1.5.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +18 -5
- package/lib/index.js +10 -2
- package/lib/uui-color-swatches.element.d.ts +8 -1
- package/package.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -12,6 +12,12 @@
|
|
|
12
12
|
"type": "string",
|
|
13
13
|
"default": "\"\""
|
|
14
14
|
},
|
|
15
|
+
{
|
|
16
|
+
"name": "disabled",
|
|
17
|
+
"description": "Disables the color swatches.",
|
|
18
|
+
"type": "boolean",
|
|
19
|
+
"default": "\"false\""
|
|
20
|
+
},
|
|
15
21
|
{
|
|
16
22
|
"name": "label",
|
|
17
23
|
"description": "Label to be used for aria-label and potentially as visual label for some components",
|
|
@@ -19,11 +25,6 @@
|
|
|
19
25
|
}
|
|
20
26
|
],
|
|
21
27
|
"properties": [
|
|
22
|
-
{
|
|
23
|
-
"name": "styles",
|
|
24
|
-
"type": "CSSResult[]",
|
|
25
|
-
"default": "[null]"
|
|
26
|
-
},
|
|
27
28
|
{
|
|
28
29
|
"name": "value",
|
|
29
30
|
"attribute": "value",
|
|
@@ -31,10 +32,22 @@
|
|
|
31
32
|
"type": "string",
|
|
32
33
|
"default": "\"\""
|
|
33
34
|
},
|
|
35
|
+
{
|
|
36
|
+
"name": "disabled",
|
|
37
|
+
"attribute": "disabled",
|
|
38
|
+
"description": "Disables the color swatches.",
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"default": "\"false\""
|
|
41
|
+
},
|
|
34
42
|
{
|
|
35
43
|
"name": "swatches",
|
|
36
44
|
"type": "UUIColorSwatchElement[]"
|
|
37
45
|
},
|
|
46
|
+
{
|
|
47
|
+
"name": "styles",
|
|
48
|
+
"type": "CSSResult[]",
|
|
49
|
+
"default": "[null]"
|
|
50
|
+
},
|
|
38
51
|
{
|
|
39
52
|
"name": "label",
|
|
40
53
|
"attribute": "label",
|
package/lib/index.js
CHANGED
|
@@ -42,6 +42,7 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
|
|
|
42
42
|
constructor() {
|
|
43
43
|
super();
|
|
44
44
|
this.value = "";
|
|
45
|
+
this.disabled = false;
|
|
45
46
|
this._onSelected = (event) => {
|
|
46
47
|
const target = event.target;
|
|
47
48
|
if (!this.swatches.includes(target))
|
|
@@ -103,9 +104,13 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
|
|
|
103
104
|
return;
|
|
104
105
|
this.swatches.forEach((swatch) => {
|
|
105
106
|
var _a;
|
|
106
|
-
swatch.setAttribute("selectable", "selectable");
|
|
107
107
|
swatch.setAttribute("aria-checked", "false");
|
|
108
108
|
swatch.setAttribute("role", "radio");
|
|
109
|
+
if (this.disabled) {
|
|
110
|
+
swatch.setAttribute("disabled", "");
|
|
111
|
+
} else {
|
|
112
|
+
swatch.setAttribute("selectable", "selectable");
|
|
113
|
+
}
|
|
109
114
|
if (this.value !== "" && ((_a = swatch.color) == null ? void 0 : _a.isEqual(this.value))) {
|
|
110
115
|
swatch.selected = true;
|
|
111
116
|
swatch.setAttribute("aria-checked", "true");
|
|
@@ -123,7 +128,7 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
|
|
|
123
128
|
this.swatches.forEach((swatch) => {
|
|
124
129
|
swatch.selected = false;
|
|
125
130
|
swatch.active = false;
|
|
126
|
-
swatch.selectable =
|
|
131
|
+
swatch.selectable = !swatch.disabled;
|
|
127
132
|
});
|
|
128
133
|
this._activeElement = void 0;
|
|
129
134
|
this._selectedElement = void 0;
|
|
@@ -145,6 +150,9 @@ UUIColorSwatchesElement.styles = [
|
|
|
145
150
|
__decorateClass([
|
|
146
151
|
property()
|
|
147
152
|
], UUIColorSwatchesElement.prototype, "value", 2);
|
|
153
|
+
__decorateClass([
|
|
154
|
+
property({ type: Boolean, reflect: true })
|
|
155
|
+
], UUIColorSwatchesElement.prototype, "disabled", 2);
|
|
148
156
|
__decorateClass([
|
|
149
157
|
queryAssignedElements({ selector: "uui-color-swatch" })
|
|
150
158
|
], UUIColorSwatchesElement.prototype, "swatches", 2);
|
|
@@ -8,13 +8,19 @@ declare const UUIColorSwatchesElement_base: (new (...args: any[]) => import("@um
|
|
|
8
8
|
* @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.
|
|
9
9
|
*/
|
|
10
10
|
export declare class UUIColorSwatchesElement extends UUIColorSwatchesElement_base {
|
|
11
|
-
static styles: import("lit").CSSResult[];
|
|
12
11
|
/**
|
|
13
12
|
* Value of selected option.
|
|
14
13
|
*
|
|
15
14
|
* @attr
|
|
16
15
|
*/
|
|
17
16
|
value: string;
|
|
17
|
+
/**
|
|
18
|
+
* Disables the color swatches.
|
|
19
|
+
* @type {boolean}
|
|
20
|
+
* @attr
|
|
21
|
+
* @default false
|
|
22
|
+
**/
|
|
23
|
+
disabled: boolean;
|
|
18
24
|
swatches: Array<UUIColorSwatchElement>;
|
|
19
25
|
private __activeElement;
|
|
20
26
|
private get _activeElement();
|
|
@@ -33,6 +39,7 @@ export declare class UUIColorSwatchesElement extends UUIColorSwatchesElement_bas
|
|
|
33
39
|
*/
|
|
34
40
|
resetSelection(): void;
|
|
35
41
|
render(): import("lit-html").TemplateResult<1>;
|
|
42
|
+
static styles: import("lit").CSSResult[];
|
|
36
43
|
}
|
|
37
44
|
declare global {
|
|
38
45
|
interface HTMLElementTagNameMap {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-color-swatches",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "1.
|
|
34
|
-
"@umbraco-ui/uui-color-swatch": "1.
|
|
33
|
+
"@umbraco-ui/uui-base": "1.5.0-rc.1",
|
|
34
|
+
"@umbraco-ui/uui-color-swatch": "1.5.0-rc.1"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
44
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatches",
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "2ff35a098ed8a3feb8ebed1bf43b4fbb75950d65"
|
|
46
46
|
}
|