@proximus/lavender-color-option 1.4.9-beta.2 → 1.4.9
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 +14 -14
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { PxElement as
|
|
2
|
-
const u = ':host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option{display:inline-block;width:32px;height:32px!important;border-radius:var(--px-radius-pill);background-color:var(--color-option-device-color);border:var(--px-size-border-m) var(--px-color-border-main-default) solid}.color-option[unavailable]{position:relative}.color-option[unavailable]:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:44px;height:var(--px-size-border-m);background-color:var(--px-color-border-neutral-default)}.color-option--size-small{width:16px;height:16px!important;border-width:var(--px-size-border-s)}.color-option--size-small[unavailable]:before{width:22px;height:var(--px-size-border-s)}',
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { PxElement as a, checkName as p, log as b } from "@proximus/lavender-common";
|
|
2
|
+
const u = ':host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option{display:inline-block;width:32px;height:32px!important;border-radius:var(--px-radius-pill);background-color:var(--color-option-device-color);border:var(--px-size-border-m) var(--px-color-border-main-default) solid}.color-option[unavailable]{position:relative}.color-option[unavailable]:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:44px;height:var(--px-size-border-m);background-color:var(--px-color-border-neutral-default)}.color-option--size-small{width:16px;height:16px!important;border-width:var(--px-size-border-s)}.color-option--size-small[unavailable]:before{width:22px;height:var(--px-size-border-s)}', n = new CSSStyleSheet();
|
|
3
|
+
n.replaceSync(u);
|
|
4
|
+
const h = ["", "default", "small"], l = class l extends a {
|
|
5
5
|
template() {
|
|
6
6
|
return `
|
|
7
7
|
<slot></slot>
|
|
8
8
|
`;
|
|
9
9
|
}
|
|
10
10
|
constructor() {
|
|
11
|
-
super(
|
|
11
|
+
super(n);
|
|
12
12
|
const e = document.createElement("div");
|
|
13
13
|
e.classList.add("color-option"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
14
14
|
}
|
|
@@ -19,7 +19,7 @@ const v = ["", "default", "small"], l = class l extends n {
|
|
|
19
19
|
if (o !== t)
|
|
20
20
|
switch (e) {
|
|
21
21
|
case "size":
|
|
22
|
-
this.updateSize(e, o, t,
|
|
22
|
+
this.updateSize(e, o, t, h);
|
|
23
23
|
break;
|
|
24
24
|
case "device-color":
|
|
25
25
|
this.updateDeviceColor(e, o, t);
|
|
@@ -32,10 +32,10 @@ const v = ["", "default", "small"], l = class l extends n {
|
|
|
32
32
|
break;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
updateSize(e, o, t,
|
|
36
|
-
if (!p(
|
|
35
|
+
updateSize(e, o, t, d) {
|
|
36
|
+
if (!p(d, t)) {
|
|
37
37
|
b(
|
|
38
|
-
|
|
38
|
+
`${t} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
39
39
|
);
|
|
40
40
|
return;
|
|
41
41
|
}
|
|
@@ -66,16 +66,16 @@ const v = ["", "default", "small"], l = class l extends n {
|
|
|
66
66
|
l.nativeName = "div";
|
|
67
67
|
let r = l;
|
|
68
68
|
customElements.get("px-color-option") || customElements.define("px-color-option", r);
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
const f = "px.lavender.color-option-link.click", i = class i extends
|
|
69
|
+
const v = ":host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option-link{display:inline-block;text-decoration:none;padding:var(--px-padding-2xs-mobile);border-radius:var(--px-radius-pill);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.color-option-link[selected]{box-shadow:inset 0 0 0 var(--px-size-border-m) var(--px-color-border-brand-default)}.color-option-link:hover{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-neutral-default)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (min-width: 48em){.color-option-link{padding:var(--px-padding-2xs-tablet)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.color-option-link{padding:var(--px-padding-2xs-laptop)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.color-option-link{padding:var(--px-padding-2xs-desktop)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", c = new CSSStyleSheet();
|
|
70
|
+
c.replaceSync(v);
|
|
71
|
+
const f = "px.lavender.color-option-link.click", i = class i extends a {
|
|
72
72
|
template() {
|
|
73
73
|
return `
|
|
74
74
|
<px-color-option><slot></slot></px-color-option>
|
|
75
75
|
`;
|
|
76
76
|
}
|
|
77
77
|
constructor() {
|
|
78
|
-
super(
|
|
78
|
+
super(c);
|
|
79
79
|
const e = document.createElement(i.nativeName);
|
|
80
80
|
e.classList.add("color-option-link"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
81
81
|
}
|
|
@@ -145,5 +145,5 @@ customElements.get("px-color-option-link") || customElements.define("px-color-op
|
|
|
145
145
|
export {
|
|
146
146
|
r as ColorOption,
|
|
147
147
|
s as ColorOptionLink,
|
|
148
|
-
|
|
148
|
+
h as colorOptionSizeValues
|
|
149
149
|
};
|