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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.41",
+  "version": "8.0.0-alpha.46",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "./ox-input-key-values.js": "./dist/src/ox-input-key-values.js",
     "./ox-select.js": "./dist/src/ox-select.js",
     "./ox-input-file.js": "./dist/src/ox-input-file.js",
+    "./ox-input-switch.js": "./dist/src/ox-input-switch.js",
     "./ox-input-image.js": "./dist/src/ox-input-image.js",
     "./ox-input-options.js": "./dist/src/ox-input-options.js",
     "./ox-input-select-buttons.js": "./dist/src/ox-input-select-buttons.js",
@@ -132,6 +133,9 @@
       "./ox-input-file.js": [
         "./dist/src/ox-input-file.d.ts"
       ],
+      "./ox-input-switch.js": [
+        "./dist/src/ox-input-switch.d.ts"
+      ],
       "./ox-input-image.js": [
         "./dist/src/ox-input-image.d.ts"
       ],
@@ -262,5 +266,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "0c2adcc994cd105055c9355810fa9c7c8196ca41"
+  "gitHead": "7a14ca5ab93f0ff0efa56ac434bf458cae6c41d6"
 }

package/src/index.ts

@@ -6,6 +6,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/src/ox-input-switch.ts

@@ -0,0 +1,117 @@
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+@customElement('ox-input-switch')
+export class OxInputSwitch extends OxFormField {
+  static 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);
+    }
+  `
+
+  @property({ type: Boolean }) round: boolean = false
+  @property({ type: Boolean }) value: boolean = false
+  @property({ type: Boolean }) disabled: boolean = false
+
+  render() {
+    return html`
+      <label>
+        <input type="checkbox" .checked=${this.value} ?disabled=${this.disabled} />
+        <span ?round=${this.round}></span>
+      </label>
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      this.value = (e.target as HTMLInputElement)?.checked
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    })
+  }
+
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, this.value ? 'true' : 'false')
+  }
+}

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

@@ -0,0 +1,91 @@
+import '@material/web/all.js'
+import '../src/ox-input-switch.js'
+
+import { TemplateResult, 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' }
+  }
+}
+
+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
+}
+
+const Template: Story<ArgTypes> = ({
+  label = 'Checkbox',
+  name = 'hello',
+  round = false,
+  value = false,
+  disabled
+}: ArgTypes) => 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
+}