@scania/tegel
Version:
Tegel Design System
99 lines (95 loc) • 7.64 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
const chipCss = () => `.sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h{display:inline-block}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.tds-chip-component.sc-tds-chip{display:inline-flex}.tds-chip-component.sc-tds-chip label.sc-tds-chip{box-sizing:content-box;background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:32px;border:1px solid var(--tds-chips-border);cursor:pointer;white-space:nowrap}.tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover);border-color:var(--tds-chips-border-hover)}.tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);border-color:transparent;cursor:default;pointer-events:none}.tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.tds-chip-component.disabled.sc-tds-chip input[type=radio].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled);border-color:transparent}.tds-chip-component.disabled.sc-tds-chip input[type=checkbox].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled);border-color:transparent}.tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:16px;padding:8px 16px;gap:6px}.tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:16px;padding:4px 12px;gap:4px}.tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:4px 12px 4px 8px}.tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:4px 8px 4px 12px}.tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:8px 16px 8px 10px}.tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:8px 10px 8px 16px}.tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:4px 8px}.tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:8px 10px}.tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;background-color:var(--tds-chips-background-focus);border-color:transparent}.tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active);border-color:var(--tds-chips-background-active)}.tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover);border-color:var(--tds-chips-border-selected-hover)}`;
const TdsChip = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsChange = createEvent(this, "tdsChange", 6);
this.internalRadioOnChange = createEvent(this, "internalRadioOnChange", 6);
this.tdsClick = createEvent(this, "tdsClick", 6);
/** 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" })))));
}
get host() { return getElement(this); }
};
TdsChip.style = chipCss();
export { TdsChip as tds_chip };