JezK

Edit File: sc-button-group.entry.js.map

{"file":"sc-button-group.entry.js","mappings":"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","names":[],"sources":["src/components/ui/sc-button-group/sc-button-group.scss?tag=sc-button-group&encapsulation=shadow","src/components/ui/sc-button-group/sc-button-group.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --gap: var(--sc-spacing-small);\n}\n.button-group {\n display: flex;\n flex-wrap: wrap;\n\n &--separate {\n gap: var(--gap);\n }\n\n\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sc-button-group',\n styleUrl: 'sc-button-group.scss',\n shadow: true,\n})\nexport class ScButtonGroup {\n @Element() el: HTMLScButtonGroupElement;\n\n @Prop() label: string;\n @Prop() separate: boolean;\n\n findButton(el: HTMLElement) {\n return ['sc-button'].includes(el.tagName.toLowerCase()) ? el : el.querySelector(['sc-button'].join(','));\n }\n\n handleFocus(event: Event) {\n const button = this.findButton(event.target as HTMLElement);\n button?.classList.add('sc-button-group__button--focus');\n }\n\n handleBlur(event: Event) {\n const button = this.findButton(event.target as HTMLElement);\n button?.classList.remove('sc-button-group__button--focus');\n }\n\n handleMouseOver(event: Event) {\n const button = this.findButton(event.target as HTMLElement);\n button?.classList.add('sc-button-group__button--hover');\n }\n\n handleMouseOut(event: Event) {\n const button = this.findButton(event.target as HTMLElement);\n button?.classList.remove('sc-button-group__button--hover');\n }\n\n handleSlotChange() {\n if (this.separate) return;\n const slottedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements({ flatten: true });\n\n slottedElements.forEach((el: HTMLElement) => {\n const slotted = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const index = slotted.assignedNodes().indexOf(el);\n const button = this.findButton(el);\n\n if (button !== null || !this.separate) {\n button.classList.add('sc-button-group__button');\n button.classList.toggle('sc-button-group__button--first', index === 0);\n button.classList.toggle('sc-button-group__button--inner', index > 0 && index < slottedElements.length - 1);\n button.classList.toggle('sc-button-group__button--last', index === slottedElements.length - 1);\n }\n });\n }\n\n render() {\n return (\n <sc-form-control\n part=\"base\"\n class={{\n 'button-group': true,\n 'button-group--separate': this.separate,\n }}\n role=\"group\"\n aria-label={this.label}\n onFocusout={e => this.handleBlur(e)}\n onFocusin={e => this.handleFocus(e)}\n onMouseOver={e => this.handleMouseOver(e)}\n onMouseOut={e => this.handleMouseOut(e)}\n label={this.label}\n >\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n </sc-form-control>\n );\n }\n}\n"],"version":3}