@proximus/lavender-span 2.0.0-alpha.6 → 2.0.0-alpha.61
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/Span.d.ts +6 -0
- package/dist/index.es.js +26 -21
- package/package.json +2 -2
package/dist/Span.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { PxElement } from '@proximus/lavender-common';
|
|
2
|
+
/**
|
|
3
|
+
* @summary A span component for styling text.
|
|
4
|
+
* @attr {string} title - Text to be displayed in a tooltip when hovering over the element.
|
|
5
|
+
*/
|
|
2
6
|
export declare class Span extends PxElement<HTMLSpanElement> {
|
|
3
7
|
static nativeName: string;
|
|
4
8
|
private template;
|
|
@@ -14,6 +18,8 @@ export declare class Span extends PxElement<HTMLSpanElement> {
|
|
|
14
18
|
set fontweight(value: string);
|
|
15
19
|
get inverted(): string;
|
|
16
20
|
set inverted(value: string);
|
|
21
|
+
get strikethrough(): string;
|
|
22
|
+
set strikethrough(value: string);
|
|
17
23
|
get disabled(): string;
|
|
18
24
|
set disabled(value: string);
|
|
19
25
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
import { PxElement as
|
|
2
|
-
const
|
|
3
|
-
r.replaceSync(h);
|
|
1
|
+
import { PxElement as d, fontweightValues as p, fontsizeValues as x, colorValues as h, log as f, isFalsy as i } from "@proximus/lavender-common";
|
|
2
|
+
const z = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media only screen and (min-width: 768px){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media only screen and (min-width: 1025px){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", c = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", n = new CSSStyleSheet(), a = new CSSStyleSheet();
|
|
4
3
|
n.replaceSync(z);
|
|
5
|
-
|
|
4
|
+
a.replaceSync(c);
|
|
5
|
+
const r = class r extends d {
|
|
6
6
|
constructor() {
|
|
7
|
-
super(
|
|
8
|
-
<slot name="before"></slot>
|
|
9
|
-
<slot></slot>
|
|
10
|
-
<slot name="after"></slot>
|
|
11
|
-
</span>`, this.shadowRoot.innerHTML = this.template();
|
|
7
|
+
super(n, a), this.template = () => "<span><slot></slot></span>", this.shadowRoot.innerHTML = this.template();
|
|
12
8
|
}
|
|
13
9
|
static get observedAttributes() {
|
|
14
10
|
return [
|
|
@@ -17,20 +13,21 @@ const s = class s extends l {
|
|
|
17
13
|
"font-size",
|
|
18
14
|
"font-weight",
|
|
19
15
|
"inverted",
|
|
20
|
-
"disabled"
|
|
16
|
+
"disabled",
|
|
17
|
+
"strikethrough"
|
|
21
18
|
];
|
|
22
19
|
}
|
|
23
20
|
attributeChangedCallback(t, o, e) {
|
|
24
21
|
if (o !== e)
|
|
25
22
|
switch (t) {
|
|
26
23
|
case "color":
|
|
27
|
-
this.updateTypography(t, o, e,
|
|
24
|
+
this.updateTypography(t, o, e, h);
|
|
28
25
|
break;
|
|
29
26
|
case "font-size":
|
|
30
|
-
this.updateTypography(t, o, e,
|
|
27
|
+
this.updateTypography(t, o, e, x);
|
|
31
28
|
break;
|
|
32
29
|
case "font-weight":
|
|
33
|
-
this.updateTypography(t, o, e,
|
|
30
|
+
this.updateTypography(t, o, e, p);
|
|
34
31
|
break;
|
|
35
32
|
case "disabled":
|
|
36
33
|
this.color = "state-disabled";
|
|
@@ -40,8 +37,10 @@ const s = class s extends l {
|
|
|
40
37
|
break;
|
|
41
38
|
}
|
|
42
39
|
}
|
|
43
|
-
updateTypography(t, o, e,
|
|
44
|
-
o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), this.checkName(
|
|
40
|
+
updateTypography(t, o, e, l) {
|
|
41
|
+
o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), this.checkName(l, e) || f(
|
|
42
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
43
|
+
);
|
|
45
44
|
}
|
|
46
45
|
get color() {
|
|
47
46
|
return this.getAttribute("color");
|
|
@@ -65,18 +64,24 @@ const s = class s extends l {
|
|
|
65
64
|
return this.getAttribute("inverted");
|
|
66
65
|
}
|
|
67
66
|
set inverted(t) {
|
|
68
|
-
|
|
67
|
+
i(t) ? this.removeAttribute("inverted") : this.setAttribute("inverted", t);
|
|
68
|
+
}
|
|
69
|
+
get strikethrough() {
|
|
70
|
+
return this.getAttribute("strikethrough");
|
|
71
|
+
}
|
|
72
|
+
set strikethrough(t) {
|
|
73
|
+
i(t) ? this.removeAttribute("strikethrough") : this.setAttribute("strikethrough", t);
|
|
69
74
|
}
|
|
70
75
|
get disabled() {
|
|
71
76
|
return this.getAttribute("disabled");
|
|
72
77
|
}
|
|
73
78
|
set disabled(t) {
|
|
74
|
-
this.setAttribute("disabled", t);
|
|
79
|
+
i(t) ? this.removeAttribute("disabled") : this.setAttribute("disabled", t);
|
|
75
80
|
}
|
|
76
81
|
};
|
|
77
|
-
|
|
78
|
-
let
|
|
79
|
-
customElements.get("px-span") || customElements.define("px-span",
|
|
82
|
+
r.nativeName = "span";
|
|
83
|
+
let s = r;
|
|
84
|
+
customElements.get("px-span") || customElements.define("px-span", s);
|
|
80
85
|
export {
|
|
81
|
-
|
|
86
|
+
s as Span
|
|
82
87
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-span",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.61",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"clean": "rm -rf dist",
|
|
14
14
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
15
|
"test": "vitest run --coverage",
|
|
16
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|