@scania/tegel
Version:
Tegel Design System
256 lines (255 loc) • 14.5 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() {
this.handleClose = () => {
const tdsCloseEvent = this.tdsClose.emit({
bannerId: this.bannerId,
});
if (!tdsCloseEvent.defaultPrevented) {
this.hidden = true;
}
};
this.icon = undefined;
this.header = undefined;
this.subheader = undefined;
this.variant = 'default';
this.bannerId = generateUniqueId();
this.hidden = false;
this.roleType = 'banner';
}
/** 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: '4a8e42b6c770c6c888739b2eab7e838fe4f83899', 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: '45b0a63ff1015c7a24bb37211eccfa5c8b5320ca', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2375c0c7a5a785fc788088e4568ad04a7d5f778e', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '0b4a58d3d3ab8405193bd771797badde39e23729', class: "content" }, h("div", { key: 'e9b26e4b13055853ea659cec8d990f7f2eb76999', class: "header-subheader" }, this.header && h("div", { key: '5cedf44a46330c77259c3d64cf567052ef26af0b', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'a2c9897a3befbbd5603262962a7652a763650048', name: "header" }), this.subheader && h("div", { key: 'a7916827ee4ea924270242c9f06ce75989021c3b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'fba6caffbf916a12b8e5975966551c4c9d03a5c9', name: "subheader" })), usesActionsSlot && h("slot", { key: '7a1b89ac09e9aa7e79740f225960818d2622d4b4', name: "actions" })), h("div", { key: '9dca236d2f8253c64a8a9ff67981f69c6f473c77', class: `banner-close` }, h("button", { key: 'cabd5fa950e125babecc6caf8109c51d05142ec3', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '2ec160b7e458fc4e99528c390f6190dea039f02a', 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": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
"references": {
"IconNames": {
"location": "import",
"path": "../../types/Icons",
"id": "src/types/Icons.ts::IconNames"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name of the icon for the component. For error and information variant, the icon is predefined."
},
"attribute": "icon",
"reflect": false
},
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Header text."
},
"attribute": "header",
"reflect": false
},
"subheader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Subheader text."
},
"attribute": "subheader",
"reflect": false
},
"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"
},
"attribute": "variant",
"reflect": false,
"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."
},
"attribute": "banner-id",
"reflect": false,
"defaultValue": "generateUniqueId()"
},
"hidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the Banner"
},
"attribute": "hidden",
"reflect": true,
"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."
},
"attribute": "role-type",
"reflect": false,
"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"; }
}