@proximus/lavender-icon-common 1.4.17-alpha.6 → 1.4.17-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Icon.d.ts +1 -0
- package/dist/custom-elements.json +7 -9
- package/dist/index.es.js +26 -24
- package/dist/web-types.json +2 -3
- package/package.json +1 -1
package/dist/Icon.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
|
2
2
|
export declare const styleSheet: CSSStyleSheet;
|
|
3
3
|
export declare class Icon extends WithExtraAttributes {
|
|
4
4
|
#private;
|
|
5
|
+
protected static readonly template: HTMLTemplateElement;
|
|
5
6
|
static get observedAttributes(): string[];
|
|
6
7
|
constructor(...styleSheets: CSSStyleSheet[]);
|
|
7
8
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
@@ -16,6 +16,13 @@
|
|
|
16
16
|
"description": "",
|
|
17
17
|
"name": "Icon",
|
|
18
18
|
"members": [
|
|
19
|
+
{
|
|
20
|
+
"kind": "field",
|
|
21
|
+
"name": "template",
|
|
22
|
+
"privacy": "protected",
|
|
23
|
+
"static": true,
|
|
24
|
+
"readonly": true
|
|
25
|
+
},
|
|
19
26
|
{
|
|
20
27
|
"kind": "field",
|
|
21
28
|
"name": "#src",
|
|
@@ -34,11 +41,6 @@
|
|
|
34
41
|
},
|
|
35
42
|
"readonly": true
|
|
36
43
|
},
|
|
37
|
-
{
|
|
38
|
-
"kind": "field",
|
|
39
|
-
"name": "#template",
|
|
40
|
-
"privacy": "private"
|
|
41
|
-
},
|
|
42
44
|
{
|
|
43
45
|
"kind": "method",
|
|
44
46
|
"name": "updateAttribute",
|
|
@@ -119,10 +121,6 @@
|
|
|
119
121
|
{
|
|
120
122
|
"kind": "field",
|
|
121
123
|
"name": "disabled"
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
"kind": "field",
|
|
125
|
-
"name": "innerHTML"
|
|
126
124
|
}
|
|
127
125
|
],
|
|
128
126
|
"attributes": [
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t,
|
|
1
|
+
import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t, createTemplate as n, iconSizeValuesKC as r, log as i, propertyToAttributeSetter as a, renderTemplate as o } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/IconSet.ts
|
|
3
|
-
var
|
|
3
|
+
var s = class extends HTMLElement {
|
|
4
4
|
constructor() {
|
|
5
5
|
super();
|
|
6
6
|
}
|
|
@@ -34,10 +34,10 @@ var a = class extends HTMLElement {
|
|
|
34
34
|
e && e.remove();
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
37
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", s);
|
|
38
38
|
//#endregion
|
|
39
39
|
//#region src/attributeValues.ts
|
|
40
|
-
var
|
|
40
|
+
var c = [
|
|
41
41
|
"Brand",
|
|
42
42
|
"Accent",
|
|
43
43
|
"Neutral",
|
|
@@ -50,12 +50,14 @@ var o = [
|
|
|
50
50
|
"StateHover",
|
|
51
51
|
"StateActive",
|
|
52
52
|
"StateDisabled"
|
|
53
|
-
],
|
|
54
|
-
|
|
55
|
-
var
|
|
53
|
+
], l = ["Inherit", ...c].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), u = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", d = new CSSStyleSheet();
|
|
54
|
+
d.replaceSync(u);
|
|
55
|
+
var f = class s extends e {
|
|
56
|
+
static {
|
|
57
|
+
this.template = n("<svg aria-hidden=\"true\"><use></use></svg>");
|
|
58
|
+
}
|
|
56
59
|
#e = null;
|
|
57
60
|
#t;
|
|
58
|
-
#n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
|
|
59
61
|
static get observedAttributes() {
|
|
60
62
|
return [
|
|
61
63
|
...super.observedAttributes,
|
|
@@ -69,25 +71,25 @@ var u = class extends e {
|
|
|
69
71
|
];
|
|
70
72
|
}
|
|
71
73
|
constructor(...e) {
|
|
72
|
-
super(...e,
|
|
74
|
+
super(...e, d), o(this.shadowRoot, s.template), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
|
|
73
75
|
}
|
|
74
|
-
attributeChangedCallback(e, t,
|
|
75
|
-
if (t !==
|
|
76
|
+
attributeChangedCallback(e, t, n) {
|
|
77
|
+
if (t !== n) switch (e) {
|
|
76
78
|
case "name":
|
|
77
|
-
this.updateName(t,
|
|
79
|
+
this.updateName(t, n);
|
|
78
80
|
break;
|
|
79
81
|
case "size":
|
|
80
|
-
this.updateAttribute(e, t,
|
|
82
|
+
this.updateAttribute(e, t, n, r);
|
|
81
83
|
break;
|
|
82
84
|
case "color":
|
|
83
|
-
this.updateAttribute(e, t,
|
|
85
|
+
this.updateAttribute(e, t, n, l);
|
|
84
86
|
break;
|
|
85
87
|
case "disabled":
|
|
86
88
|
this.color = "state-disabled";
|
|
87
89
|
break;
|
|
88
90
|
case "aria-label":
|
|
89
91
|
if (!this.#t) return;
|
|
90
|
-
|
|
92
|
+
n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
|
|
91
93
|
}
|
|
92
94
|
}
|
|
93
95
|
connectedCallback() {
|
|
@@ -103,8 +105,8 @@ var u = class extends e {
|
|
|
103
105
|
}
|
|
104
106
|
!this.ariaLabel && this.#t && (this.#t.ariaHidden = "true", this.ariaHidden = "true"), this.parentElement?.localName === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
|
|
105
107
|
}
|
|
106
|
-
updateAttribute(e, t, n,
|
|
107
|
-
t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(
|
|
108
|
+
updateAttribute(e, t, n, r) {
|
|
109
|
+
t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || i(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
|
|
108
110
|
}
|
|
109
111
|
updateName(e, t) {
|
|
110
112
|
this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
|
|
@@ -116,25 +118,25 @@ var u = class extends e {
|
|
|
116
118
|
return this.getAttribute("name");
|
|
117
119
|
}
|
|
118
120
|
set name(e) {
|
|
119
|
-
|
|
121
|
+
a(this, "name", e);
|
|
120
122
|
}
|
|
121
123
|
get size() {
|
|
122
124
|
return this.getAttribute("size");
|
|
123
125
|
}
|
|
124
126
|
set size(e) {
|
|
125
|
-
|
|
127
|
+
a(this, "size", e);
|
|
126
128
|
}
|
|
127
129
|
get color() {
|
|
128
130
|
return this.getAttribute("color");
|
|
129
131
|
}
|
|
130
132
|
set color(e) {
|
|
131
|
-
|
|
133
|
+
a(this, "color", e);
|
|
132
134
|
}
|
|
133
135
|
get arialabel() {
|
|
134
136
|
return this.getAttribute("aria-label");
|
|
135
137
|
}
|
|
136
138
|
set arialabel(e) {
|
|
137
|
-
|
|
139
|
+
a(this, "aria-label", e);
|
|
138
140
|
}
|
|
139
141
|
get inverted() {
|
|
140
142
|
return this.hasAttribute("inverted");
|
|
@@ -146,7 +148,7 @@ var u = class extends e {
|
|
|
146
148
|
return this.getAttribute("from");
|
|
147
149
|
}
|
|
148
150
|
set from(e) {
|
|
149
|
-
|
|
151
|
+
a(this, "from", e);
|
|
150
152
|
}
|
|
151
153
|
get disabled() {
|
|
152
154
|
return this.hasAttribute("disabled");
|
|
@@ -155,6 +157,6 @@ var u = class extends e {
|
|
|
155
157
|
t(this, "disabled", e);
|
|
156
158
|
}
|
|
157
159
|
};
|
|
158
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
160
|
+
customElements.get("px-icon") || customElements.define("px-icon", f);
|
|
159
161
|
//#endregion
|
|
160
|
-
export {
|
|
162
|
+
export { f as Icon, s as IconSet, c as iconColorValues, l as iconColorValuesKC, d as styleSheet };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-icon-common",
|
|
4
|
-
"version": "1.4.17-alpha.
|
|
4
|
+
"version": "1.4.17-alpha.8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -29,8 +29,7 @@
|
|
|
29
29
|
{ "name": "arialabel" },
|
|
30
30
|
{ "name": "inverted" },
|
|
31
31
|
{ "name": "from" },
|
|
32
|
-
{ "name": "disabled" }
|
|
33
|
-
{ "name": "innerHTML" }
|
|
32
|
+
{ "name": "disabled" }
|
|
34
33
|
],
|
|
35
34
|
"events": []
|
|
36
35
|
}
|