npm - @six-group/ui-library - Versions diffs - 4.0.2 → 4.0.4 - Mend

@six-group/ui-library 4.0.2 → 4.0.4

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 (358) hide show

package/dist/components/set-attributes2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"set-attributes2.js","mappings":";;MAKa,aAAa;;;;iBAIR,EAAE;;EAElB,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAGD,YAAY;IACV,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAEO,WAAW;IACjB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAoC,CAAC;IAE5D,IAAI,QAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KAAK,UAAU,EAAE;MAChD,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,CAAC;IAE5C,IAAI,CAAC,KAAK,EAAE;MACV,OAAO;KACR;IAED,MAAM,KAAK,GAAG;;MAEZ,SAAS,EAAE,CAAC,GAAW,KAAK,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC;MACtD,OAAO,EAAE,CAAC,GAAW,EAAE,KAAc;QACnC,IAAI,KAAK,IAAI,IAAI,EAAE;UACjB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SAC7B;aAAM;UACL,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAC5B;OACF;MACD,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;MACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;MACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACvF,CAAC;IAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;;;MAGrD,KAAK,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;KACjC;GACF;EAED,MAAM;IACJ,OAAO,eAAQ,CAAC;GACjB~~;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/wrappers/set-attributes/set-attributes.tsx"],"sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n tag: 'set-attributes',\n})\nexport class SetAttributes {\n @Element() host!: HTMLSetAttributesElement;\n\n /** Attributes map */\n @Prop() value = {};\n\n componentWillLoad() {\n this.injectAttrs();\n }\n\n @Watch('value')\n attrsUpdated() {\n this.injectAttrs();\n }\n\n private injectAttrs() {\n const slot = this.host.firstElementChild as HTMLSlotElement;\n\n if (typeof slot?.assignedElements !== 'function') {\n return;\n }\n\n const child = slot.assignedElements().pop();\n\n if (!child) {\n return;\n }\n\n const types = {\n // no need for function and bigint\n undefined: (key: string) => child.removeAttribute(key),\n boolean: (key: string, value: unknown) => {\n if (value != null) {\n child.setAttribute(key, '');\n } else {\n child.removeAttribute(key);\n }\n },\n number: (key: string, value: string) => child.setAttribute(key, value),\n string: (key: string, value: string) => child.setAttribute(key, value),\n object: (key: string, value: string) => child.setAttribute(key, JSON.stringify(value)),\n };\n\n for (const [key, value] of Object.entries(this.value)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n types[typeof value](key, value);\n }\n }\n\n render() {\n return <slot />;\n }\n}\n"],"version":3}
1	+ {"file":"set-attributes2.js","mappings":";;MAKa,aAAa;;;;iBAIR,EAAE;;EAElB,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAGD,YAAY;IACV,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAEO,WAAW;IACjB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAoC,CAAC;IAE5D,IAAI,QAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KAAK,UAAU,EAAE;MAChD,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,CAAC;IAE5C,IAAI,CAAC,KAAK,EAAE;MACV,OAAO;KACR;IAED,MAAM,KAAK,GAAG;;MAEZ,SAAS,EAAE,CAAC,GAAW,KAAK,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC;MACtD,OAAO,EAAE,CAAC,GAAW,EAAE,KAAc;QACnC,IAAI,KAAK,IAAI,IAAI,EAAE;UACjB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SAC7B;aAAM;UACL,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAC5B;OACF;MACD,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;MACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;MACtE,MAAM,EAAE,CAAC,GAAW,EAAE,KAAa,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACvF,CAAC;IAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;;;MAGrD,KAAK,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;KACjC;GACF;EAED,MAAM;IACJ,OAAO,eAAQ,CAAC;GACjB;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/wrappers/set-attributes/set-attributes.tsx"],"sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n tag: 'set-attributes',\n})\nexport class SetAttributes {\n @Element() host!: HTMLSetAttributesElement;\n\n /** Attributes map */\n @Prop() value = {};\n\n componentWillLoad() {\n this.injectAttrs();\n }\n\n @Watch('value')\n attrsUpdated() {\n this.injectAttrs();\n }\n\n private injectAttrs() {\n const slot = this.host.firstElementChild as HTMLSlotElement;\n\n if (typeof slot?.assignedElements !== 'function') {\n return;\n }\n\n const child = slot.assignedElements().pop();\n\n if (!child) {\n return;\n }\n\n const types = {\n // no need for function and bigint\n undefined: (key: string) => child.removeAttribute(key),\n boolean: (key: string, value: unknown) => {\n if (value != null) {\n child.setAttribute(key, '');\n } else {\n child.removeAttribute(key);\n }\n },\n number: (key: string, value: string) => child.setAttribute(key, value),\n string: (key: string, value: string) => child.setAttribute(key, value),\n object: (key: string, value: string) => child.setAttribute(key, JSON.stringify(value)),\n };\n\n for (const [key, value] of Object.entries(this.value)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n types[typeof value](key, value);\n }\n }\n\n render() {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/components/six-alert.js CHANGED Viewed

