@scania/tegel
Version:
Tegel Design System
118 lines (117 loc) • 5.07 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() {
/** 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' }))))));
}
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",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Title text for the link group, only valid on top part of Footer."
},
"attribute": "title-text",
"reflect": false
},
"tdsListAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility."
},
"attribute": "tds-list-aria-label",
"reflect": false
}
};
}
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
}];
}
}