@scouterna/ui-webc 2.1.0 → 2.2.1

package/dist/components/scout-switch.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-S6Ssep7K.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DNlelzlE.js';
 
 const switchCss = ".switch{width:var(--spacing-12);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:var(--spacing-8);background-color:var(--color-text-brand-inverse);border:1px solid var(--color-gray-300);position:relative;display:flex;align-content:center;justify-content:center;transition-property:border-color;transition-duration:0.3s;transition-timing-function:ease-in-out;cursor:pointer;--switch-ball-size:calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px)}.switch:hover{transition-property:none;border-color:var(--color-gray-400);background-color:var(--color-background-brand-subtle-hovered)}.switch:active{background-color:var(--color-background-brand-subtle-pressed)}.switch:checked{border-color:var(--color-background-brand-base)}.switch:hover::before{background-color:var(--color-gray-400)}.switch::before{content:\"\";background-color:var(--color-gray-300);width:var(--switch-ball-size);height:var(--switch-ball-size);border-radius:50%;position:absolute;left:-1px;right:0;transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:\"\";background-color:var(--color-background-brand-base);left:calc(100% - (var(--spacing-6) - var(--spacing-1) / 2) + 1px);left:calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px)}.switch:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}.switch:disabled::before{background-color:var(--color-gray-300)}label{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider{width:var(--spacing-2)}";
 
@@ -40,8 +40,8 @@ const ScoutSwitch$1 = /*@__PURE__*/ proxyCustomElement(class ScoutSwitch extends
         });
     }
     render() {
-        const Tag = this.label && this.label.length ? "label" : "div";
-        return (h(Tag, { key: '318cc87a4c5a8f8f03303e2cac1c62b962498d58' }, this.label, h("span", { key: '8788d9db11b0abfd22258f073c157b60fbe6a3cc', class: "inlineDivider" }), h("input", { key: '5b882357938ccf8b81033dc035a796ce8524b36c', class: "switch", onChange: (event) => this.onClick(event), type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled })));
+        const Tag = this.label?.length ? "label" : "div";
+        return (h(Tag, { key: 'faa6584a6fc9fb985a8c638dd6ea367e0d12b07e' }, this.label, h("span", { key: 'be4cef9603df7b632368d1ac916b4feb62cb4ab0', class: "inlineDivider" }), h("input", { key: '56ab1692bdf10e8767d8de3cd70949d2d55b8fe9', class: "switch", onChange: (event) => this.onClick(event), type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled })));
     }
     static get delegatesFocus() { return true; }
     static get style() { return switchCss; }

package/dist/components/scout-switch.js.map

@@ -1 +1 @@
-{"file":"scout-switch.js","mappings":";;AAAA,MAAM,SAAS,GAAG,omDAAomD;;MCgBzmDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACtB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,kBAAkB;AAI3B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B;AAEtD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;AAC9B,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK;QAC7D,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-12);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 1px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  left: -1px;\n  right: 0;\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"],"version":3}
+{"file":"scout-switch.js","mappings":";;AAAA,MAAM,SAAS,GAAG,omDAAomD;;MCgBzmDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACtB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,kBAAkB;AAI3B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B;AAEtD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;AAC9B,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-12);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 1px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  left: -1px;\n  right: 0;\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"],"version":3}