@scania/tegel
Version:
Tegel Design System
99 lines (94 loc) • 10.6 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { d as defineCustomElement$2 } from './p-b390ece5.js';
const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:first-child{margin-bottom:-1px;border-bottom:1px solid var(--tds-accordion-border)}.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible),.tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;background-color:var(--tds-accordion-background-focus)}.tds-accordion-item[disabled=true]:focus-visible{border-color:var(--tds-accordion-border)}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(:hover){background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(.tds-accordion-header-icon-start:active),.tds-accordion-item:has(.tds-accordion-header-icon-end:active){background-color:var(--tds-accordion-background-active)}:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:active) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active)}.tds-accordion-header-icon-start:active,.tds-accordion-header-icon-end:active{outline:none}";
const TdsAccordionItemStyle0 = accordionItemCss;
const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsToggle = createEvent(this, "tdsToggle", 7);
this.header = '';
this.expandIconPosition = 'end';
this.disabled = false;
this.expanded = false;
this.paddingReset = false;
this.ariaLevelValue = '6';
}
/** Method for toggling the expanded state of the Accordion Item. */
async toggleAccordionItem() {
const event = this.tdsToggle.emit({
expanded: !this.expanded,
});
if (!event.defaultPrevented) {
this.expanded = !this.expanded;
}
}
/** Method for expanding the Accordion Item */
async expand() {
const event = this.tdsToggle.emit({
expanded: true,
});
if (!event.defaultPrevented) {
this.expanded = true;
}
}
/** Method for collapsing the Accordion Item */
async collapse() {
const event = this.tdsToggle.emit({
expanded: false,
});
if (!event.defaultPrevented) {
this.expanded = false;
}
}
/** Returns the expanded state of the Accordion Item. */
async isExpanded() {
return this.expanded;
}
render() {
const primaryElementId = generateUniqueId();
const secondaryElementId = generateUniqueId();
return (h(Host, { key: '066522a77c41f0ca6c49ee77d5f34623c42d00e2' }, h("div", { key: 'cd3abb9da939e81404eaf6175ba62ce2d709de71', class: `tds-accordion-item
${this.disabled ? 'disabled' : ''}
${this.expanded ? 'expanded' : ''}
` }, h("div", { key: '85647602e5644c8908240d5dfb492ce60695a50c', role: "heading", "aria-level": this.ariaLevelValue }, h("button", { key: 'e74a1cc68af901a1acae4cf2d49708499af1e044', id: secondaryElementId, "aria-controls": primaryElementId, type: "button", "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: '2f757e9e1369381f95497c5833bd3a0e25a297f3', class: "tds-accordion-title" }, this.header, h("slot", { key: '1bf9cb769629414c763218b1a3772642b19b4ce4', name: "header" })), h("div", { key: 'b2f1cf14059d134502db363f442b4914b435a72f', class: "tds-accordion-icon" }, h("tds-icon", { key: 'aca038cd8915bd7bc0c152e37820e53f1d692041', tdsAriaHidden: true, svgTitle: "Chevron Down", name: "chevron_down", size: "16px" })))), h("div", { key: '76aa6973dac5bf9c8203c37d047f4e466a6e9fc7', role: "region", "aria-live": "polite", "aria-labelledby": secondaryElementId, id: primaryElementId, class: `tds-accordion-panel
${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
` }, h("slot", { key: '274f9aff706adceb82aea35db3a91494e798ab2c' })))));
}
static get style() { return TdsAccordionItemStyle0; }
}, [1, "tds-accordion-item", {
"header": [1],
"expandIconPosition": [1, "expand-icon-position"],
"disabled": [4],
"expanded": [516],
"paddingReset": [4, "padding-reset"],
"ariaLevelValue": [1, "aria-level-value"],
"toggleAccordionItem": [64],
"expand": [64],
"collapse": [64],
"isExpanded": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-accordion-item", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-accordion-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsAccordionItem$1);
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsAccordionItem = TdsAccordionItem$1;
const defineCustomElement = defineCustomElement$1;
export { TdsAccordionItem, defineCustomElement };