@proximus/lavender-button-icon 2.0.0-alpha.100 → 2.0.0-alpha.102
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 +13 -13
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { PxElement as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { PxElement as c, accessibilityAttributes as l, log as a } from "@proximus/lavender-common";
|
|
2
|
+
const b = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (min-width: 64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", d = new CSSStyleSheet();
|
|
3
|
+
d.replaceSync(b);
|
|
4
|
+
const n = ["", "default", "small"], s = [
|
|
5
5
|
"",
|
|
6
6
|
"default",
|
|
7
7
|
"secondary",
|
|
8
8
|
"naked"
|
|
9
|
-
], o = class o extends
|
|
9
|
+
], o = class o extends c {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(
|
|
11
|
+
super(d), this.template = () => "<slot></slot>";
|
|
12
12
|
const t = document.createElement(o.nativeName);
|
|
13
13
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
14
14
|
}
|
|
15
15
|
static get observedAttributes() {
|
|
16
16
|
return [
|
|
17
17
|
...super.observedAttributes,
|
|
18
|
-
...
|
|
18
|
+
...l,
|
|
19
19
|
"inverted",
|
|
20
20
|
"loading",
|
|
21
21
|
"size",
|
|
@@ -59,13 +59,13 @@ const l = ["", "default", "small"], b = [
|
|
|
59
59
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
60
60
|
}
|
|
61
61
|
updateSize(t, e) {
|
|
62
|
-
this.checkName(
|
|
63
|
-
|
|
62
|
+
this.checkName(n, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : a(
|
|
63
|
+
`"${e}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join('", "')}".`
|
|
64
64
|
);
|
|
65
65
|
}
|
|
66
66
|
updateVariant(t, e) {
|
|
67
|
-
this.checkName(
|
|
68
|
-
|
|
67
|
+
this.checkName(s, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : a(
|
|
68
|
+
`"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${s.join('", "')}".`
|
|
69
69
|
);
|
|
70
70
|
}
|
|
71
71
|
get inverted() {
|
|
@@ -104,6 +104,6 @@ let r = o;
|
|
|
104
104
|
customElements.get("px-button-icon") || customElements.define("px-button-icon", r);
|
|
105
105
|
export {
|
|
106
106
|
r as ButtonIcon,
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
n as buttonIconSizeValues,
|
|
108
|
+
s as buttonIconVariantValues
|
|
109
109
|
};
|