@scania/tegel
Version:
Tegel Design System
278 lines (277 loc) • 15.7 kB
JavaScript
import { Host, h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
import hasSlot from "../../utils/hasSlot";
/**
* @slot header - Slot for the Header of the Banner
* @slot subheader - Slot for the Subheader of the Banner
* @slot actions - Slot for the bottom part of the Banner, used for links.
*/
export class TdsBanner {
constructor() {
/** Variant of Banner */
this.variant = 'default';
/** ID used for internal table functionality and events, must be unique.
*
* **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,
* as the default ID is random and will be different every time.
*/
this.bannerId = generateUniqueId();
/** Hides the Banner */
this.hidden = false;
/** Defines the ARIA role of the banner. Defaults to "banner" for global use,
* but can be set to "region" or "alert" if used differently.
*/
this.roleType = 'banner';
this.handleClose = () => {
const tdsCloseEvent = this.tdsClose.emit({
bannerId: this.bannerId,
});
if (!tdsCloseEvent.defaultPrevented) {
this.hidden = true;
}
};
}
/** Hides the Banner. */
async hideBanner() {
this.hidden = true;
}
/** Shows the Banner */
async showBanner() {
this.hidden = false;
}
connectedCallback() {
if (this.variant === 'error') {
this.icon = 'error';
}
else if (this.variant === 'information') {
this.icon = 'info';
}
}
render() {
const usesHeaderSlot = hasSlot('subheader', this.host);
const usesSubheaderSlot = hasSlot('subheader', this.host);
const usesActionsSlot = hasSlot('actions', this.host);
return (h(Host, { key: '5b89bedb919ed799da1701cae1c152e310865b43', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
[this.variant]: true,
hide: this.hidden,
show: !this.hidden,
} }, this.icon && (h("div", { key: 'b17e4c4986ccb9afde8ad9609465fdad1f5f78fe', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2d43b52d72b874809d48b40ab2faae796e3c7d08', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '3f1d0b8493aaf41e1fe78837c937d56bb4d4d6af', class: "content" }, h("div", { key: '3fd4dac5928d5f588eff7cc9cf8a64c401b75875', class: "header-subheader" }, this.header && h("div", { key: 'f356b4218fba0c42c97e728fe6fc91bb14c8a3d7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '74659c5c0b33bbc81f90d79c9cb80d3dcd1839fa', name: "header" }), this.subheader && h("div", { key: 'b91ba944f6c41ccf62002a2dade85968dd5b34f4', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e8854a51dc158cba747abca51d79828ee419732e', name: "subheader" })), usesActionsSlot && h("slot", { key: '60fe1b1b75a7cc169d71b97d5d91086d7ae96a07', name: "actions" })), h("div", { key: 'bf664cd50d34e9ac4c3061d1670d0607cd326bef', class: `banner-close` }, h("button", { key: '0ddfadbfe00ecf7ec1376fdfbc2d70ff0cffb919', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '7e45115cd682e035227b486442c4fe4c67dfec4b', name: "cross", size: "20px", svgTitle: "Close" })))));
}
static get is() { return "tds-banner"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["banner.scss"]
};
}
static get styleUrls() {
return {
"$": ["banner.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IconNames",
"resolved": "\"24v_battery\" | \"24v_battery_inactive\" | \"acceleration\" | \"acceleration_inactive\" | \"adblue\" | \"adblue_inactive\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward\" | \"backward_inactive\" | \"bento\" | \"bug\" | \"bug_inactive\" | \"burger\" | \"bus\" | \"bus_inactive\" | \"cab_door\" | \"calendar\" | \"calendar_inactive\" | \"camera\" | \"camera_inactive\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed\" | \"charging_speed_inactive\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock\" | \"clock_inactive\" | \"configurator\" | \"contact\" | \"contact_inactive\" | \"cookie\" | \"cookie_inactive\" | \"coolant_level\" | \"coolant_level_inactive\" | \"copy\" | \"cross\" | \"cup\" | \"cup_inactive\" | \"dashboard\" | \"department\" | \"department_inactive\" | \"departure_scheduling\" | \"departure_scheduling_inactive\" | \"diamond\" | \"diamond_inactive\" | \"document\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus\" | \"document_plus_inactive\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"download\" | \"driving_licence\" | \"driving_licence_inactive\" | \"drop\" | \"drop_inactive\" | \"edit\" | \"edit_inactive\" | \"email\" | \"engine\" | \"engine_inactive\" | \"environment\" | \"environment_inactive\" | \"error\" | \"exit\" | \"expand\" | \"expand_inactive\" | \"export\" | \"export_inactive\" | \"eye\" | \"eye_inactive\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory\" | \"factory_inactive\" | \"ferry\" | \"ferry_inactive\" | \"filters\" | \"filters_inactive\" | \"flash\" | \"flash_inactive\" | \"folder\" | \"forward\" | \"forward_inactive\" | \"fuel\" | \"fuel_gauge\" | \"fuel_gauge_inactive\" | \"fuel_inactive\" | \"gift\" | \"gift_inactive\" | \"global\" | \"guided_tour\" | \"guided_tour_inactive\" | \"hatch_open\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"heart\" | \"heart_inactive\" | \"heating_inactive_screen\" | \"history\" | \"history_inactive\" | \"home\" | \"home_inactive\" | \"idea\" | \"idea_inactive\" | \"image\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"info\" | \"insights\" | \"kebab\" | \"key\" | \"key_inactive\" | \"language\" | \"layer\" | \"layer_inactive\" | \"link\" | \"link_broken\" | \"list\" | \"list_inactive\" | \"lock\" | \"lock_inactive\" | \"map_cursor\" | \"map_cursor_inactive\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge\" | \"merge_inactive\" | \"message\" | \"message_inactive\" | \"microphone\" | \"microphone_inactive\" | \"mileage\" | \"mileage_inactive\" | \"minimize_fullscreen\" | \"minus\" | \"navigate\" | \"navigate_inactive\" | \"notification\" | \"notification_inactive\" | \"notification_snooze\" | \"oil_level\" | \"oil_level_inactive\" | \"paperclip\" | \"pause\" | \"pause_inactive\" | \"phone\" | \"phone_inactive\" | \"pie_chart\" | \"pin\" | \"pin_inactive\" | \"placeholder\" | \"play\" | \"play_inactive\" | \"plus\" | \"powerplug\" | \"powerplug_inactive\" | \"print\" | \"print_inactive\" | \"privacy\" | \"privacy_inactive\" | \"profile\" | \"profile_inactive\" | \"prohibited\" | \"proportions\" | \"proportions_inactive\" | \"range\" | \"range_inactive\" | \"redirect\" | \"refresh\" | \"refresh_inactive\" | \"reload\" | \"reload_inactive\" | \"repeat\" | \"report\" | \"report_inactive\" | \"route\" | \"route_inactive\" | \"save\" | \"save_inactive\" | \"search\" | \"send\" | \"send_inactive\" | \"settings\" | \"share\" | \"shuffle\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone\" | \"smartphone_inactive\" | \"sorting\" | \"speedometer\" | \"speedometer_inactive\" | \"star\" | \"support\" | \"target\" | \"target_inactive\" | \"temperature\" | \"temperature_inactive\" | \"text\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool\" | \"tool_inactive\" | \"trailer\" | \"trailer_inactive\" | \"trash\" | \"trash_inactive\" | \"truck\" | \"truck_inactive\" | \"undo\" | \"undo_inactive\" | \"unlock\" | \"upload\" | \"video\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight\" | \"weight_inactive\" | \"wifi\" | \"wifi_inactive\" | \"windscreen_heating\" | \"windscreen_heating_inactive\" | undefined",
"references": {
"IconNames": {
"location": "import",
"path": "../../types/Icons",
"id": "src/types/Icons.ts::IconNames",
"referenceLocation": "IconNames"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Name of the icon for the component. For error and information variant, the icon is predefined."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Header text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "header"
},
"subheader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Subheader text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "subheader"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'error' | 'information' | 'default'",
"resolved": "\"default\" | \"error\" | \"information\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variant of Banner"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "variant",
"defaultValue": "'default'"
},
"bannerId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID used for internal table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,\nas the default ID is random and will be different every time."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "banner-id",
"defaultValue": "generateUniqueId()"
},
"hidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the Banner"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "hidden",
"defaultValue": "false"
},
"roleType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'banner' | 'region' | 'alert'",
"resolved": "\"alert\" | \"banner\" | \"region\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the ARIA role of the banner. Defaults to \"banner\" for global use,\nbut can be set to \"region\" or \"alert\" if used differently."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "role-type",
"defaultValue": "'banner'"
}
};
}
static get events() {
return [{
"method": "tdsClose",
"name": "tdsClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Sends a unique Banner identifier when the close button is pressed."
},
"complexType": {
"original": "{\n bannerId: string;\n }",
"resolved": "{ bannerId: string; }",
"references": {}
}
}];
}
static get methods() {
return {
"hideBanner": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Hides the Banner.",
"tags": []
}
},
"showBanner": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Shows the Banner",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}