@operato/input 8.0.0-alpha.41 → 8.0.0-alpha.45

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.45](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.44...v8.0.0-alpha.45) (2024-10-23)
+
+
+### :bug: Bug Fix
+
+* add switch into input module ([3eb9c84](https://github.com/hatiolab/operato/commit/3eb9c84e3de2e8b36522e230e785948171df2aba))
+
+
+
 ## [8.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
 
 

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ export * from './ox-form-field.js';
 export * from './ox-buttons-radio.js';
 export * from './ox-checkbox.js';
 export * from './ox-select.js';
+export * from './ox-input-switch.js';
 export * from './ox-input-angle.js';
 export * from './ox-input-3dish.js';
 export * from './ox-input-3axis.js';

package/dist/src/index.js

@@ -5,6 +5,7 @@ export * from './ox-form-field.js';
 export * from './ox-buttons-radio.js';
 export * from './ox-checkbox.js';
 export * from './ox-select.js';
+export * from './ox-input-switch.js';
 export * from './ox-input-angle.js';
 export * from './ox-input-3dish.js';
 export * from './ox-input-3axis.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}

package/dist/src/ox-input-switch.d.ts

@@ -0,0 +1,9 @@
+import { OxFormField } from './ox-form-field';
+export declare class OxInputSwitch extends OxFormField {
+    static styles: import("lit").CSSResult;
+    round: boolean;
+    value: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    protected appendFormData({ formData }: FormDataEvent): void;
+}

package/dist/src/ox-input-switch.js

@@ -0,0 +1,121 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+let OxInputSwitch = class OxInputSwitch extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.round = false;
+        this.value = false;
+    }
+    static { this.styles = css `
+    :host {
+      --ox-simple-switch-fullwidth: 2em;
+      --ox-simple-switch-fullheight: 1em;
+      --ox-simple-switch-thumbnail-size: 1em;
+    }
+
+    label {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+
+    label input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    span {
+      position: absolute;
+      cursor: pointer;
+      width: var(--ox-simple-switch-fullwidth);
+      height: var(--ox-simple-switch-fullheight);
+      top: calc(0 - var(--ox-simple-switch-thumbnail-size));
+      left: 0;
+      background-color: var(--ox-simple-switch-off-color, #ccc);
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+
+    span:before {
+      position: absolute;
+      content: '';
+      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
+      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
+      left: 4px;
+      top: 4px;
+      background-color: var(--ox-simple-switch-thumbnail-color, white);
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+
+    input:checked + span {
+      background-color: var(--ox-simple-switch-on-color, #2196f3);
+    }
+
+    input + span:before {
+      -webkit-transform: translateY(
+        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
+      );
+      -ms-transform: translateY(
+        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
+      );
+      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+    }
+
+    input:checked + span:before {
+      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
+        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
+        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
+        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
+    }
+
+    /* Rounded sliders */
+    span[round] {
+      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);
+    }
+
+    span[round]:before {
+      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
+    }
+  `; }
+    render() {
+        return html `
+      <label>
+        <input type="checkbox" .checked=${this.value} />
+        <span ?round=${this.round}></span>
+      </label>
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.value = e.target?.checked;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        });
+    }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, this.value ? 'true' : 'false');
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], OxInputSwitch.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxInputSwitch.prototype, "value", void 0);
+OxInputSwitch = __decorate([
+    customElement('ox-input-switch')
+], OxInputSwitch);
+export { OxInputSwitch };
+//# sourceMappingURL=ox-input-switch.js.map

package/dist/src/ox-input-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-switch.js","sourceRoot":"","sources":["../../src/ox-input-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QA8EwB,UAAK,GAAY,KAAK,CAAA;QACtB,UAAK,GAAY,KAAK,CAAA;IA8BrD,CAAC;aA5GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ElB,AA3EY,CA2EZ;IAKD,MAAM;QACJ,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,KAAK;uBAC7B,IAAI,CAAC,KAAK;;KAE5B,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtD,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,OAAO,CAAA;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxE,CAAC;;AA9B4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AA/ExC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA6GzB","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-switch')\nexport class OxInputSwitch extends OxFormField {\n  static styles = css`\n    :host {\n      --ox-simple-switch-fullwidth: 2em;\n      --ox-simple-switch-fullheight: 1em;\n      --ox-simple-switch-thumbnail-size: 1em;\n    }\n\n    label {\n      position: relative;\n      display: inline-block;\n      width: 100%;\n      height: 100%;\n    }\n\n    label input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n    }\n\n    span {\n      position: absolute;\n      cursor: pointer;\n      width: var(--ox-simple-switch-fullwidth);\n      height: var(--ox-simple-switch-fullheight);\n      top: calc(0 - var(--ox-simple-switch-thumbnail-size));\n      left: 0;\n      background-color: var(--ox-simple-switch-off-color, #ccc);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    span:before {\n      position: absolute;\n      content: '';\n      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      left: 4px;\n      top: 4px;\n      background-color: var(--ox-simple-switch-thumbnail-color, white);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    input:checked + span {\n      background-color: var(--ox-simple-switch-on-color, #2196f3);\n    }\n\n    input + span:before {\n      -webkit-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      -ms-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    input:checked + span:before {\n      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    /* Rounded sliders */\n    span[round] {\n      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);\n    }\n\n    span[round]:before {\n      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);\n    }\n  `\n\n  @property({ type: Boolean }) round: boolean = false\n  @property({ type: Boolean }) value: boolean = false\n\n  render() {\n    return html`\n      <label>\n        <input type=\"checkbox\" .checked=${this.value} />\n        <span ?round=${this.round}></span>\n      </label>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.value = (e.target as HTMLInputElement)?.checked\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    })\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.value ? 'true' : 'false')\n  }\n}\n"]}

package/dist/stories/ox-input-switch.stories.d.ts

@@ -0,0 +1,38 @@
+import '@material/web/all.js';
+import '../src/ox-input-switch.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        label: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        round: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    label?: string;
+    name?: string;
+    round?: boolean;
+    value?: boolean;
+    disabled?: boolean;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-switch.stories.js

@@ -0,0 +1,68 @@
+import '@material/web/all.js';
+import '../src/ox-input-switch.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+export default {
+    title: 'ox-input-switch',
+    component: 'ox-input-switch',
+    argTypes: {
+        label: { control: 'text' },
+        name: { control: 'text' },
+        round: { control: 'boolean' },
+        value: { control: 'boolean' },
+        disabled: { control: 'boolean' }
+    }
+};
+const Template = ({ label = 'Checkbox', name = 'hello', round = false, value = false, disabled }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      padding: 20px;
+    }
+
+    ox-input-switch {
+      --ox-simple-switch-fullwidth: 120px;
+      --ox-simple-switch-fullheight: 40px;
+      --ox-simple-switch-thumbnail-size: 60px;
+    }
+  </style>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-switch name=${name} .value=${value} .round=${round} ?disabled=${disabled}> </ox-input-switch>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    label: 'label',
+    name: 'label',
+    round: false,
+    value: false
+};
+//# sourceMappingURL=ox-input-switch.stories.js.map

package/dist/stories/ox-input-switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-switch.stories.js","sourceRoot":"","sources":["../../stories/ox-input-switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;4BAqBH,IAAI,WAAW,KAAK,WAAW,KAAK,cAAc,QAAQ;;CAErF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;CACb,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-input-switch.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-switch',\n  component: 'ox-input-switch',\n  argTypes: {\n    label: { control: 'text' },\n    name: { control: 'text' },\n    round: { control: 'boolean' },\n    value: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  name?: string\n  round?: boolean\n  value?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'Checkbox',\n  name = 'hello',\n  round = false,\n  value = false,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      padding: 20px;\n    }\n\n    ox-input-switch {\n      --ox-simple-switch-fullwidth: 120px;\n      --ox-simple-switch-fullheight: 40px;\n      --ox-simple-switch-thumbnail-size: 60px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-switch name=${name} .value=${value} .round=${round} ?disabled=${disabled}> </ox-input-switch>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'label',\n  name: 'label',\n  round: false,\n  value: false\n}\n"]}