@proximus/lavender-tag 1.4.14-beta.2 → 1.4.15-alpha.2

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.
Files changed (2) hide show
  1. package/dist/index.es.js +139 -154
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,156 +1,141 @@
1
- import { PxElement as n } from "@proximus/lavender-common";
1
+ import { PxElement as e } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-button-icon";
3
- const l = ':host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-2xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size="m"]) .tag{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:host([state="success"]) .tag{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}:host([state="warning"]) .tag{background-color:var(--px-color-background-purpose-warning-default);color:var(--px-color-text-neutral-inverted)}:host([state="error"]) .tag{background-color:var(--px-color-background-purpose-error-default);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([state="success"]) .tag{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state="warning"]) .tag{background-color:var(--px-color-background-purpose-warning-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state="error"]) .tag{background-color:var(--px-color-background-purpose-error-inverted);color:var(--px-color-text-neutral-default)}@media screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="m"]) .tag{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="m"]) .tag{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="m"]) .tag{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}}', r = new CSSStyleSheet();
4
- r.replaceSync(l);
5
- const g = ["", "s", "m"], d = ["", "success", "error", "warning"], o = class o extends n {
6
- template() {
7
- return `
8
- <div class="tag">
9
- <slot name="before"></slot>
10
- <slot></slot>
11
- <slot name="after"></slot>
12
- </div>
13
- `;
14
- }
15
- constructor() {
16
- super(r), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
17
- }
18
- connectedCallback() {
19
- var t, e;
20
- this.styleBeforeIcon = this.styleBeforeIcon.bind(this), this.styleBeforeIcon(), (t = this.$slotBefore) == null || t.addEventListener("slotchange", this.styleBeforeIcon), this.styleAfterBtnIcon = this.styleAfterBtnIcon.bind(this), this.styleAfterBtnIcon(), (e = this.$slotAfter) == null || e.addEventListener("slotchange", this.styleAfterBtnIcon);
21
- }
22
- static get observedAttributes() {
23
- return [
24
- "dismissible",
25
- "inverted",
26
- "disabled",
27
- "size",
28
- "state",
29
- "state-icon-aria-label",
30
- "state-icon-from"
31
- ];
32
- }
33
- attributeChangedCallback(t, e, a) {
34
- if (e !== a)
35
- switch (t) {
36
- case "inverted":
37
- this.hasAttribute("dismissible") && this.$slottedAfterBtnIcon.toggleAttribute("inverted");
38
- break;
39
- case "state":
40
- this.hasAttribute("dismissible") || this.updateStateStyles(e, a, d);
41
- break;
42
- case "state-icon-aria-label":
43
- this.hasAttribute("dismissible") || this.updateStateIconLabel(a);
44
- break;
45
- case "state-icon-from":
46
- this.hasAttribute("dismissible") || this.updateStateIconFrom(a);
47
- break;
48
- default:
49
- super.attributeChangedCallback(t, e, a);
50
- break;
51
- }
52
- }
53
- updateStateStyles(t, e, a) {
54
- if (!a.includes(t) && a.includes(e)) {
55
- const s = document.createElement("px-icon");
56
- s.setAttribute("size", "xs"), s.setAttribute("color", "inherit"), s.setAttribute(
57
- "from",
58
- this.stateIconFrom ? this.stateIconFrom : "lavender"
59
- ), s.setAttribute("name", this.getStateIcon(e)), this.stateIconAriaLabel && (s.setAttribute("aria-label", this.stateIconAriaLabel), s.setAttribute("title", this.stateIconAriaLabel)), this.$el.insertAdjacentElement("afterbegin", s);
60
- } else if (a.includes(t) && !a.includes(e)) {
61
- const s = this.$el.querySelector("px-icon");
62
- s && this.$el.removeChild(s);
63
- } else if (a.includes(t) && a.includes(e)) {
64
- const s = this.$el.querySelector("px-icon");
65
- s && s.setAttribute("name", this.getStateIcon(e));
66
- }
67
- }
68
- getStateIcon(t) {
69
- switch (t) {
70
- case "success":
71
- return "checkmark_fill";
72
- case "error":
73
- return "minus_fill";
74
- case "warning":
75
- return "exclamation_mark_fill";
76
- default:
77
- return "";
78
- }
79
- }
80
- updateStateIconLabel(t) {
81
- const e = this.$el.querySelector("px-icon");
82
- e && (t ? (e.setAttribute("aria-label", t), e.setAttribute("title", t)) : (e.removeAttribute("aria-label"), e.removeAttribute("title")));
83
- }
84
- updateStateIconFrom(t) {
85
- const e = this.$el.querySelector("px-icon");
86
- e && (t ? e.setAttribute("from", t) : e.setAttribute("from", "lavender"));
87
- }
88
- styleBeforeIcon() {
89
- this.$slottedBeforeIcon && (this.$slottedBeforeIcon.setAttribute("size", "xs"), this.$slottedBeforeIcon.setAttribute("color", "inherit"));
90
- }
91
- styleAfterBtnIcon() {
92
- this.$slottedAfterBtnIcon && (this.$slottedAfterBtnIcon.setAttribute("variant", "secondary"), this.$slottedAfterBtnIcon.setAttribute("size", "small"));
93
- }
94
- get $slottedBeforeIcon() {
95
- return this.querySelector('px-icon[slot="before"]');
96
- }
97
- get $slotBefore() {
98
- var t;
99
- return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
100
- 'slot[name="before"]'
101
- );
102
- }
103
- get $slottedAfterBtnIcon() {
104
- return this.querySelector('px-button-icon[slot="after"]');
105
- }
106
- get $slotAfter() {
107
- var t;
108
- return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
109
- 'slot[name="after"]'
110
- );
111
- }
112
- get size() {
113
- return this.getAttribute("size") || "";
114
- }
115
- set size(t) {
116
- this.setAttribute("size", t);
117
- }
118
- get state() {
119
- return this.getAttribute("state") || "";
120
- }
121
- set state(t) {
122
- this.setAttribute("state", t);
123
- }
124
- get dismissible() {
125
- return this.hasAttribute("dismissible");
126
- }
127
- set dismissible(t) {
128
- t ? this.setAttribute("dismissible", "") : this.removeAttribute("dismissible");
129
- }
130
- get inverted() {
131
- return this.hasAttribute("inverted");
132
- }
133
- set inverted(t) {
134
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
135
- }
136
- get stateIconAriaLabel() {
137
- return this.getAttribute("state-icon-aria-label") || "";
138
- }
139
- set stateIconAriaLabel(t) {
140
- this.setAttribute("state-icon-aria-label", t);
141
- }
142
- get stateIconFrom() {
143
- return this.getAttribute("state-icon-from") || "";
144
- }
145
- set stateIconFrom(t) {
146
- this.setAttribute("state-icon-from", t);
147
- }
148
- };
149
- o.nativeName = "div";
150
- let i = o;
151
- customElements.get("px-tag") || customElements.define("px-tag", i);
152
- export {
153
- i as Tag,
154
- g as tagSizeValues,
155
- d as tagStateValues
3
+ //#region src/tag.css?inline
4
+ var t = ":host:has(.tag){display:inline-block}.tag,.tag *{box-sizing:border-box}.tag{vertical-align:middle;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);justify-content:center;align-items:center;gap:var(--px-spacing-2xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main);display:inline-flex}:host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([size=s]) .tag{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size=m]) .tag{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:host([state=success]) .tag{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}:host([state=warning]) .tag{background-color:var(--px-color-background-purpose-warning-default);color:var(--px-color-text-neutral-inverted)}:host([state=error]) .tag{background-color:var(--px-color-background-purpose-error-default);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([state=success]) .tag{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state=warning]) .tag{background-color:var(--px-color-background-purpose-warning-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state=error]) .tag{background-color:var(--px-color-background-purpose-error-inverted);color:var(--px-color-text-neutral-default)}@media screen and (width>=48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}:host([size=s]) .tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=m]) .tag{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}:host([size=s]) .tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=m]) .tag{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}:host([size=s]) .tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=m]) .tag{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}}", n = new CSSStyleSheet();
5
+ n.replaceSync(t);
6
+ var r = [
7
+ "",
8
+ "s",
9
+ "m"
10
+ ], i = [
11
+ "",
12
+ "success",
13
+ "error",
14
+ "warning"
15
+ ], a = class extends e {
16
+ static {
17
+ this.nativeName = "div";
18
+ }
19
+ template() {
20
+ return "\n <div class=\"tag\">\n <slot name=\"before\"></slot>\n <slot></slot>\n <slot name=\"after\"></slot>\n </div>\n ";
21
+ }
22
+ constructor() {
23
+ super(n), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [n];
24
+ }
25
+ connectedCallback() {
26
+ this.styleBeforeIcon = this.styleBeforeIcon.bind(this), this.styleBeforeIcon(), this.$slotBefore?.addEventListener("slotchange", this.styleBeforeIcon), this.styleAfterBtnIcon = this.styleAfterBtnIcon.bind(this), this.styleAfterBtnIcon(), this.$slotAfter?.addEventListener("slotchange", this.styleAfterBtnIcon);
27
+ }
28
+ static get observedAttributes() {
29
+ return [
30
+ "dismissible",
31
+ "inverted",
32
+ "disabled",
33
+ "size",
34
+ "state",
35
+ "state-icon-aria-label",
36
+ "state-icon-from"
37
+ ];
38
+ }
39
+ attributeChangedCallback(e, t, n) {
40
+ if (t !== n) switch (e) {
41
+ case "inverted":
42
+ this.hasAttribute("dismissible") && this.$slottedAfterBtnIcon.toggleAttribute("inverted");
43
+ break;
44
+ case "state":
45
+ this.hasAttribute("dismissible") || this.updateStateStyles(t, n, i);
46
+ break;
47
+ case "state-icon-aria-label":
48
+ this.hasAttribute("dismissible") || this.updateStateIconLabel(n);
49
+ break;
50
+ case "state-icon-from":
51
+ this.hasAttribute("dismissible") || this.updateStateIconFrom(n);
52
+ break;
53
+ default: super.attributeChangedCallback(e, t, n);
54
+ }
55
+ }
56
+ updateStateStyles(e, t, n) {
57
+ if (!n.includes(e) && n.includes(t)) {
58
+ let e = document.createElement("px-icon");
59
+ e.setAttribute("size", "xs"), e.setAttribute("color", "inherit"), e.setAttribute("from", this.stateIconFrom ? this.stateIconFrom : "lavender"), e.setAttribute("name", this.getStateIcon(t)), this.stateIconAriaLabel && (e.setAttribute("aria-label", this.stateIconAriaLabel), e.setAttribute("title", this.stateIconAriaLabel)), this.$el.insertAdjacentElement("afterbegin", e);
60
+ } else if (n.includes(e) && !n.includes(t)) {
61
+ let e = this.$el.querySelector("px-icon");
62
+ e && this.$el.removeChild(e);
63
+ } else if (n.includes(e) && n.includes(t)) {
64
+ let e = this.$el.querySelector("px-icon");
65
+ e && e.setAttribute("name", this.getStateIcon(t));
66
+ }
67
+ }
68
+ getStateIcon(e) {
69
+ switch (e) {
70
+ case "success": return "checkmark_fill";
71
+ case "error": return "minus_fill";
72
+ case "warning": return "exclamation_mark_fill";
73
+ default: return "";
74
+ }
75
+ }
76
+ updateStateIconLabel(e) {
77
+ let t = this.$el.querySelector("px-icon");
78
+ t && (e ? (t.setAttribute("aria-label", e), t.setAttribute("title", e)) : (t.removeAttribute("aria-label"), t.removeAttribute("title")));
79
+ }
80
+ updateStateIconFrom(e) {
81
+ let t = this.$el.querySelector("px-icon");
82
+ t && (e ? t.setAttribute("from", e) : t.setAttribute("from", "lavender"));
83
+ }
84
+ styleBeforeIcon() {
85
+ this.$slottedBeforeIcon && (this.$slottedBeforeIcon.setAttribute("size", "xs"), this.$slottedBeforeIcon.setAttribute("color", "inherit"));
86
+ }
87
+ styleAfterBtnIcon() {
88
+ this.$slottedAfterBtnIcon && (this.$slottedAfterBtnIcon.setAttribute("variant", "secondary"), this.$slottedAfterBtnIcon.setAttribute("size", "small"));
89
+ }
90
+ get $slottedBeforeIcon() {
91
+ return this.querySelector("px-icon[slot=\"before\"]");
92
+ }
93
+ get $slotBefore() {
94
+ return this.shadowRoot?.querySelector("slot[name=\"before\"]");
95
+ }
96
+ get $slottedAfterBtnIcon() {
97
+ return this.querySelector("px-button-icon[slot=\"after\"]");
98
+ }
99
+ get $slotAfter() {
100
+ return this.shadowRoot?.querySelector("slot[name=\"after\"]");
101
+ }
102
+ get size() {
103
+ return this.getAttribute("size") || "";
104
+ }
105
+ set size(e) {
106
+ this.setAttribute("size", e);
107
+ }
108
+ get state() {
109
+ return this.getAttribute("state") || "";
110
+ }
111
+ set state(e) {
112
+ this.setAttribute("state", e);
113
+ }
114
+ get dismissible() {
115
+ return this.hasAttribute("dismissible");
116
+ }
117
+ set dismissible(e) {
118
+ e ? this.setAttribute("dismissible", "") : this.removeAttribute("dismissible");
119
+ }
120
+ get inverted() {
121
+ return this.hasAttribute("inverted");
122
+ }
123
+ set inverted(e) {
124
+ e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
125
+ }
126
+ get stateIconAriaLabel() {
127
+ return this.getAttribute("state-icon-aria-label") || "";
128
+ }
129
+ set stateIconAriaLabel(e) {
130
+ this.setAttribute("state-icon-aria-label", e);
131
+ }
132
+ get stateIconFrom() {
133
+ return this.getAttribute("state-icon-from") || "";
134
+ }
135
+ set stateIconFrom(e) {
136
+ this.setAttribute("state-icon-from", e);
137
+ }
156
138
  };
139
+ customElements.get("px-tag") || customElements.define("px-tag", a);
140
+ //#endregion
141
+ export { a as Tag, r as tagSizeValues, i as tagStateValues };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tag",
3
- "version": "1.4.14-beta.2",
3
+ "version": "1.4.15-alpha.2",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",