@scania/tegel
Version:
Tegel Design System
87 lines (82 loc) • 5.92 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { h as hasSlot } from './p-ae110fc2.js';
import { d as defineCustomElement$2 } from './p-b390ece5.js';
const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button: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}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
const TdsFooterGroupStyle0 = footerGroupCss;
const TdsFooterGroup$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterGroup extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** If the group is placed in the main part of the Footer,
* it can have either start or end as a slot position otherwise undefined. */
this.slotPosition = null;
/** Indicates if a group is part of the top part of the Footer. */
this.topPartGroup = false;
this.titleText = undefined;
this.tdsListAriaLabel = undefined;
this.open = false;
this.isMobile = undefined;
}
updateIsMobile() {
this.isMobile = window.innerWidth <= 992;
}
connectedCallback() {
this.updateIsMobile();
this.topPartGroup = this.host.parentElement.slot === 'top';
if (!this.topPartGroup) {
this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
}
if (!this.tdsListAriaLabel) {
console.warn('Tegel Footer Group component: missing tdsListAriaLabel prop');
}
if (this.titleText) {
console.warn('Tegel Footer Group component: to ensure accessibility, please use the title slot instead of the titleText prop. titleText will be deprecated in the future.');
}
const hasTitleSlot = hasSlot('title', this.host);
if (hasTitleSlot && this.titleText) {
console.warn('Tegel Footer Group component: titleText prop is set but title slot is used. The titleText prop will be ignored.');
}
}
handleResize() {
this.updateIsMobile();
}
render() {
const hasTitleSlot = hasSlot('title', this.host);
return (h(Host, { key: 'ee2e585154e56bba76c1e30aff640bda58dd401e', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'd29f4a28742993315e7514516fa057def61f0cf6', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
(this.isMobile ? (h("button", { onClick: () => {
this.open = !this.open;
}, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'e6e37cfa8d99c76b551c95140cca24829fd74244', "aria-label": this.tdsListAriaLabel }, h("div", { key: '680ada977f2d1b82e9dda9250e4423cc4040c7c4', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
${this.topPartGroup ? 'top-part-child' : ''}
${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '6748ed2033c34e3f34a11a391713413ad28fc7dc' }))))));
}
get host() { return this; }
static get style() { return TdsFooterGroupStyle0; }
}, [1, "tds-footer-group", {
"titleText": [1, "title-text"],
"tdsListAriaLabel": [1, "tds-list-aria-label"],
"open": [32],
"isMobile": [32]
}, [[9, "resize", "handleResize"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-footer-group", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-footer-group":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsFooterGroup$1);
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsFooterGroup = TdsFooterGroup$1;
const defineCustomElement = defineCustomElement$1;
export { TdsFooterGroup, defineCustomElement };