@proximus/lavender-accordion 2.0.0-alpha.9 → 2.0.0-alpha.91
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/Accordion.d.ts +1 -1
- package/dist/index.es.js +25 -18
- package/package.json +2 -2
package/dist/Accordion.d.ts
CHANGED
|
@@ -2,13 +2,13 @@ import '@proximus/lavender-layout';
|
|
|
2
2
|
import { PxElement } from '@proximus/lavender-common';
|
|
3
3
|
export declare const accordionVariantValues: readonly ["", "none", "single", "contained"];
|
|
4
4
|
export declare const accordionBackgroundColorValues: string[];
|
|
5
|
-
export type AccordionVariant = (typeof accordionVariantValues)[number];
|
|
6
5
|
export declare class Accordion extends PxElement<HTMLDivElement> {
|
|
7
6
|
static nativeName: string;
|
|
8
7
|
private isSafari;
|
|
9
8
|
private template;
|
|
10
9
|
constructor();
|
|
11
10
|
static get observedAttributes(): string[];
|
|
11
|
+
connectedCallback(): void;
|
|
12
12
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
13
13
|
updateAttribute(attrName: string, oldValue: string, newValue: string, attrValues: readonly string[]): void;
|
|
14
14
|
updateBackgroundColor(attrName: string, newValue: string, attrValue: string[]): void;
|
package/dist/index.es.js
CHANGED
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import "@proximus/lavender-layout";
|
|
2
|
-
import { PxElement as
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const
|
|
2
|
+
import { PxElement as d, log as i } from "@proximus/lavender-common";
|
|
3
|
+
const l = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-m-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-m-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained[no-content-padding] slot[name=content]{padding:0}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details summary{font-size:var(--px-text-size-label-m-tablet)}details:not(.single) slot[name=content]{padding:var(--px-padding-m-tablet)}details:not(.single) summary{padding:var(--px-padding-m-tablet);gap:var(--px-spacing-s-tablet)}details:not(.single).contained summary{padding:var(--px-padding-m-tablet);font-size:var(--px-text-size-label-l-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details summary{font-size:var(--px-text-size-label-m-laptop)}details:not(.single) slot[name=content]{padding:var(--px-padding-m-laptop)}details:not(.single) summary{padding:var(--px-padding-m-laptop);gap:var(--px-spacing-s-laptop)}details:not(.single).contained summary{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-m-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`, n = new CSSStyleSheet();
|
|
4
|
+
n.replaceSync(l);
|
|
5
|
+
const c = [
|
|
6
6
|
"",
|
|
7
7
|
"none",
|
|
8
8
|
"single",
|
|
9
9
|
"contained"
|
|
10
|
-
],
|
|
10
|
+
], p = [
|
|
11
11
|
"",
|
|
12
12
|
"container-default",
|
|
13
13
|
"container-light"
|
|
14
|
-
], o = class o extends
|
|
14
|
+
], o = class o extends d {
|
|
15
15
|
constructor() {
|
|
16
|
-
super(
|
|
17
|
-
<summary
|
|
16
|
+
super(n), this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), this.template = () => `<details>
|
|
17
|
+
<summary><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot><span class="arrow-icon"></span></summary>
|
|
18
18
|
<slot name="content"></slot>
|
|
19
|
-
</details>`, this.shadowRoot.innerHTML = this.template()
|
|
20
|
-
this.updateAriaExpanded();
|
|
21
|
-
}));
|
|
19
|
+
</details>`, this.shadowRoot.innerHTML = this.template();
|
|
22
20
|
}
|
|
23
21
|
static get observedAttributes() {
|
|
24
22
|
return [
|
|
@@ -29,6 +27,11 @@ const l = [
|
|
|
29
27
|
"no-content-padding"
|
|
30
28
|
];
|
|
31
29
|
}
|
|
30
|
+
connectedCallback() {
|
|
31
|
+
this.isSafari && this.$summary.setAttribute("role", "button"), this.$details && this.$summary && (this.updateAriaExpanded(), this.$details.addEventListener("toggle", () => {
|
|
32
|
+
this.updateAriaExpanded();
|
|
33
|
+
}));
|
|
34
|
+
}
|
|
32
35
|
attributeChangedCallback(e, t, r) {
|
|
33
36
|
if (t !== r)
|
|
34
37
|
switch (e) {
|
|
@@ -37,14 +40,14 @@ const l = [
|
|
|
37
40
|
e,
|
|
38
41
|
t,
|
|
39
42
|
r,
|
|
40
|
-
|
|
43
|
+
c
|
|
41
44
|
);
|
|
42
45
|
break;
|
|
43
46
|
case "background-color":
|
|
44
47
|
this.updateBackgroundColor(
|
|
45
48
|
e,
|
|
46
49
|
r,
|
|
47
|
-
|
|
50
|
+
p
|
|
48
51
|
);
|
|
49
52
|
break;
|
|
50
53
|
default:
|
|
@@ -52,8 +55,10 @@ const l = [
|
|
|
52
55
|
break;
|
|
53
56
|
}
|
|
54
57
|
}
|
|
55
|
-
updateAttribute(e, t, r,
|
|
56
|
-
t !== null && t !== "" && this.$el.classList.toggle(`${t}`), r !== null && r !== "" && this.$el.classList.toggle(`${r}`), this.checkName(
|
|
58
|
+
updateAttribute(e, t, r, s) {
|
|
59
|
+
t !== null && t !== "" && this.$el.classList.toggle(`${t}`), r !== null && r !== "" && this.$el.classList.toggle(`${r}`), this.checkName(s, r) || i(
|
|
60
|
+
`${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
61
|
+
);
|
|
57
62
|
}
|
|
58
63
|
updateBackgroundColor(e, t, r) {
|
|
59
64
|
this.checkName(r, t) ? (this.$el.style.setProperty(
|
|
@@ -62,7 +67,9 @@ const l = [
|
|
|
62
67
|
), this.$el.style.setProperty(
|
|
63
68
|
`--accordion-contained-${e}-inverted`,
|
|
64
69
|
`var(--px-color-background-${t}-inverted)`
|
|
65
|
-
)) :
|
|
70
|
+
)) : i(
|
|
71
|
+
`${t} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
72
|
+
);
|
|
66
73
|
}
|
|
67
74
|
updateAriaExpanded() {
|
|
68
75
|
this.$summary.setAttribute(
|
|
@@ -106,6 +113,6 @@ let a = o;
|
|
|
106
113
|
customElements.get("px-accordion") || customElements.define("px-accordion", a);
|
|
107
114
|
export {
|
|
108
115
|
a as Accordion,
|
|
109
|
-
|
|
110
|
-
|
|
116
|
+
p as accordionBackgroundColorValues,
|
|
117
|
+
c as accordionVariantValues
|
|
111
118
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-accordion",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.91",
|
|
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 && 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"
|