npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.1a260b6 → 0.0.0-insider.1c3fe8c - Mend

@six-group/ui-library 0.0.0-insider.1a260b6 → 0.0.0-insider.1c3fe8c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1841) hide show

package/dist/cjs/six-range.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-range.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-range.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-range.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"six-range.entry.cjs.js","sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /** The input's name attribute. */\n @Prop() name = '';\n\n /** The input's value attribute. */\n @Prop({ mutable: true }) value = 0;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** The range's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Set to true to disable the input. */\n @Prop() disabled = false;\n\n /** The label text. */\n @Prop() label = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** The input's min attribute. */\n @Prop() min = 0;\n\n /** The input's max attribute. */\n @Prop() max = 100;\n\n /** The input's step attribute. */\n @Prop() step = 1;\n\n /** The preferred placedment of the tooltip. */\n @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n /** A function used to format the tooltip's value. */\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /** Emitted when the control's value changes. */\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /** Sets focus on the input. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /** Removes focus from the input. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /**\n * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n */\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /**\n * For Firefox this functionality is not needed because it is supported by standard CSS.\n */\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) * 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"names":["EventListeners","hasSlot","h","FormControl"],"mappings":"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"}

package/dist/cjs/six-rating.cjs.entry.js ADDED Viewed

@@ -0,0 +1,126 @@
+'use strict';
+var index = require('./index-C8rK7OAe.js');
+var formControl = require('./form-control-CX8QRq9v.js');
+var slot = require('./slot-DBK7c7jH.js');
+const sixRatingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--six-rating-color:var(--six-color-web-rock-500);--six-rating-color-active:var(--six-color-warning-700);--six-rating-color-disabled-opacity:0.4;display:block}.six-rating{display:inline-flex;flex-direction:row;user-select:none;cursor:pointer}.six-rating--readonly{cursor:unset}.six-rating--disabled{cursor:not-allowed;opacity:var(--six-rating-color-disabled-opacity)}.six-rating__star{color:var(--six-rating-color)}.six-rating__star--filled{color:var(--six-rating-color-active)}";
+const SixRating = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixBlur = index.createEvent(this, "six-rating-blur");
+        this.sixChange = index.createEvent(this, "six-rating-change");
+        this.sixFocus = index.createEvent(this, "six-rating-focus");
+        /** The rating's name attribute. */
+        this.name = '';
+        /** The rating's value attribute. */
+        this.value = 0;
+        /** Set to true to disable the rating. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Maximum number of stars. Default is 5 */
+        this.max = 5;
+        /** Size of the stars */
+        this.size = 'medium';
+        /** If its readonly */
+        this.readonly = false;
+        /** The rating's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        // --
+        this.hasFocus = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        this.hoveredValue = this.value;
+        this.ratingId = `rating-${++SixRating.id}`;
+        this.labelId = `rating-label-${SixRating.id}`;
+        this.errorTextId = `input-error-text-${SixRating.id}`;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = slot.hasSlot(this.el, 'label');
+            this.hasErrorSlot = slot.hasSlot(this.el, 'error-text');
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit(this.value);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                if (this.hoveredValue > 0) {
+                    this.hoveredValue = this.hoveredValue - 1;
+                    this.value = this.hoveredValue;
+                }
+            }
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                if (this.hoveredValue < this.max) {
+                    this.hoveredValue = this.hoveredValue + 1;
+                }
+            }
+        };
+    }
+    handleValueChange() {
+        this.sixChange.emit(this.value);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    renderStars() {
+        return Array.from({ length: this.max }, (_, i) => {
+            const handleEvent = (event) => {
+                if (this.readonly || this.disabled) {
+                    return;
+                }
+                switch (event.type) {
+                    case 'mouseover':
+                        this.hoveredValue = i + 1;
+                        break;
+                    case 'mouseout':
+                        this.hoveredValue = this.value;
+                        break;
+                    case 'click':
+                        this.value = this.hoveredValue;
+                        break;
+                }
+            };
+            return (index.h("six-icon", { class: {
+                    'six-rating__star': true,
+                    'six-rating__star--filled': i < this.hoveredValue,
+                }, filled: true, size: this.size, onMouseOver: handleEvent, onMouseOut: handleEvent, onClick: handleEvent }, "star_rate"));
+        });
+    }
+    render() {
+        return (index.h(formControl.FormControl, { key: '9ba64e8020d50b0685551b163bbdc9fe5ffcc473', inputId: this.ratingId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, helpText: this.helpText, hasErrorTextSlot: this.hasErrorSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("div", { key: 'c7e8bd81467b9dc1eef04266502e43ca91192732', part: "base", class: {
+                'six-rating': true,
+                'six-rating--readonly': this.readonly,
+                'six-rating--disabled': this.disabled,
+            }, role: "slider", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabindex: this.disabled ? '-1' : '0', onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, this.renderStars(), index.h("input", { key: 'c7f6e028073845efed162b0c13942375941f5549', part: "input", id: this.ratingId, type: "hidden", max: this.max, min: 0, name: this.name, value: this.value, disabled: this.disabled, required: this.required, role: "slider", "aria-labelledby": this.labelId }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+SixRating.id = 0;
+SixRating.style = sixRatingCss;
+exports.six_rating = SixRating;
+//# sourceMappingURL=six-rating.entry.cjs.js.map
+//# sourceMappingURL=six-rating.cjs.entry.js.map

package/dist/cjs/six-rating.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"six-rating.entry.cjs.js","mappings":"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","names":["hasSlot","h","FormControl"],"sources":["src/components/six-rating/six-rating.scss?tag=six-rating&encapsulation=shadow","src/components/six-rating/six-rating.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --six-rating-color: var(--six-color-web-rock-500);\n --six-rating-color-active: var(--six-color-warning-700);\n --six-rating-color-disabled-opacity: 0.4;\n\n display: block;\n}\n\n.six-rating {\n display: inline-flex;\n flex-direction: row;\n user-select: none;\n cursor: pointer;\n\n &--readonly {\n cursor: unset;\n }\n\n &--disabled {\n cursor: not-allowed;\n opacity: var(--six-rating-color-disabled-opacity);\n }\n\n &__star {\n color: var(--six-rating-color);\n\n &--filled {\n color: var(--six-rating-color-active);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n@Component({\n tag: 'six-rating',\n styleUrl: 'six-rating.scss',\n shadow: true,\n})\nexport class SixRating {\n @Element() el!: HTMLSixRatingElement;\n\n /** The rating's name attribute. */\n @Prop() name = '';\n\n /** The rating's value attribute. */\n @Prop({ mutable: true }) value: number = 0;\n\n /** Set to true to disable the rating. */\n @Prop() disabled = false;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** The label text. */\n @Prop() label: string = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** Maximum number of stars. Default is 5 */\n @Prop() max: number = 5;\n\n /** Size of the stars */\n @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n /** If its readonly */\n @Prop() readonly: boolean = false;\n\n /** The rating's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-rating-blur' }) sixBlur!: EventEmitter<number>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-rating-change' }) sixChange!: EventEmitter<number>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-rating-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n // --\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() hoveredValue = this.value;\n\n private static id: number = 0;\n\n private ratingId = `rating-${++SixRating.id}`;\n private labelId = `rating-label-${SixRating.id}`;\n private errorTextId = `input-error-text-${SixRating.id}`;\n\n @Watch('value')\n handleValueChange() {\n this.sixChange.emit(this.value);\n }\n\n connectedCallback() {\n this.el.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n this.el.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.el, 'label');\n this.hasErrorSlot = hasSlot(this.el, 'error-text');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.value);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n if (this.hoveredValue > 0) {\n this.hoveredValue = this.hoveredValue - 1;\n this.value = this.hoveredValue;\n }\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n if (this.hoveredValue < this.max) {\n this.hoveredValue = this.hoveredValue + 1;\n }\n }\n };\n\n private renderStars() {\n return Array.from({ length: this.max }, (_, i) => {\n const handleEvent = (event: Event) => {\n if (this.readonly || this.disabled) {\n return;\n }\n switch (event.type) {\n case 'mouseover':\n this.hoveredValue = i + 1;\n break;\n case 'mouseout':\n this.hoveredValue = this.value;\n break;\n case 'click':\n this.value = this.hoveredValue;\n break;\n }\n };\n\n return (\n <six-icon\n class={{\n 'six-rating__star': true,\n 'six-rating__star--filled': i < this.hoveredValue,\n }}\n filled\n size={this.size}\n onMouseOver={handleEvent}\n onMouseOut={handleEvent}\n onClick={handleEvent}\n >\n star_rate\n </six-icon>\n );\n });\n }\n\n render() {\n return (\n <FormControl\n inputId={this.ratingId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n helpText={this.helpText}\n hasErrorTextSlot={this.hasErrorSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n 'six-rating': true,\n 'six-rating--readonly': this.readonly,\n 'six-rating--disabled': this.disabled,\n }}\n role=\"slider\"\n aria-label={this.label}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabindex={this.disabled ? '-1' : '0'}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n >\n {this.renderStars()}\n\n <input\n part=\"input\"\n id={this.ratingId}\n type=\"hidden\"\n max={this.max}\n min={0}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n role=\"slider\"\n aria-labelledby={this.labelId}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-rating.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"six-rating.entry.cjs.js","sources":["src/components/six-rating/six-rating.scss?tag=six-rating&encapsulation=shadow","src/components/six-rating/six-rating.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --six-rating-color: var(--six-color-web-rock-500);\n --six-rating-color-active: var(--six-color-warning-700);\n --six-rating-color-disabled-opacity: 0.4;\n\n display: block;\n}\n\n.six-rating {\n display: inline-flex;\n flex-direction: row;\n user-select: none;\n cursor: pointer;\n\n &--readonly {\n cursor: unset;\n }\n\n &--disabled {\n cursor: not-allowed;\n opacity: var(--six-rating-color-disabled-opacity);\n }\n\n &__star {\n color: var(--six-rating-color);\n\n &--filled {\n color: var(--six-rating-color-active);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n@Component({\n tag: 'six-rating',\n styleUrl: 'six-rating.scss',\n shadow: true,\n})\nexport class SixRating {\n @Element() el!: HTMLSixRatingElement;\n\n /** The rating's name attribute. */\n @Prop() name = '';\n\n /** The rating's value attribute. */\n @Prop({ mutable: true }) value: number = 0;\n\n /** Set to true to disable the rating. */\n @Prop() disabled = false;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** The label text. */\n @Prop() label: string = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** Maximum number of stars. Default is 5 */\n @Prop() max: number = 5;\n\n /** Size of the stars */\n @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n /** If its readonly */\n @Prop() readonly: boolean = false;\n\n /** The rating's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-rating-blur' }) sixBlur!: EventEmitter<number>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-rating-change' }) sixChange!: EventEmitter<number>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-rating-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n // --\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() hoveredValue = this.value;\n\n private static id: number = 0;\n\n private ratingId = `rating-${++SixRating.id}`;\n private labelId = `rating-label-${SixRating.id}`;\n private errorTextId = `input-error-text-${SixRating.id}`;\n\n @Watch('value')\n handleValueChange() {\n this.sixChange.emit(this.value);\n }\n\n connectedCallback() {\n this.el.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n this.el.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.el, 'label');\n this.hasErrorSlot = hasSlot(this.el, 'error-text');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.value);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n if (this.hoveredValue > 0) {\n this.hoveredValue = this.hoveredValue - 1;\n this.value = this.hoveredValue;\n }\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n if (this.hoveredValue < this.max) {\n this.hoveredValue = this.hoveredValue + 1;\n }\n }\n };\n\n private renderStars() {\n return Array.from({ length: this.max }, (_, i) => {\n const handleEvent = (event: Event) => {\n if (this.readonly || this.disabled) {\n return;\n }\n switch (event.type) {\n case 'mouseover':\n this.hoveredValue = i + 1;\n break;\n case 'mouseout':\n this.hoveredValue = this.value;\n break;\n case 'click':\n this.value = this.hoveredValue;\n break;\n }\n };\n\n return (\n <six-icon\n class={{\n 'six-rating__star': true,\n 'six-rating__star--filled': i < this.hoveredValue,\n }}\n filled\n size={this.size}\n onMouseOver={handleEvent}\n onMouseOut={handleEvent}\n onClick={handleEvent}\n >\n star_rate\n </six-icon>\n );\n });\n }\n\n render() {\n return (\n <FormControl\n inputId={this.ratingId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n helpText={this.helpText}\n hasErrorTextSlot={this.hasErrorSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n 'six-rating': true,\n 'six-rating--readonly': this.readonly,\n 'six-rating--disabled': this.disabled,\n }}\n role=\"slider\"\n aria-label={this.label}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabindex={this.disabled ? '-1' : '0'}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n >\n {this.renderStars()}\n\n <input\n part=\"input\"\n id={this.ratingId}\n type=\"hidden\"\n max={this.max}\n min={0}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n role=\"slider\"\n aria-labelledby={this.labelId}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"names":["hasSlot","h","FormControl"],"mappings":"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"}

package/dist/cjs/six-root.cjs.entry.js CHANGED Viewed

@@ -1,26 +1,28 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-417a06c8.js');
+var index = require('./index-C8rK7OAe.js');
 const sixRootCss = ":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";
-const SixRootStyle0 = sixRootCss;
 const SixRoot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Defines whether the content section should be padded */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.padded = true;
