@proximus/lavender-span 2.0.0-alpha.18 → 2.0.0-alpha.180
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 +16 -10
- package/dist/index.es.js +81 -83
- 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;
|
|
@@ -6,14 +10,16 @@ export declare class Span extends PxElement<HTMLSpanElement> {
|
|
|
6
10
|
static get observedAttributes(): string[];
|
|
7
11
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
8
12
|
updateTypography(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
9
|
-
get color(): string;
|
|
10
|
-
set color(value: string);
|
|
11
|
-
get fontsize(): string;
|
|
12
|
-
set fontsize(value: string);
|
|
13
|
-
get fontweight(): string;
|
|
14
|
-
set fontweight(value: string);
|
|
15
|
-
get inverted():
|
|
16
|
-
set inverted(value:
|
|
17
|
-
get
|
|
18
|
-
set
|
|
13
|
+
get color(): string | null;
|
|
14
|
+
set color(value: string | null);
|
|
15
|
+
get fontsize(): string | null;
|
|
16
|
+
set fontsize(value: string | null);
|
|
17
|
+
get fontweight(): string | null;
|
|
18
|
+
set fontweight(value: string | null);
|
|
19
|
+
get inverted(): boolean;
|
|
20
|
+
set inverted(value: boolean);
|
|
21
|
+
get strikethrough(): boolean;
|
|
22
|
+
set strikethrough(value: boolean);
|
|
23
|
+
get disabled(): boolean;
|
|
24
|
+
set disabled(value: boolean);
|
|
19
25
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,84 +1,82 @@
|
|
|
1
|
-
import { PxElement as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
s.nativeName = "span";
|
|
80
|
-
let i = s;
|
|
81
|
-
customElements.get("px-span") || customElements.define("px-span", i);
|
|
82
|
-
export {
|
|
83
|
-
i as Span
|
|
1
|
+
import { PxElement as e, colorValues as t, fontsizeValues as n, fontweightValues as r, log as i } from "@proximus/lavender-common";
|
|
2
|
+
//#region src/span.css?inline
|
|
3
|
+
var a = "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 screen and (width>=48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (width>=64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", o = ".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 screen and (width>=48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (width>=64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (width>=90.0625rem){.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)}", s = new CSSStyleSheet(), c = new CSSStyleSheet();
|
|
4
|
+
s.replaceSync(a), c.replaceSync(o);
|
|
5
|
+
var l = class extends e {
|
|
6
|
+
static {
|
|
7
|
+
this.nativeName = "span";
|
|
8
|
+
}
|
|
9
|
+
constructor() {
|
|
10
|
+
super(s, c), this.template = () => "<span><slot></slot></span>", this.shadowRoot.innerHTML = this.template();
|
|
11
|
+
}
|
|
12
|
+
static get observedAttributes() {
|
|
13
|
+
return [
|
|
14
|
+
...super.observedAttributes,
|
|
15
|
+
"color",
|
|
16
|
+
"font-size",
|
|
17
|
+
"font-weight",
|
|
18
|
+
"inverted",
|
|
19
|
+
"disabled",
|
|
20
|
+
"strikethrough"
|
|
21
|
+
];
|
|
22
|
+
}
|
|
23
|
+
attributeChangedCallback(e, i, a) {
|
|
24
|
+
if (i !== a) switch (e) {
|
|
25
|
+
case "color":
|
|
26
|
+
this.updateTypography(e, i, a, t);
|
|
27
|
+
break;
|
|
28
|
+
case "font-size":
|
|
29
|
+
this.updateTypography(e, i, a, n);
|
|
30
|
+
break;
|
|
31
|
+
case "font-weight":
|
|
32
|
+
this.updateTypography(e, i, a, r);
|
|
33
|
+
break;
|
|
34
|
+
case "disabled":
|
|
35
|
+
this.color = "state-disabled";
|
|
36
|
+
break;
|
|
37
|
+
default: super.attributeChangedCallback(e, i, a);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
updateTypography(e, t, n, r) {
|
|
41
|
+
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`), this.checkName(r, n) || i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
42
|
+
}
|
|
43
|
+
get color() {
|
|
44
|
+
return this.getAttribute("color");
|
|
45
|
+
}
|
|
46
|
+
set color(e) {
|
|
47
|
+
this._updateAttribute("color", e);
|
|
48
|
+
}
|
|
49
|
+
get fontsize() {
|
|
50
|
+
return this.getAttribute("font-size");
|
|
51
|
+
}
|
|
52
|
+
set fontsize(e) {
|
|
53
|
+
this._updateAttribute("font-size", e);
|
|
54
|
+
}
|
|
55
|
+
get fontweight() {
|
|
56
|
+
return this.getAttribute("font-weight");
|
|
57
|
+
}
|
|
58
|
+
set fontweight(e) {
|
|
59
|
+
this._updateAttribute("font-weight", e);
|
|
60
|
+
}
|
|
61
|
+
get inverted() {
|
|
62
|
+
return this.hasAttribute("inverted");
|
|
63
|
+
}
|
|
64
|
+
set inverted(e) {
|
|
65
|
+
this._updateBooleanAttribute("inverted", e);
|
|
66
|
+
}
|
|
67
|
+
get strikethrough() {
|
|
68
|
+
return this.hasAttribute("strikethrough");
|
|
69
|
+
}
|
|
70
|
+
set strikethrough(e) {
|
|
71
|
+
this._updateBooleanAttribute("strikethrough", e);
|
|
72
|
+
}
|
|
73
|
+
get disabled() {
|
|
74
|
+
return this.hasAttribute("disabled");
|
|
75
|
+
}
|
|
76
|
+
set disabled(e) {
|
|
77
|
+
this._updateBooleanAttribute("disabled", e);
|
|
78
|
+
}
|
|
84
79
|
};
|
|
80
|
+
customElements.get("px-span") || customElements.define("px-span", l);
|
|
81
|
+
//#endregion
|
|
82
|
+
export { l as Span };
|
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.180",
|
|
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"
|