@proximus/lavender-icon 1.2.0-alpha.49 → 1.2.0-alpha.51
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/index.es.js +8 -10
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { WithExtraAttributes as n } from "@proximus/lavender-common";
|
|
2
|
-
const c = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-brand-default);font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);font-style:unset;font-weight:var(--px-font-weight-body);-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-size-icon-s);height:var(--px-size-icon-s);color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.content-neutral-strong{color:var(--px-color-icon-neutral-default)}.content-neutral-weak{color:var(--px-color-icon-dimmed-default)}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-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)}.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)}:host([inverted]) i{color:var(--px-color-icon-brand-inverted)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-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)}: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)}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s
|
|
2
|
+
const c = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-brand-default);font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);font-style:unset;font-weight:var(--px-font-weight-body);-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-size-icon-s);height:var(--px-size-icon-s);color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.content-neutral-strong{color:var(--px-color-icon-neutral-default)}.content-neutral-weak{color:var(--px-color-icon-dimmed-default)}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-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)}.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)}:host([inverted]) i{color:var(--px-color-icon-brand-inverted)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-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)}: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)}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s{width:var(--px-size-icon-s);height:var(--px-size-icon-s);font-size:var(--px-size-icon-s)}.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s{width:var(--px-size-icon-s);height:var(--px-size-icon-s);font-size:var(--px-size-icon-s)}.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s{width:var(--px-size-icon-s);height:var(--px-size-icon-s);font-size:var(--px-size-icon-s)}.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}", a = ["xs", "s", "m", "l", "xl"], l = [
|
|
3
3
|
"",
|
|
4
4
|
"default",
|
|
5
5
|
"inherit",
|
|
@@ -14,7 +14,7 @@ const c = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;f
|
|
|
14
14
|
"purpose-error",
|
|
15
15
|
"purpose-unlimited",
|
|
16
16
|
"purpose-promo"
|
|
17
|
-
],
|
|
17
|
+
], p = [
|
|
18
18
|
"name",
|
|
19
19
|
"size",
|
|
20
20
|
"color",
|
|
@@ -23,9 +23,9 @@ const c = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;f
|
|
|
23
23
|
"from",
|
|
24
24
|
"disabled"
|
|
25
25
|
];
|
|
26
|
-
class
|
|
26
|
+
class d extends n {
|
|
27
27
|
static get observedAttributes() {
|
|
28
|
-
return [...super.observedAttributes, ...
|
|
28
|
+
return [...super.observedAttributes, ...p];
|
|
29
29
|
}
|
|
30
30
|
constructor(...e) {
|
|
31
31
|
var t;
|
|
@@ -59,9 +59,7 @@ class p extends n {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
updateAttribute(e, t, i, s) {
|
|
62
|
-
t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(
|
|
63
|
-
`${i} is not an allowed ${e} value for ${this.$el}`
|
|
64
|
-
);
|
|
62
|
+
t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(`${i} is not an allowed ${e} value`);
|
|
65
63
|
}
|
|
66
64
|
checkName(e, t) {
|
|
67
65
|
return e.includes(t);
|
|
@@ -111,7 +109,7 @@ class p extends n {
|
|
|
111
109
|
}
|
|
112
110
|
const r = new CSSStyleSheet();
|
|
113
111
|
r.replaceSync(c);
|
|
114
|
-
class h extends
|
|
112
|
+
class h extends d {
|
|
115
113
|
constructor() {
|
|
116
114
|
super(r), this.template = () => `<svg>
|
|
117
115
|
<use xlink:href="#icon-${this.name}"></use>
|
|
@@ -178,11 +176,11 @@ class u extends HTMLElement {
|
|
|
178
176
|
}
|
|
179
177
|
customElements.get("px-icon-set") || customElements.define("px-icon-set", u);
|
|
180
178
|
export {
|
|
181
|
-
|
|
179
|
+
d as Icon,
|
|
182
180
|
u as IconSet,
|
|
183
181
|
h as SVGIcon,
|
|
184
182
|
a as filteredIconSizeValues,
|
|
185
183
|
l as iconColorValues,
|
|
186
|
-
|
|
184
|
+
p as observedAttributes,
|
|
187
185
|
r as styleSheet
|
|
188
186
|
};
|