@scania/tegel
Version:
Tegel Design System
327 lines (326 loc) • 13.2 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() {
/** Type of Chip, depends on usage */
this.type = 'button';
/** Size of the Chip component */
this.size = 'lg';
/** ID used for internal Chip functionality and events, must be unique.
*
* **NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,
* as the default ID is random and will be different every time.
*/
this.chipId = generateUniqueId();
/** Controls component's checked attribute. Valid only for type checkbox and radio. */
this.checked = false;
/** Sets the Chip in a disabled state */
this.disabled = false;
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,
});
}
};
}
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() });
}
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: '7018c9c28fdd3711456101805579931c2dec9278' }, h("div", { key: 'c5157cdd3fe2b6db26c7684ee415f924cc3a8a87', class: chipClasses }, h("input", Object.assign({ key: 'fa5a3d476c1bf967c4a27d49c32ff032f58c6297', 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: 'd90597092adbe2b4bfa6c2d98edf6b29bc507fbf', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '8269d76dc638e523cf9c386f9b7de80b25a6aab0', name: "prefix" }), hasLabelSlot && h("slot", { key: 'ffaebfbaf18e563d022535efd5b12b8991aa79b6', name: "label" }), hasSuffixSlot && h("slot", { key: '95c9b55b8fa536011624a86430c27d5d65a5ed09', 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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "type",
"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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "size",
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "chip-id",
"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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "checked",
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value of input. Valid only for type checkbox and radio."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"tdsAriaLabel": {
"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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
}
};
}
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 | undefined;\n checked?: boolean;\n }",
"resolved": "{ chipId: string; value: string | undefined; checked?: boolean | undefined; }",
"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 | undefined;\n }",
"resolved": "{ chipId: string; checked: boolean; groupName: string | undefined; }",
"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
}];
}
}