@scania/tegel
Version:
Tegel Design System
310 lines (309 loc) • 12.4 kB
JavaScript
import { Host, h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
import hasSlot from "../../utils/hasSlot";
/**
* @slot prefix - Slot for the prefix icon.
* @slot label - Slot for the label text.
* @slot suffix - Slot for the suffix icon.
*/
export class TdsChip {
constructor() {
this.handleChange = () => {
if (!this.disabled) {
// Only proceed if not disabled
if (this.type === 'checkbox') {
this.checked = !this.checked;
}
else if (this.type === 'radio') {
this.checked = true;
this.internalRadioOnChange.emit({
chipId: this.chipId,
checked: this.checked,
groupName: this.name,
});
}
else {
console.error('Unsupported type in Chip component!');
}
this.tdsChange.emit({
chipId: this.chipId,
checked: this.checked,
value: this.value,
});
}
};
this.handleClick = () => {
if (!this.disabled) {
// Only proceed if not disabled
this.tdsClick.emit({
chipId: this.chipId,
});
}
};
this.type = 'button';
this.size = 'lg';
this.chipId = generateUniqueId();
this.checked = false;
this.name = undefined;
this.value = undefined;
this.disabled = false;
this.tdsAriaLabel = undefined;
}
handleInternaRadioChange(event) {
const { chipId, checked, groupName } = event.detail;
// if event comes from different button within the group
if (chipId !== this.chipId && groupName === this.name) {
// and both incoming and this is checked
if (this.checked && checked) {
this.checked = false;
}
}
}
renderInputAttributes() {
const commonAttributes = {
disabled: this.disabled,
};
if (this.type !== 'button') {
return Object.assign(Object.assign({}, commonAttributes), { value: this.value, checked: this.checked, name: this.name, onChange: () => this.handleChange() });
}
return Object.assign(Object.assign({}, commonAttributes), { onClick: () => this.handleClick() });
}
connectedCallback() {
if (!this.tdsAriaLabel) {
console.warn('Tegel Chip component: tdsAriaLabel prop is missing');
}
}
render() {
const inputAttributes = this.renderInputAttributes();
const hasPrefixSlot = hasSlot('prefix', this.host);
const hasLabelSlot = hasSlot('label', this.host);
const hasSuffixSlot = hasSlot('suffix', this.host);
const chipClasses = {
'tds-chip-component': true,
'sm': this.size === 'sm',
'lg': this.size === 'lg',
'prefix': hasPrefixSlot,
'suffix': hasSuffixSlot,
'disabled': this.disabled,
};
return (h(Host, { key: 'bec32d74f1e0a42f98fb431d5988ba1d78c57b43' }, h("div", { key: 'af67d86bbf22be341cc816d72dad135cf04a9002', class: "component" }, h("div", { key: 'ee91bc58ca35ba6307e270f63bbb3da65e16b4f9', class: chipClasses }, h("input", Object.assign({ key: 'a5e723793a8f8c749f6d54937bbde888788115e0', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'f0a219c8f5c462e3ec626551aeea054ead479d2b', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '9169b3a496fa6648873811a3ca9eb5d51d110a6f', name: "prefix" }), hasLabelSlot && h("slot", { key: '932e06fe8be85d7588d11024ebc87000c887e9c0', name: "label" }), hasSuffixSlot && h("slot", { key: '3f159f17de790ec17b64a596b9f88dbbda7d1429', name: "suffix" }))))));
}
static get is() { return "tds-chip"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["chip.scss"]
};
}
static get styleUrls() {
return {
"$": ["chip.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'radio' | 'checkbox'",
"resolved": "\"button\" | \"checkbox\" | \"radio\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Type of Chip, depends on usage"
},
"attribute": "type",
"reflect": false,
"defaultValue": "'button'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'sm' | 'lg'",
"resolved": "\"lg\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of the Chip component"
},
"attribute": "size",
"reflect": false,
"defaultValue": "'lg'"
},
"chipId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID used for internal Chip functionality and events, must be unique.\n\n**NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,\nas the default ID is random and will be different every time."
},
"attribute": "chip-id",
"reflect": false,
"defaultValue": "generateUniqueId()"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls component's checked attribute. Valid only for type checkbox and radio."
},
"attribute": "checked",
"reflect": true,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio."
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value of input. Valid only for type checkbox and radio."
},
"attribute": "value",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the Chip in a disabled state"
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"tdsAriaLabel": {
"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"
},
"attribute": "tds-aria-label",
"reflect": false
}
};
}
static get events() {
return [{
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Chip identifier and value when it is changed (checked/unchecked).\nValid only for type checkbox and radio.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
},
"complexType": {
"original": "{\n chipId: string;\n value: string;\n checked?: boolean;\n }",
"resolved": "{ chipId: string; value: string; checked?: boolean; }",
"references": {}
}
}, {
"method": "internalRadioOnChange",
"name": "internalRadioOnChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Emit checked value if type is radio"
}],
"text": ""
},
"complexType": {
"original": "{\n chipId: string;\n checked: boolean;\n groupName: string;\n }",
"resolved": "{ chipId: string; checked: boolean; groupName: string; }",
"references": {}
}
}, {
"method": "tdsClick",
"name": "tdsClick",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Chip identifier when Chip is clicked.\nValid only for type button.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
},
"complexType": {
"original": "{\n chipId: string;\n }",
"resolved": "{ chipId: string; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalRadioOnChange",
"method": "handleInternaRadioChange",
"target": "body",
"capture": false,
"passive": false
}];
}
}