@scania/tegel
Version:
Tegel Design System
59 lines (54 loc) • 5.05 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
var hasSlot = require('./hasSlot-D-DVNhGg.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 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:12px}: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 TdsFooterGroup = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */
this.open = false;
/** Indicates if the component is in mobile view. */
this.isMobile = false;
/** 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;
}
updateIsMobile() {
this.isMobile = window.innerWidth <= 992;
}
connectedCallback() {
var _a, _b;
this.updateIsMobile();
this.topPartGroup = ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.slot) === 'top';
if (!this.topPartGroup) {
this.slotPosition = ((_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.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: '7901705ee2dc040052e2f99813f8b0e8faf37530', "aria-expanded": this.open ? 'true' : 'false' }, index.h("div", { key: 'ca98dcf8fbdf2556a9fd61b233a9a84bc3f6f9cc', 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: 'dfa738d7e93518c7aa29e322b575a4c418010e6a', "aria-label": this.tdsListAriaLabel }, index.h("div", { key: '6a3a9bfa388a342609187ca5437ea1e572a0b62f', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
${this.topPartGroup ? 'top-part-child' : ''}
${this.open ? 'expanded' : 'closed'}` }, index.h("slot", { key: '3dbf13f27f3bd37ba5fc589045b329ee034a37d3' }))))));
}
get host() { return index.getElement(this); }
};
TdsFooterGroup.style = footerGroupCss();
exports.tds_footer_group = TdsFooterGroup;