@scania/tegel
Version:
Tegel Design System
61 lines (55 loc) • 5.03 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ca8040ad.js');
const hasSlot = require('./hasSlot-1c90e9ba.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** 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.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.hasSlot('title', this.host);
return (index.h(index.Host, { key: 'ee2e585154e56bba76c1e30aff640bda58dd401e', "aria-expanded": this.open ? 'true' : 'false' }, index.h("div", { key: 'd29f4a28742993315e7514516fa057def61f0cf6', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
(this.isMobile ? (index.h("button", { onClick: () => {
this.open = !this.open;
}, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? index.h("slot", { name: "title" }) : this.titleText, index.h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (index.h("div", { class: "footer-top-title" }, hasTitleSlot ? index.h("slot", { name: "title" }) : this.titleText))), index.h("nav", { key: 'e6e37cfa8d99c76b551c95140cca24829fd74244', "aria-label": this.tdsListAriaLabel }, index.h("div", { key: '680ada977f2d1b82e9dda9250e4423cc4040c7c4', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
${this.topPartGroup ? 'top-part-child' : ''}
${this.open ? 'expanded' : 'closed'}` }, index.h("slot", { key: '6748ed2033c34e3f34a11a391713413ad28fc7dc' }))))));
}
get host() { return index.getElement(this); }
};
TdsFooterGroup.style = TdsFooterGroupStyle0;
exports.tds_footer_group = TdsFooterGroup;