gov-gui
Version:
Gov UI Component Library Typscript Build
252 lines (251 loc) • 9.35 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovSegmentedChips {
constructor() {
this.variant = 'filled';
this.selectedValue = '';
this.animationDelay = '2s';
this.allClasses = '';
this.handleChipClick = (event) => {
if (this.variant === 'disabled')
return;
const chip = event.target;
const chipName = chip.getAttribute('name');
if (this.selectedValue === chipName)
return; // Prevent deselecting on second click
this.selectedValue = chipName;
this.updateChipSelections();
this.updateSlider();
};
this.initializeChips = (event) => {
const assignedElements = event.target.assignedElements();
assignedElements.forEach((el) => {
const chip = el;
// Set initial state based on selectedValue
if (!this.selectedValue && assignedElements.length > 0) {
this.selectedValue = assignedElements[0].getAttribute('name');
}
chip.setAttribute('selected', chip.getAttribute('name') === this.selectedValue ? 'true' : 'false');
if (!chip.hasAttribute('listener-added')) {
chip.addEventListener('click', this.handleChipClick);
chip.setAttribute('listener-added', 'true'); // Prevent duplicate listeners
}
});
// Update slider after chips are initialized
setTimeout(() => this.updateSlider(), 0);
};
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
componentDidLoad() {
// Initialize with first chip selected if none is selected
setTimeout(() => {
if (!this.selectedValue) {
const chips = this.getChipElements();
if (chips.length > 0) {
const firstChip = chips[0];
this.selectedValue = firstChip.getAttribute('name');
this.updateChipSelections();
this.updateSlider();
}
}
}, 0);
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
getChipElements() {
const slot = this.hostElement.shadowRoot.querySelector('slot');
return slot ? Array.from(slot.assignedElements()) : [];
}
selectedValueChanged() {
this.updateChipSelections();
this.updateSlider();
}
updateChipSelections() {
const chips = this.getChipElements();
chips.forEach((chip) => {
chip.setAttribute('selected', chip.getAttribute('name') === this.selectedValue ? 'true' : 'false');
});
}
updateSlider() {
if (!this.sliderElement)
return;
const chips = this.getChipElements();
const activeChip = chips.find(chip => chip.getAttribute('name') === this.selectedValue);
if (!activeChip)
return;
// Calculate position and width for the slider
const containerRect = this.hostElement.shadowRoot.querySelector('.segmented-chips-container').getBoundingClientRect();
const activeRect = activeChip.getBoundingClientRect();
// Set the slider width and position
const width = activeRect.width;
const left = activeRect.left - containerRect.left;
this.sliderElement.style.width = `${width}px`;
this.sliderElement.style.left = `${left}px`;
this.sliderElement.textContent = activeChip.textContent;
}
render() {
return (h("div", { key: 'c68011b282c2dff7ac55ed691fcdc8677744b481', class: `segmented-chips-container ${this.variant} ${this.allClasses}`, role: "radiogroup" }, h("slot", { key: 'a5d4d5d53c128cc43d2ae1276e1a53d9d02d43b0', onSlotchange: this.initializeChips }), h("div", { key: 'dc6693efaa975161f1b1efd3904baae68738567f', class: "slider", ref: (el) => this.sliderElement = el })));
}
static get is() { return "gov-segmented-chips"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-segmented-chips.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-segmented-chips.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": false
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'filled' | 'outlined' | 'disabled'",
"resolved": "\"disabled\" | \"filled\" | \"outlined\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "variant",
"reflect": false,
"defaultValue": "'filled'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"selectedValue": {}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}, {
"propName": "selectedValue",
"methodName": "selectedValueChanged"
}];
}
}
//# sourceMappingURL=gov-segmented-chips.js.map