@scania/tegel
Version:
Tegel Design System
99 lines (95 loc) • 7.56 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
import { h as hasSlot } from './hasSlot-d52114d0.js';
const chipCss = ".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip{display:inline-flex}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip{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:16px;cursor:pointer;white-space:nowrap}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);cursor:default;pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.component.sc-tds-chip .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)}.component.sc-tds-chip .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)}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:32px;padding:0 16px;gap:8px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:24px;padding:0 12px;gap:6px}.component.sc-tds-chip .tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:0 12px 0 6px}.component.sc-tds-chip .tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px 0 12px}.component.sc-tds-chip .tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:0 16px 0 8px}.component.sc-tds-chip .tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px 0 16px}.component.sc-tds-chip .tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px}.component.sc-tds-chip .tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-tds-chip .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)}.component.sc-tds-chip .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)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover)}";
const TdsChipStyle0 = chipCss;
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);
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" }))))));
}
get host() { return getElement(this); }
};
TdsChip.style = TdsChipStyle0;
export { TdsChip as tds_chip };