@scania/tegel
Version:
Tegel Design System
126 lines (121 loc) • 8.37 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { h as hasSlot } from './p-ae110fc2.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$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends H {
constructor() {
super();
this.__registerHost();
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 this; }
static get style() { return TdsChipStyle0; }
}, [6, "tds-chip", {
"type": [1],
"size": [1],
"chipId": [1, "chip-id"],
"checked": [1540],
"name": [1],
"value": [1],
"disabled": [4],
"tdsAriaLabel": [1, "tds-aria-label"]
}, [[16, "internalRadioOnChange", "handleInternaRadioChange"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-chip"];
components.forEach(tagName => { switch (tagName) {
case "tds-chip":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsChip$1);
}
break;
} });
}
defineCustomElement$1();
const TdsChip = TdsChip$1;
const defineCustomElement = defineCustomElement$1;
export { TdsChip, defineCustomElement };