@operato/input 2.0.0-beta.0 → 2.0.0-beta.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.12",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -53,7 +53,8 @@
     "./ox-input-work-shift.js": "./dist/src/ox-input-work-shift.js",
     "./ox-input-hashtags.js": "./dist/src/ox-input-hashtags.js",
     "./ox-input-mass-fraction.js": "./dist/src/ox-input-mass-fraction.js",
-    "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js"
+    "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js",
+    "./ox-input-direction.js": "./dist/src/ox-input-direction.js"
   },
   "typesVersions": {
     "*": {
@@ -167,6 +168,9 @@
       ],
       "./ox-input-textarea.js": [
         "./dist/src/ox-input-textarea.d.ts"
+      ],
+      "./ox-input-direction.js": [
+        "./dist/src/ox-input-direction.d.ts"
       ]
     }
   },
@@ -196,9 +200,9 @@
     "@lit/localize": "^0.12.1",
     "@material/web": "^1.4.0",
     "@operato/color-picker": "^2.0.0-beta.0",
-    "@operato/i18n": "^2.0.0-beta.0",
-    "@operato/popup": "^2.0.0-beta.0",
-    "@operato/styles": "^2.0.0-beta.0",
+    "@operato/i18n": "^2.0.0-beta.3",
+    "@operato/popup": "^2.0.0-beta.12",
+    "@operato/styles": "^2.0.0-beta.5",
     "@operato/utils": "^2.0.0-beta.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -243,5 +247,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
+  "gitHead": "08cd1f9bacfca1f0559ee61089a26087cc1876ba"
 }

package/src/index.ts

@@ -28,3 +28,4 @@ export * from './ox-input-duration.js'
 export * from './ox-input-quantifier.js'
 export * from './ox-input-select-buttons.js'
 export * from './ox-input-textarea.js'
+export * from './ox-input-direction.js'

package/src/ox-input-direction.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+@customElement('ox-input-direction')
+export class OxInputDirection extends OxFormField {
+  static styles = css`
+    :host {
+      --md-icon-size: 1.4em;
+    }
+
+    div {
+      display: flex;
+      justify-content: space-between;
+      max-width: 140px;
+    }
+
+    md-icon {
+      color: var(--md-sys-color-on-background);
+      background-color: var(--md-sys-color-background);
+    }
+
+    md-icon[selected] {
+      color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-primary);
+    }
+  `
+
+  @property({ type: String }) value?: string
+
+  render() {
+    const value = this.value
+
+    return html`
+      <div @click=${this.onClick.bind(this)}>
+        <md-icon ?selected=${value == 'W'} data-value="W">arrow_back</md-icon>
+        <md-icon ?selected=${value == 'N'} data-value="N">arrow_upward</md-icon>
+        <md-icon ?selected=${value == 'S'} data-value="S">arrow_downward</md-icon>
+        <md-icon ?selected=${value == 'E'} data-value="E">arrow_forward</md-icon>
+      </div>
+    `
+  }
+
+  onClick(e: MouseEvent) {
+    e.stopPropagation()
+
+    if (this.disabled) {
+      return
+    }
+
+    const target = e.target as Element
+    const value = target.getAttribute('data-value') as string
+
+    this.value = this.value === value ? undefined : value
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

package/src/ox-input-mass-fraction.ts

@@ -108,6 +108,7 @@ export class OxInputMassFraction extends OxFormField {
 
       label {
         text-align: center;
+        text-wrap: nowrap;
       }
 
       ox-select {

package/src/ox-input-select-buttons.ts

@@ -40,7 +40,7 @@ export class OxInputSelectButtons extends OxFormField {
               data-value=${value}
               label=${display}
               ?selected=${values.includes(value)}
-              @click=${(e: MouseEvent) => !this.disabled && this.onClick(e)}
+              @tap=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onTap(e)}
             ></md-filter-chip>
           `
         )}
@@ -48,7 +48,7 @@ export class OxInputSelectButtons extends OxFormField {
     `
   }
 
-  onClick(e: MouseEvent) {
+  onTap(e: MouseEvent | TouchEvent) {
     e.stopPropagation()
 
     const target = e.target as MdFilterChip

package/src/ox-input-unit-number.ts

@@ -215,7 +215,7 @@ export class OxInputUnitNumber extends OxFormField {
         position: relative;
         margin-left: var(--margin-narrow);
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         min-width: 24px;
       }
 
@@ -268,6 +268,11 @@ export class OxInputUnitNumber extends OxFormField {
           .value=${userUnit}
           @select=${(e: CustomEvent) => {
             this.userUnit = e.detail
+            this.dispatchEvent(
+              new CustomEvent('user-unit-change', {
+                detail: this.userUnit
+              })
+            )
           }}
         >
           <div option value=${this.stdUnit}>${this.stdUnit}</div>
@@ -278,12 +283,6 @@ export class OxInputUnitNumber extends OxFormField {
     `
   }
 
-  updated(changes: PropertyValues<this>) {
-    // if (changes.has('stdUnit')) {
-    //   this.userUnit = this.userUnit || this.stdUnit
-    // }
-  }
-
   _onChangeValue(e: Event) {
     this.value = this._toStdUnit(this.input.value)
 

package/src/ox-input-work-shift.ts

@@ -57,7 +57,7 @@ export class OxInputWorkShift extends OxFormField {
     }
     [data-header] span {
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-transform: var(--label-text-transform);
       text-align: center;
     }

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

@@ -0,0 +1,86 @@
+import '../src/ox-input-direction.js'
+
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+export default {
+  title: 'ox-input-direction',
+  component: 'ox-input-direction',
+  argTypes: {
+    value: { control: 'object' },
+    name: { control: 'text' },
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object | string
+  disabled?: boolean
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme = 'light' }: 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);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container">
+    <ox-input-direction
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-direction>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'options',
+  value: ''
+}

package/themes/grist-theme.css

@@ -167,3 +167,7 @@ body {
     --data-card-create-form-padding: 7px;
   }
 }
+
+body.dark {
+  --grid-container-border-color: 1px solid rgba(255, 255, 255, 0.09);
+}