@@ -134,6 +134,9 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
     "show": [64],
     "hide": [64],
     "toast": [64]
+  }, undefined, {
+    "open": ["handleOpenChange"],
+    "duration": ["handleDurationChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/six-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-alert.js","mappings":"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","names":["SixAlert"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --box-shadow: The alert's box shadow.\n /\n:host {\n display: contents;\n\n // For better DX, we'll reset the margin here so the base part can inherit it\n margin: 0;\n}\n\n.alert {\n position: relative;\n display: flex;\n align-items: stretch;\n background-color: var(--six-color-white);\n border: solid 1px var(--six-color-web-rock-200);\n border-top-width: 3px;\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--box-shadow);\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n line-height: 1.6;\n color: var(--six-color-web-rock-700);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n margin: inherit;\n\n &:not(.alert--visible) {\n @include hidden;\n }\n}\n\n.alert--open {\n opacity: 1;\n transform: none;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n\n ::slotted() {\n margin-left: var(--six-spacing-large);\n }\n}\n\n.alert--primary {\n border-top-color: var(--six-color-web-rock-900);\n\n .alert__icon {\n color: var(--six-color-web-rock-900);\n }\n}\n\n.alert--success {\n border-top-color: var(--six-color-success-600);\n\n .alert__icon {\n color: var(--six-color-success-600);\n }\n}\n\n.alert--info {\n border-top-color: var(--six-color-action-500);\n\n .alert__icon {\n color: var(--six-color-action-500);\n }\n}\n\n.alert--warning {\n border-top-color: var(--six-color-warning-800);\n\n .alert__icon {\n color: var(--six-color-warning-800);\n }\n}\n\n.alert--danger {\n border-top-color: var(--six-color-danger-900);\n\n .alert__icon {\n color: var(--six-color-danger-900);\n }\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: hidden;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 - The alert's content.\n * @slot icon - An icon to show in the alert.\n \n @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n /\n\n@Component({\n tag: 'six-alert',\n styleUrl: 'six-alert.scss',\n shadow: true,\n})\nexport class SixAlert {\n private autoHideTimeout?: number;\n\n @Element() host!: HTMLSixAlertElement;\n\n @State() isVisible = false;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The type of alert. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' = 'primary';\n\n /\n The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n /\n @Prop() duration = Infinity;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n /* Shows the alert. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /* Hides the alert /\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n clearTimeout(this.autoHideTimeout);\n this.isVisible = false;\n this.open = false;\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n */\n @Method()\n async toast() {\n return new Promise<void>((resolve) => {\n if (!toastStack.parentElement) {\n document.body.append(toastStack);\n }\n\n toastStack.append(this.host);\n requestAnimationFrame(() => this.show());\n\n this.host.addEventListener(\n 'six-alert-after-hide',\n () => {\n this.host.remove();\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (toastStack.querySelector('six-alert') === null) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleMouseMove = () => {\n this.restartAutoHide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('alert')) {\n this.isVisible = this.open;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n private restartAutoHide() {\n clearTimeout(this.autoHideTimeout);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--visible': this.isVisible,\n 'alert--closable': this.closable,\n 'alert--primary': this.type === 'primary',\n 'alert--success': this.type === 'success',\n 'alert--info': this.type === 'info',\n 'alert--warning': this.type === 'warning',\n 'alert--danger': this.type === 'danger',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n onMouseMove={this.handleMouseMove}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <span part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </span>\n\n <span part=\"message\" class=\"alert__message\">\n <slot />\n </span>\n\n {this.closable && (\n <span class=\"alert__close\">\n <six-icon-button\n name=\"clear\"\n exportparts=\"base:close-button\"\n onClick={this.handleCloseClick}\n ></six-icon-button>\n </span>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-alert.js","mappings":"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","names":["SixAlert"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --box-shadow: The alert's box shadow.\n /\n:host {\n display: contents;\n\n // For better DX, we'll reset the margin here so the base part can inherit it\n margin: 0;\n}\n\n.alert {\n position: relative;\n display: flex;\n align-items: stretch;\n background-color: var(--six-color-white);\n border: solid 1px var(--six-color-web-rock-200);\n border-top-width: 3px;\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--box-shadow);\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n line-height: 1.6;\n color: var(--six-color-web-rock-700);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n margin: inherit;\n\n &:not(.alert--visible) {\n @include hidden;\n }\n}\n\n.alert--open {\n opacity: 1;\n transform: none;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n\n ::slotted() {\n margin-left: var(--six-spacing-large);\n }\n}\n\n.alert--primary {\n border-top-color: var(--six-color-web-rock-900);\n\n .alert__icon {\n color: var(--six-color-web-rock-900);\n }\n}\n\n.alert--success {\n border-top-color: var(--six-color-success-600);\n\n .alert__icon {\n color: var(--six-color-success-600);\n }\n}\n\n.alert--info {\n border-top-color: var(--six-color-action-500);\n\n .alert__icon {\n color: var(--six-color-action-500);\n }\n}\n\n.alert--warning {\n border-top-color: var(--six-color-warning-800);\n\n .alert__icon {\n color: var(--six-color-warning-800);\n }\n}\n\n.alert--danger {\n border-top-color: var(--six-color-danger-900);\n\n .alert__icon {\n color: var(--six-color-danger-900);\n }\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: hidden;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 - The alert's content.\n * @slot icon - An icon to show in the alert.\n \n @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n /\n\n@Component({\n tag: 'six-alert',\n styleUrl: 'six-alert.scss',\n shadow: true,\n})\nexport class SixAlert {\n private autoHideTimeout?: number;\n\n @Element() host!: HTMLSixAlertElement;\n\n @State() isVisible = false;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The type of alert. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' = 'primary';\n\n /\n The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n /\n @Prop() duration = Infinity;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n /* Shows the alert. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /* Hides the alert /\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n clearTimeout(this.autoHideTimeout);\n this.isVisible = false;\n this.open = false;\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n */\n @Method()\n async toast() {\n return new Promise<void>((resolve) => {\n if (!toastStack.parentElement) {\n document.body.append(toastStack);\n }\n\n toastStack.append(this.host);\n requestAnimationFrame(() => this.show());\n\n this.host.addEventListener(\n 'six-alert-after-hide',\n () => {\n this.host.remove();\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (toastStack.querySelector('six-alert') === null) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleMouseMove = () => {\n this.restartAutoHide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('alert')) {\n this.isVisible = this.open;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n private restartAutoHide() {\n clearTimeout(this.autoHideTimeout);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--visible': this.isVisible,\n 'alert--closable': this.closable,\n 'alert--primary': this.type === 'primary',\n 'alert--success': this.type === 'success',\n 'alert--info': this.type === 'info',\n 'alert--warning': this.type === 'warning',\n 'alert--danger': this.type === 'danger',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n onMouseMove={this.handleMouseMove}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <span part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </span>\n\n <span part=\"message\" class=\"alert__message\">\n <slot />\n </span>\n\n {this.closable && (\n <span class=\"alert__close\">\n <six-icon-button\n name=\"clear\"\n exportparts=\"base:close-button\"\n onClick={this.handleCloseClick}\n ></six-icon-button>\n </span>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-button.js CHANGED Viewed

@@ -72,7 +72,7 @@ const SixButton$1 = /*@__PURE__*/ proxyCustomElement(class SixButton extends HTM
     const isLink = this.href != null;
     const isButton = !isLink;
     const Button = isLink ? 'a' : 'button';
-    return (h("div", { class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { ref: (el) => (this.nativeButton = el), part: "base", class: {
+    return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { ref: (el) => (this.nativeButton = el), part: "base", class: {
         button: true,
         // Types
         'button--secondary': this.type === 'secondary',
@@ -96,7 +96,7 @@ const SixButton$1 = /*@__PURE__*/ proxyCustomElement(class SixButton extends HTM
         'button--has-label': this.hasLabel,
         'button--has-prefix': this.hasPrefix,
         'button--has-suffix': this.hasSuffix,
-      }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, "data-testid": "button" }, h("span", { part: "prefix", class: "button__prefix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { part: "label", class: "button__label" }, h("slot", { onSlotchange: this.handleSlotChange })), h("span", { part: "suffix", class: "button__suffix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
+      }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { part: "prefix", class: "button__prefix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { part: "label", class: "button__label" }, h("slot", { onSlotchange: this.handleSlotChange })), h("span", { part: "suffix", class: "button__suffix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
   }
   get host() { return this; }
   static get style() { return sixButtonCss; }

package/dist/components/six-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-button.js","mappings":"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","names":["SixButton"],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n}\n\n.button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--six-border-width);\n border-radius: 0;\n font-family: var(--six-font-family);\n font-weight: var(--six-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.button--disabled {\n pointer-events: none;\n }\n\n // Clicks on icons shouldn't prevent the button from gaining focus\n ::slotted(six-icon) {\n pointer-events: none;\n }\n}\n\n.button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &.button--secondary {\n background-color: var(--six-color-white);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n border-color: var(--six-color-web-rock-400);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-900);\n border-width: 1px;\n }\n }\n\n &.button--primary {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-800);\n border-color: var(--six-color-web-rock-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n opacity: 70%;\n }\n }\n\n &.button--link {\n background-color: transparent;\n border-color: transparent;\n color: var(--six-color-action-500);\n\n &.button--disabled {\n color: var(--six-color-web-rock-400);\n }\n\n &:hover:not(.button--disabled) {\n color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n color: var(--six-color-action-light-to-be-defined);\n }\n }\n\n &.button--danger {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-danger-900);\n border-color: var(--six-color-danger-900);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n opacity: 70%;\n }\n }\n\n &.button--warning {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-warning-800);\n border-color: var(--six-color-warning-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n opacity: 70%;\n }\n }\n\n &.button--success {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-success-600);\n border-color: var(--six-color-success-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n opacity: 70%;\n }\n }\n\n &.button--action {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-action-600);\n border-color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--six-button-font-size-small);\n height: var(--six-height-small);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n font-size: var(--six-button-font-size-medium);\n height: var(--six-height-medium);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n font-size: var(--six-button-font-size-large);\n height: var(--six-height-large);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--six-height-small);\n }\n\n &.button--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.button--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n font-size: revert;\n\n &.button--small {\n width: var(--six-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--six-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--six-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n\n svg {\n color: var(--six-color-web-rock-900);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n color: var(--six-color-web-rock-900);\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n .button__caret {\n svg {\n color: var(--six-color-white);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n six-spinner {\n --indicator-color: currentColor;\n position: absolute;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--six-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--six-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--six-spacing-large);\n }\n}\n\n.button--has-prefix {\n &.button--small {\n padding-left: var(--six-spacing-x-small);\n\n .button__label {\n padding-left: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--six-spacing-x-small);\n\n .button__label {\n padding-right: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n \n @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n /\n\n@Component({\n tag: 'six-button',\n styleUrl: 'six-button.scss',\n shadow: true,\n})\nexport class SixButton {\n private nativeButton?: HTMLButtonElement \| HTMLAnchorElement;\n\n @Element() host!: HTMLSixButtonElement;\n\n @State() hasFocus = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n\n /* The button's type. /\n @Prop({ reflect: true }) type: 'secondary' \| 'primary' \| 'link' \| 'success' \| 'warning' \| 'danger' \| 'action' =\n 'primary';\n\n /* The button's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw the button with a caret for use with dropdowns, popovers, etc. /\n @Prop() caret = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to draw the button in a loading state. /\n @Prop({ reflect: true }) loading = false;\n\n /* Set to true to draw a pill-style button with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to draw a circle button. /\n @Prop({ reflect: true }) circle = false;\n\n /* Indicates if activating the button should submit the form. Ignored when `href` is set. /\n @Prop({ reflect: true }) submit = false;\n\n /* Indicates if activating the button should reset the form. /\n @Prop({ reflect: true }) reset = false;\n\n /* An optional name for the button. Ignored when `href` is set. /\n @Prop() name = '';\n\n /* An optional value for the button. Ignored when `href` is set. /\n @Prop() value = '';\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. /\n @Prop() href?: string;\n\n /* Tells the browser where to open the link. Only used when `href` is set. /\n @Prop() target?: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* Tells the browser to download the linked file as this filename. Only used when `href` is set. /\n @Prop() download?: string;\n\n /* Emitted when the button loses focus. /\n @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the button gains focus. /\n @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /* Sets focus on the button. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeButton?.focus(options);\n }\n\n /* Removes focus from the button. */\n @Method()\n async removeFocus() {\n this.nativeButton?.blur();\n }\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlot(this.host);\n this.hasPrefix = hasSlot(this.host, 'prefix');\n this.hasSuffix = hasSlot(this.host, 'suffix');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (this.submit) {\n event.preventDefault();\n submitForm(this.host);\n }\n };\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n\n return (\n <div class={{ 'button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.nativeButton = el)}\n part=\"base\"\n class={{\n button: true,\n\n // Types\n 'button--secondary': this.type === 'secondary',\n 'button--primary': this.type === 'primary',\n 'button--link': this.type === 'link',\n 'button--success': this.type === 'success',\n 'button--warning': this.type === 'warning',\n 'button--danger': this.type === 'danger',\n 'button--action': this.type === 'action',\n\n // Sizes\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n\n // Modifiers\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--pill': this.pill,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n }}\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n name={isButton ? this.name : undefined}\n value={isButton ? this.value : undefined}\n href={isLink ? this.href : undefined}\n target={isLink && this.target != null ? this.target : undefined}\n download={isLink && this.download != null ? this.download : undefined}\n rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n data-testid=\"button\"\n >\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n </span>\n {this.caret && (\n <span part=\"caret\" class=\"button__caret\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n )}\n\n {this.loading && <six-spinner />}\n </Button>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-button.js","mappings":"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","names":["SixButton"],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n}\n\n.button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--six-border-width);\n border-radius: 0;\n font-family: var(--six-font-family);\n font-weight: var(--six-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.button--disabled {\n pointer-events: none;\n }\n\n // Clicks on icons shouldn't prevent the button from gaining focus\n ::slotted(six-icon) {\n pointer-events: none;\n }\n}\n\n.button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &.button--secondary {\n background-color: var(--six-color-white);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n border-color: var(--six-color-web-rock-400);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-900);\n border-width: 1px;\n }\n }\n\n &.button--primary {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-800);\n border-color: var(--six-color-web-rock-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n opacity: 70%;\n }\n }\n\n &.button--link {\n background-color: transparent;\n border-color: transparent;\n color: var(--six-color-action-500);\n\n &.button--disabled {\n color: var(--six-color-web-rock-400);\n }\n\n &:hover:not(.button--disabled) {\n color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n color: var(--six-color-action-light-to-be-defined);\n }\n }\n\n &.button--danger {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-danger-900);\n border-color: var(--six-color-danger-900);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n opacity: 70%;\n }\n }\n\n &.button--warning {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-warning-800);\n border-color: var(--six-color-warning-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n opacity: 70%;\n }\n }\n\n &.button--success {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-success-600);\n border-color: var(--six-color-success-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n opacity: 70%;\n }\n }\n\n &.button--action {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-action-600);\n border-color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--six-button-font-size-small);\n height: var(--six-height-small);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n font-size: var(--six-button-font-size-medium);\n height: var(--six-height-medium);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n font-size: var(--six-button-font-size-large);\n height: var(--six-height-large);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--six-height-small);\n }\n\n &.button--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.button--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n font-size: revert;\n\n &.button--small {\n width: var(--six-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--six-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--six-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n\n svg {\n color: var(--six-color-web-rock-900);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n color: var(--six-color-web-rock-900);\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n .button__caret {\n svg {\n color: var(--six-color-white);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n six-spinner {\n --indicator-color: currentColor;\n position: absolute;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--six-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--six-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--six-spacing-large);\n }\n}\n\n.button--has-prefix {\n &.button--small {\n padding-left: var(--six-spacing-x-small);\n\n .button__label {\n padding-left: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--six-spacing-x-small);\n\n .button__label {\n padding-right: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n \n @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n /\n\n@Component({\n tag: 'six-button',\n styleUrl: 'six-button.scss',\n shadow: true,\n})\nexport class SixButton {\n private nativeButton?: HTMLButtonElement \| HTMLAnchorElement;\n\n @Element() host!: HTMLSixButtonElement;\n\n @State() hasFocus = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n\n /* The button's type. /\n @Prop({ reflect: true }) type: 'secondary' \| 'primary' \| 'link' \| 'success' \| 'warning' \| 'danger' \| 'action' =\n 'primary';\n\n /* The button's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw the button with a caret for use with dropdowns, popovers, etc. /\n @Prop() caret = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to draw the button in a loading state. /\n @Prop({ reflect: true }) loading = false;\n\n /* Set to true to draw a pill-style button with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to draw a circle button. /\n @Prop({ reflect: true }) circle = false;\n\n /* Indicates if activating the button should submit the form. Ignored when `href` is set. /\n @Prop({ reflect: true }) submit = false;\n\n /* Indicates if activating the button should reset the form. /\n @Prop({ reflect: true }) reset = false;\n\n /* An optional name for the button. Ignored when `href` is set. /\n @Prop() name = '';\n\n /* An optional value for the button. Ignored when `href` is set. /\n @Prop() value = '';\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. /\n @Prop() href?: string;\n\n /* Tells the browser where to open the link. Only used when `href` is set. /\n @Prop() target?: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* Tells the browser to download the linked file as this filename. Only used when `href` is set. /\n @Prop() download?: string;\n\n /* Emitted when the button loses focus. /\n @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the button gains focus. /\n @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /* Sets focus on the button. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeButton?.focus(options);\n }\n\n /* Removes focus from the button. */\n @Method()\n async removeFocus() {\n this.nativeButton?.blur();\n }\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlot(this.host);\n this.hasPrefix = hasSlot(this.host, 'prefix');\n this.hasSuffix = hasSlot(this.host, 'suffix');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (this.submit) {\n event.preventDefault();\n submitForm(this.host);\n }\n };\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n\n return (\n <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.nativeButton = el)}\n part=\"base\"\n class={{\n button: true,\n\n // Types\n 'button--secondary': this.type === 'secondary',\n 'button--primary': this.type === 'primary',\n 'button--link': this.type === 'link',\n 'button--success': this.type === 'success',\n 'button--warning': this.type === 'warning',\n 'button--danger': this.type === 'danger',\n 'button--action': this.type === 'action',\n\n // Sizes\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n\n // Modifiers\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--pill': this.pill,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n }}\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n name={isButton ? this.name : undefined}\n value={isButton ? this.value : undefined}\n href={isLink ? this.href : undefined}\n target={isLink && this.target != null ? this.target : undefined}\n download={isLink && this.download != null ? this.download : undefined}\n rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n data-testid=\"button\"\n >\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n </span>\n {this.caret && (\n <span part=\"caret\" class=\"button__caret\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n )}\n\n {this.loading && <six-spinner />}\n </Button>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-checkbox.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { h as hasSlot } from './slot.js';
 import { E as EventListeners } from './event-listeners.js';
 import { d as defineCustomElement$2 } from './six-error2.js';
-const sixCheckboxCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.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:\"*\"}.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{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
+const sixCheckboxCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.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{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
 let id = 0;
 const SixCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SixCheckbox extends HTMLElement {
@@ -135,6 +135,11 @@ const SixCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SixCheckbox extends
     "hasErrorSlot": [32],
     "setFocus": [64],
     "removeFocus": [64]
+  }, undefined, {
+    "checked": ["handleCheckedChange"],
+    "indeterminate": ["handleCheckedChange"],
+    "errorText": ["handleLabelChange"],
+    "label": ["handleLabelChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/six-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-checkbox.js","mappings":"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","names":["SixCheckbox"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: inline-block;\n}\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.checkbox__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: 0;\n background-color: var(--six-input-background-color);\n color: var(--six-checkbox-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;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n .checkbox__icon {\n display: inline-flex;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n border-color: var(--six-selection-control-color);\n background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--six-input-border-color-focus);\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n cursor: not-allowed;\n color: var(--six-input-color-disabled);\n\n .checkbox__control {\n border-color: var(--six-input-border-color-disabled);\n }\n\n &.checkbox--checked .checkbox__control,\n &.checkbox--indeterminate .checkbox__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n .checkbox__control {\n border-color: var(--six-input-border-color-danger);\n }\n}\n\n.checkbox__text {\n line-height: var(--six-selection-control-toggle-size);\n margin-left: 0.5em;\n user-select: none;\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 checkbox label.\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 control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n /\n\n@Component({\n tag: 'six-checkbox',\n styleUrl: 'six-checkbox.scss',\n shadow: true,\n})\nexport class SixCheckbox {\n private inputId = `checkbox-${++id}`;\n private labelId = `checkbox-label-${id}`;\n private textId = `checkbox-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixCheckboxElement;\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n\n /* The checkbox's name attribute. /\n @Prop() name = '';\n\n /\n The value of the checkbox does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n * it's only used when the checkbox participates in a native `<form>`.\n /\n @Prop() value = 'on';\n\n /* Set to true to disable the checkbox. /\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 = '';\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 /* Set to true to draw the checkbox in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* Set to true to draw the checkbox in an indeterminate state. /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('checked')\n @Watch('indeterminate')\n handleCheckedChange() {\n if (this.nativeInput == null) return;\n\n this.nativeInput.checked = this.checked;\n this.checked = this.nativeInput.checked;\n this.nativeInput.indeterminate = this.indeterminate;\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n\n nativeInput.indeterminate = this.indeterminate;\n }\n\n /* Sets focus on the checkbox. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the checkbox. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.indeterminate = false;\n this.sixChange.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n private handleSlotChange() {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorSlot = hasSlot(this.host, 'error-text');\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 errorTextId={this.errorTextId}\n hasErrorTextSlot={this.hasErrorSlot}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n class={{\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--invalid': this.invalid,\n 'checkbox--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"checkbox__control\">\n {this.checked && (\n <span part=\"checked-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(3.428571, 3.428571)\">\n <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n {!this.checked && this.indeterminate && (\n <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(2.285714, 6.857143)\">\n <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"checkbox\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-checkbox.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,irJAAirJ;;ACMxsJ,IAAI,EAAE,GAAG,CAAC,CAAC;MAuBEA,aAAW;;;;;;;;IACd,YAAO,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAC7B,YAAO,GAAG,kBAAkB,EAAE,EAAE,CAAC;IACjC,WAAM,GAAG,iBAAiB,EAAE,EAAE,CAAC;IAC/B,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;IAEvC,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IA0GtC,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;QACxC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;IAEM,oBAAe,GAAG,CAAC,KAAiB;;;MAE1C,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;KAC3B,CAAC;oBA5HkB,KAAK;wBACD,KAAK;wBACL,KAAK;gBAGd,EAAE;iBASD,IAAI;oBAGD,KAAK;oBAGL,KAAK;iBAGR,EAAE;qBAGqB,EAAE;;mBAMN,KAAK;mBAGU,KAAK;yBAGC,KAAK;;EAa7D,mBAAmB;IACjB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI;MAAE,OAAO;IAErC,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IACxC,IAAI,CAAC,WAAW,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;GACrD;EAID,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,iBAAiB;;IACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC5E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,qBAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACvE;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;GACjC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,IAAI,WAAW,IAAI,IAAI,EAAE;MACvB,OAAO;KACR;IAED,WAAW,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;GAChD;;EAID,MAAM,QAAQ,CAAC,OAAsB;;IACnC,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;GAClC;;EAID,MAAM,WAAW;;IACf,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;GAC1B;EA0BO,gBAAgB;IACtB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;GACtD;EAED,MAAM;IACJ,QACE,EAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,gBAAgB,EAAE,IAAI,CAAC,YAAY,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO,IAE1B,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,mBAAmB,EAAE,IAAI,CAAC,OAAO;QACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;QACnC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,OAAO;QACjC,yBAAyB,EAAE,IAAI,CAAC,aAAa;OAC9C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,eAAe,IAEjC,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,mBAAmB,IAC3C,IAAI,CAAC,OAAO,KACX,YAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,gBAAgB,IAC9C,WAAK,OAAO,EAAC,WAAW,IACtB,SAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS,oBAAgB,OAAO,IACtF,SAAG,MAAM,EAAC,cAAc,kBAAc,GAAG,IACvC,SAAG,SAAS,EAAC,+BAA+B,IAC1C,YAAM,CAAC,EAAC,sCAAsC,GAAQ,EACtD,YAAM,CAAC,EAAC,sCAAsC,GAAQ,CACpD,CACF,CACF,CACA,CACD,CACR,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAClC,YAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,gBAAgB,IACpD,WAAK,OAAO,EAAC,WAAW,IACtB,SAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS,oBAAgB,OAAO,IACtF,SAAG,MAAM,EAAC,cAAc,kBAAc,GAAG,IACvC,SAAG,SAAS,EAAC,+BAA+B,IAC1C,YAAM,CAAC,EAAC,+CAA+C,GAAQ,CAC7D,CACF,CACF,CACA,CACD,CACR,EAED,aACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,qBAC5B,IAAI,CAAC,OAAO,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACG,EAEP,YAAM,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,gBAAgB,IACvD,eAAQ,CACH,CACD,CACI,EACd;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixCheckbox"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: inline-block;\n}\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.checkbox__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: 0;\n background-color: var(--six-input-background-color);\n color: var(--six-checkbox-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;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n .checkbox__icon {\n display: inline-flex;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n border-color: var(--six-selection-control-color);\n background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--six-input-border-color-focus);\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n cursor: not-allowed;\n color: var(--six-input-color-disabled);\n\n .checkbox__control {\n border-color: var(--six-input-border-color-disabled);\n }\n\n &.checkbox--checked .checkbox__control,\n &.checkbox--indeterminate .checkbox__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n .checkbox__control {\n border-color: var(--six-input-border-color-danger);\n }\n}\n\n.checkbox__text {\n line-height: var(--six-selection-control-toggle-size);\n margin-left: 0.5em;\n user-select: none;\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 checkbox label.\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 control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n /\n\n@Component({\n tag: 'six-checkbox',\n styleUrl: 'six-checkbox.scss',\n shadow: true,\n})\nexport class SixCheckbox {\n private inputId = `checkbox-${++id}`;\n private labelId = `checkbox-label-${id}`;\n private textId = `checkbox-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixCheckboxElement;\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n\n /* The checkbox's name attribute. /\n @Prop() name = '';\n\n /\n The value of the checkbox does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n * it's only used when the checkbox participates in a native `<form>`.\n /\n @Prop() value = 'on';\n\n /* Set to true to disable the checkbox. /\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 = '';\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 /* Set to true to draw the checkbox in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* Set to true to draw the checkbox in an indeterminate state. /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('checked')\n @Watch('indeterminate')\n handleCheckedChange() {\n if (this.nativeInput == null) return;\n\n this.nativeInput.checked = this.checked;\n this.checked = this.nativeInput.checked;\n this.nativeInput.indeterminate = this.indeterminate;\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n\n nativeInput.indeterminate = this.indeterminate;\n }\n\n /* Sets focus on the checkbox. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the checkbox. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.indeterminate = false;\n this.sixChange.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n private handleSlotChange() {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorSlot = hasSlot(this.host, 'error-text');\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 errorTextId={this.errorTextId}\n hasErrorTextSlot={this.hasErrorSlot}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n class={{\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--invalid': this.invalid,\n 'checkbox--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"checkbox__control\">\n {this.checked && (\n <span part=\"checked-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(3.428571, 3.428571)\">\n <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n {!this.checked && this.indeterminate && (\n <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(2.285714, 6.857143)\">\n <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"checkbox\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/components/six-datepicker.js CHANGED Viewed

@@ -1054,7 +1054,10 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     "isDropDownContentUp": [32],
     "setFocus": [64],
     "select": [64]
-  }, [[9, "resize", "resizeHandler"], [9, "scroll", "scrollHandler"]]]);
+  }, [[9, "resize", "resizeHandler"], [9, "scroll", "scrollHandler"]], {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;