+        /** Defines the stage of the application*/
         this.stage = null;
+        /** Defines the version of the application*/
         this.version = '';
     }
     render() {
-        return (index.h("host", { key: 'afa4ab3690aae98f49bc74f2f78fbc7d7c804cde', class: "six-root" }, index.h("header", { key: '256dc2baecc083a3fe7fade7f0238d149123c465', part: "header" }, this.stage && index.h("six-stage-indicator", { key: 'f53065557a13d9513cc654306fd6e17eea28f8af', stage: this.stage }, this.version), index.h("slot", { key: '4458f26a10c2c550b5d3ad1adbca8067e1376cab', name: "header" })), index.h("nav", { key: '86824c3286c747d3bd8e235af341ed5671c24ec4', class: "six-root__left-sidebar", part: "left-sidebar" }, index.h("slot", { key: '7eac3c269e294cbd8f0c98f045c8791be10b8aef', name: "left-sidebar" })), index.h("main", { key: 'cf1b6c43cd996f0673e8990a6d78409af51eea41', part: "main" }, index.h("div", { key: 'f95ec5b509e1834cb5c0f8abaac498409753105f', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, index.h("slot", { key: 'd13f71d95d83748eedf59b43334892e2fd842e7c', name: "main" })), index.h("div", { key: '2c76a92a46db1d09cea6b09eea6bc8a7c81b6536', class: "six-root__footer" }, index.h("slot", { key: '9d0aa991bcb43a360c770c9d63b404799dfb94ff', name: "footer" }))), index.h("nav", { key: '7af5df12fe56e6414627608fd704507d949ce1ad', class: "six-root__right-sidebar", part: "right-sidebar" }, index.h("slot", { key: '621b9a7c7d9db229a9bb8e82680ee2d41e245883', name: "right-sidebar" }))));
+        return (index.h("host", { key: '045dca1aa5b75c3b3c600bd569d73747ebd21c38', class: "six-root" }, index.h("header", { key: '19430d1e5f9060152c795ed4548b4774a43f34e8', part: "header" }, this.stage && index.h("six-stage-indicator", { key: '7d79552068cca2510da31c67134160da554d94c4', stage: this.stage }, this.version), index.h("slot", { key: '661db283a073f9772eb4bb6a9ea0fb9c3492193c', name: "header" })), index.h("nav", { key: 'ac94418c7b7fca25aa4b99725bab442dbd3b1536', class: "six-root__left-sidebar", part: "left-sidebar" }, index.h("slot", { key: '98995975b462b8954fb40da95602cd6198c7ca18', name: "left-sidebar" })), index.h("main", { key: 'bf5be0209eea18096e1e6f18dcb0e5ad9fef73c0', part: "main" }, index.h("div", { key: '25b4d0cbc135d54ff2576f853f3ff3dd8fec0d3b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, index.h("slot", { key: '497b196c44123903a2024931f6ac860d728e4880', name: "main" })), index.h("div", { key: '6807b1db1e0da24e73a239ee9ef51ad3115eee52', class: "six-root__footer" }, index.h("slot", { key: 'af2cef1fbbcdfa6fbf267a2bc88b25e3fe7ddb42', name: "footer" }))), index.h("nav", { key: 'ab71c8248a17f4fe4db6667ea1fb401528372ac1', class: "six-root__right-sidebar", part: "right-sidebar" }, index.h("slot", { key: 'ed718d2e22f2607f6c6b7a1b689b5b3a55fa2e79', name: "right-sidebar" }))));
     }
     get host() { return index.getElement(this); }
 };
-SixRoot.style = SixRootStyle0;
+SixRoot.style = sixRootCss;
 exports.six_root = SixRoot;
+//# sourceMappingURL=six-root.entry.cjs.js.map
 //# sourceMappingURL=six-root.cjs.entry.js.map

package/dist/cjs/six-root.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-root.entry.cjs.js","mappings":"~~;;;;;;~~AAAA,MAAM,UAAU,GAAG,klBAAklB,~~CAAC~~;~~AACtmB~~,~~sBAAe~~,~~UAAU;;MCkBZ~~,~~OAAO;;;sBAKD~~,IAAI~~;qBAGM~~,IAAI~~;uBAGb~~,EAAE~~;;IAEpB~~,MAAM;QACJ,QACEA,~~mEAAM~~,KAAK,EAAC,UAAU,~~IACpBA~~,~~qEAAQ~~,IAAI,EAAC,QAAQ,~~IAClB~~,IAAI,CAAC,KAAK,IAAIA,~~kFAAqB~~,KAAK,EAAE,IAAI,CAAC,KAAK,~~IAAG~~,IAAI,CAAC,OAAO,CAAuB,EAC3FA,~~mEAAM~~,IAAI,EAAC,QAAQ,~~GAAG~~,CACf,EACTA,~~kEAAK~~,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,~~IACrDA~~,~~mEAAM~~,IAAI,EAAC,cAAc,~~GAAG~~,CACxB,EACNA,~~mEAAM~~,IAAI,EAAC,MAAM,~~IACfA~~,~~kEAAK~~,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,~~IACvGA~~,~~mEAAM~~,IAAI,EAAC,MAAM,~~GAAG~~,CAChB,EACNA,~~kEAAK~~,KAAK,EAAC,kBAAkB,~~IAC3BA~~,~~mEAAM~~,IAAI,EAAC,QAAQ,~~GAAG~~,CAClB,CACD,EACPA,~~kEAAK~~,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,~~IACvDA~~,~~mEAAM~~,IAAI,EAAC,eAAe,GAAG,CACzB,CACD~~,EACP;KACH;;;;;;;~~","names":["h"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n overflow: hidden;\n height: inherit;\n}\n\n.six-root {\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n height: 100%;\n\n &__container {\n &--padded {\n padding: var(--six-spacing-xxx-large);\n }\n }\n\n &__left-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 1 / 2;\n }\n\n &__right-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 3 / 4;\n }\n\n nav {\n overflow: hidden;\n }\n}\n\nheader {\n grid-column: 1 / 4;\n position: sticky;\n top: 0;\n z-index: var(--six-z-index-header);\n // border fix\n margin-right: 2px;\n}\n\nmain {\n height: 100%;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n grid-column: 2 / 3;\n overflow: auto;\n}\n\nfooter {\n grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/*\n @since 1.0\n * @status stable\n \n @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n /\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /* Defines whether the content section should be padded /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /* Defines the stage of the application/\n @Prop() stage: StageType = null;\n\n /* Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-root.entry.cjs.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCmBxlB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUU,QAAA,IAAM,CAAA,MAAA,GAAG,IAAI;;AAGb,QAAA,IAAK,CAAA,KAAA,GAAc,IAAI;;AAGvB,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE;AA0BrB;IAxBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,EACpBA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAClB,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAAG,IAAI,CAAC,OAAO,CAAuB,EAC3FA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACf,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,EAAA,EACrDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EACNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACfA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,EAAA,EACvGA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACD,EACPA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,EAAA,EACvDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD;;;;;;;;","names":["h"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n overflow: hidden;\n height: inherit;\n}\n\n.six-root {\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n height: 100%;\n\n &__container {\n &--padded {\n padding: var(--six-spacing-xxx-large);\n }\n }\n\n &__left-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 1 / 2;\n }\n\n &__right-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 3 / 4;\n }\n\n nav {\n overflow: hidden;\n }\n}\n\nheader {\n grid-column: 1 / 4;\n position: sticky;\n top: 0;\n z-index: var(--six-z-index-header);\n // border fix\n margin-right: 2px;\n}\n\nmain {\n height: 100%;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n grid-column: 2 / 3;\n overflow: auto;\n}\n\nfooter {\n grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/*\n @since 1.0\n * @status stable\n \n @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n /\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /* Defines whether the content section should be padded /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /* Defines the stage of the application/\n @Prop() stage: StageType = null;\n\n /* Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-root.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"six-root.entry.cjs.js","sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n overflow: hidden;\n height: inherit;\n}\n\n.six-root {\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n height: 100%;\n\n &__container {\n &--padded {\n padding: var(--six-spacing-xxx-large);\n }\n }\n\n &__left-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 1 / 2;\n }\n\n &__right-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 3 / 4;\n }\n\n nav {\n overflow: hidden;\n }\n}\n\nheader {\n grid-column: 1 / 4;\n position: sticky;\n top: 0;\n z-index: var(--six-z-index-header);\n // border fix\n margin-right: 2px;\n}\n\nmain {\n height: 100%;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n grid-column: 2 / 3;\n overflow: auto;\n}\n\nfooter {\n grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /** Defines whether the content section should be padded */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /** Defines the stage of the application*/\n @Prop() stage: StageType = null;\n\n /** Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCmBxlB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUU,QAAA,IAAM,CAAA,MAAA,GAAG,IAAI;;AAGb,QAAA,IAAK,CAAA,KAAA,GAAc,IAAI;;AAGvB,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE;AA0BrB;IAxBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,EACpBA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAClB,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAAG,IAAI,CAAC,OAAO,CAAuB,EAC3FA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACf,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,EAAA,EACrDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EACNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACfA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,EAAA,EACvGA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACD,EACPA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,EAAA,EACvDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD;;;;;;;;"}

package/dist/cjs/six-search-field.cjs.entry.js CHANGED Viewed

@@ -1,29 +1,29 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C8rK7OAe.js');
+var executionControl = require('./execution-control-oU0MWBWI.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
-const index = require('./index-417a06c8.js');
-const executionControl = require('./execution-control-d728da70.js');
-const eventListeners = require('./event-listeners-9fb878f1.js');
-const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
-const SixSearchFieldStyle0 = sixSearchFieldCss;
+const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
 const SixSearchField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.searchFieldChange = index.createEvent(this, "six-search-field-change", 7);
+        this.searchFieldChange = index.createEvent(this, "six-search-field-change");
+        /** Debounce time in milliseconds, default is 300 ms */
+        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+        /** Set to true to disable the input. */
+        this.disabled = false;
+        /** The input's value attribute. */
+        this.value = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
         this.eventListeners = new eventListeners.EventListeners();
         this.handleInputChange = () => {
             if (this.inputElement != null) {
                 this.searchFieldChange.emit({ value: this.inputElement.value });
             }
         };
-        this.placeholder = undefined;
-        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
-        this.disabled = false;
-        this.value = '';
-        this.clearable = false;
     }
     handleValueChange() {
         if (this.inputElement != null) {
@@ -46,14 +46,15 @@ const SixSearchField = class {
         this.eventListeners.removeAll();
     }
     render() {
-        return (index.h("div", { key: '8ee6b08e385e3974b05f7ef53b6ea4fe36a1592d', class: "search-box" }, index.h("six-input", { key: 'e6be5b0097a8218a53f624680af8d9158fd6fc9a', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, index.h("six-icon", { key: 'd1a516a60040f28d58c0e688ff6fb0722633ccf1', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), index.h("slot", { key: 'da46accd23e5efe5741f917aa6de64e0ddc08e19' })));
+        return (index.h("div", { key: '9172dbb88cc35be7390727842483a74241e1330f', class: "search-box" }, index.h("six-input", { key: '44c1d20960202129a19cb412bb67823ac927ad98', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, index.h("six-icon", { key: 'af8431bd85223a37fee7e17d51288313c4494fed', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), index.h("slot", { key: '5d4f9bf280fc5fe215c268818b641753bb786869' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]
     }; }
 };
-SixSearchField.style = SixSearchFieldStyle0;
+SixSearchField.style = sixSearchFieldCss;
 exports.six_search_field = SixSearchField;
+//# sourceMappingURL=six-search-field.entry.cjs.js.map
 //# sourceMappingURL=six-search-field.cjs.entry.js.map

package/dist/cjs/six-search-field.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-search-field.entry.cjs.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,iBAAiB,GAAG,~~oNAAoN~~,~~CAAC~~;~~AAC/O~~,~~6BAAe~~,~~iBAAiB;;MCmBnB~~,~~cAAc~~;;;;~~QAqBjB~~,~~mBAAc~~,GAAG,~~IAAIA~~,~~6BAAc~~,EAAE,~~CAAC~~;~~QAEtC~~,~~sBAAiB~~,GAAG;~~YAC1B~~,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;~~gBAC7B~~,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,~~CAAC~~;~~aACjE~~;~~SACF~~,~~CAAC;;wBAtBkCC~~,~~sCAAqB~~;~~wBAGrB~~,~~KAAK;qBAGR~~,~~EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,~~IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,~~CAAC;SACtC;KACF;IAED~~,~~gBAAgB~~;~~QACd~~,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE~~,OAAO~~;~~QAEtC~~,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAEC,yBAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC~~,CAAC~~;~~QAC/G~~,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;~~YACjE~~,MAAM,aAAa,GAAG,KAAsB~~,CAAC~~;~~YAC7C~~,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE,~~CAAC;aAC1B;SACF~~,CAAC,~~CAAC;KACJ;IAED~~,~~oBAAoB~~;~~QAClB~~,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,~~CAAC;KACjC;IAED~~,~~MAAM~~;QACJ,QACEC,~~kEAAK~~,KAAK,EAAC,YAAY,~~IACrBA~~,~~wEACE~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,~~IAEzBA~~,~~uEAAU~~,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZA,~~oEAAQ~~,CACJ~~,EACN;KACH;;;;;;;;;~~","names":["~~EventListeners~~","~~DEFAULT_DEBOUNCE_FAST~~","debounce","h"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.search-box {\n z-index: var(--six-z-index-search-field);\n\n &__icon {\n cursor: pointer;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n value: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the results below the search component.\n /\n\n@Component({\n tag: 'six-search-field',\n styleUrl: 'six-search-field.scss',\n shadow: true,\n})\nexport class SixSearchField {\n /* The input's placeholder text. /\n @Prop() placeholder?: string;\n\n /* Debounce time in milliseconds, default is 300 ms /\n @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n /* Set to true to disable the input. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The input's value attribute. /\n @Prop({ reflect: true }) value = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Emitted when a search is triggered */\n @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n private inputElement?: HTMLSixInputElement;\n\n private eventListeners = new EventListeners();\n\n private handleInputChange = () => {\n if (this.inputElement != null) {\n this.searchFieldChange.emit({ value: this.inputElement.value });\n }\n };\n\n @Watch('value')\n handleValueChange() {\n if (this.inputElement != null) {\n this.inputElement.value = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n\n this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n if (keyboardEvent.key === 'Enter') {\n // emit immediately\n this.handleInputChange();\n }\n });\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n return (\n <div class=\"search-box\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n placeholder={this.placeholder}\n value={this.value}\n disabled={this.disabled}\n clearable={this.clearable}\n >\n <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n search\n </six-icon>\n </six-input>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-search-field.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+UAA+U;;MCoB5V,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAGA,sCAAqB;;AAGhC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAG3B,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAOjB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAIC,6BAAc,EAAE;AAErC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AAC/B,YAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;AAC7B,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;;AAEnE,SAAC;AA4CF;IAzCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;;IAIxC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE;QAE/B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAEC,yBAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9G,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,KAAI;YACrE,MAAM,aAAa,GAAG,KAAsB;AAC5C,YAAA,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzBA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;","names":["DEFAULT_DEBOUNCE_FAST","EventListeners","debounce","h"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.search-box {\n z-index: var(--six-z-index-search-field);\n\n &__icon {\n cursor: pointer;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n value: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the results below the search component.\n /\n\n@Component({\n tag: 'six-search-field',\n styleUrl: 'six-search-field.scss',\n shadow: true,\n})\nexport class SixSearchField {\n /* The input's placeholder text. /\n @Prop() placeholder?: string;\n\n /* Debounce time in milliseconds, default is 300 ms /\n @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n /* Set to true to disable the input. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The input's value attribute. /\n @Prop({ reflect: true }) value = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Emitted when a search is triggered */\n @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n private inputElement?: HTMLSixInputElement;\n\n private eventListeners = new EventListeners();\n\n private handleInputChange = () => {\n if (this.inputElement != null) {\n this.searchFieldChange.emit({ value: this.inputElement.value });\n }\n };\n\n @Watch('value')\n handleValueChange() {\n if (this.inputElement != null) {\n this.inputElement.value = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n\n this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n if (keyboardEvent.key === 'Enter') {\n // emit immediately\n this.handleInputChange();\n }\n });\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n return (\n <div class=\"search-box\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n placeholder={this.placeholder}\n value={this.value}\n disabled={this.disabled}\n clearable={this.clearable}\n >\n <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n search\n </six-icon>\n </six-input>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-search-field.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"six-search-field.entry.cjs.js","sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.search-box {\n z-index: var(--six-z-index-search-field);\n\n &__icon {\n cursor: pointer;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n tag: 'six-search-field',\n styleUrl: 'six-search-field.scss',\n shadow: true,\n})\nexport class SixSearchField {\n /** The input's placeholder text. */\n @Prop() placeholder?: string;\n\n /** Debounce time in milliseconds, default is 300 ms */\n @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n /** Set to true to disable the input. */\n @Prop({ reflect: true }) disabled = false;\n\n /** The input's value attribute. */\n @Prop({ reflect: true }) value = '';\n\n /** Set to true to add a clear button when the input is populated. */\n @Prop() clearable = false;\n\n /** Emitted when a search is triggered */\n @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n private inputElement?: HTMLSixInputElement;\n\n private eventListeners = new EventListeners();\n\n private handleInputChange = () => {\n if (this.inputElement != null) {\n this.searchFieldChange.emit({ value: this.inputElement.value });\n }\n };\n\n @Watch('value')\n handleValueChange() {\n if (this.inputElement != null) {\n this.inputElement.value = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n\n this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n if (keyboardEvent.key === 'Enter') {\n // emit immediately\n this.handleInputChange();\n }\n });\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n return (\n <div class=\"search-box\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n placeholder={this.placeholder}\n value={this.value}\n disabled={this.disabled}\n clearable={this.clearable}\n >\n <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n search\n </six-icon>\n </six-input>\n <slot />\n </div>\n );\n }\n}\n"],"names":["DEFAULT_DEBOUNCE_FAST","EventListeners","debounce","h"],"mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+UAA+U;;MCoB5V,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAGA,sCAAqB;;AAGhC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAG3B,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAOjB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAIC,6BAAc,EAAE;AAErC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AAC/B,YAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;AAC7B,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;;AAEnE,SAAC;AA4CF;IAzCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;;IAIxC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE;QAE/B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAEC,yBAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9G,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,KAAI;YACrE,MAAM,aAAa,GAAG,KAAsB;AAC5C,YAAA,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzBA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;"}