@scania/tegel
Version:
Tegel Design System
123 lines (122 loc) • 5.42 kB
JavaScript
import { Host, h } from "@stencil/core";
import hasSlot from "../../../utils/hasSlot";
/**
* @slot <default> - <b>Unnamed slot.</b> For footer items.
* @slot title - Slot for the title of the group. Should contain a heading element adjusted to the rest of the website in terms of heading nesting, for accessibility.
*/
export class TdsFooterGroup {
constructor() {
/** 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('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: '7901705ee2dc040052e2f99813f8b0e8faf37530', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'ca98dcf8fbdf2556a9fd61b233a9a84bc3f6f9cc', 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: 'dfa738d7e93518c7aa29e322b575a4c418010e6a', "aria-label": this.tdsListAriaLabel }, h("div", { key: '6a3a9bfa388a342609187ca5437ea1e572a0b62f', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
${this.topPartGroup ? 'top-part-child' : ''}
${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '3dbf13f27f3bd37ba5fc589045b329ee034a37d3' }))))));
}
static get is() { return "tds-footer-group"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["footer-group.scss"]
};
}
static get styleUrls() {
return {
"$": ["footer-group.css"]
};
}
static get properties() {
return {
"titleText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Title text for the link group, only valid on top part of Footer."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "title-text"
},
"tdsListAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-list-aria-label"
}
};
}
static get states() {
return {
"open": {},
"isMobile": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "resize",
"method": "handleResize",
"target": "window",
"capture": false,
"passive": true
}];
}
}