@operato/input 2.0.0-alpha.99 → 2.0.0-beta.0

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

@@ -185,16 +185,16 @@ export class OxInputUnitNumber extends OxFormField {
       input {
         flex: 1;
         border: 0;
-        border-bottom: var(--border-dark-color);
-        padding: var(--input-padding);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        padding: var(--spacing-tiny);
         font: var(--input-font);
-        color: var(--primary-text-color);
+        color: var(--md-sys-color-on-primary-container);
         min-width: 40px;
       }
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-bottom: 1px solid var(--md-sys-color-on-primary-container);
       }
 
       input::-webkit-outer-spin-button,
@@ -220,7 +220,7 @@ export class OxInputUnitNumber extends OxFormField {
       }
 
       md-icon {
-        color: var(--primary-color, #3c3938);
+        color: var(--md-sys-color-on-primary-container, #3c3938);
         margin-left: auto;
       }
 

package/src/ox-input-value-map.ts

@@ -31,7 +31,7 @@ export class OxInputValueMap extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      border: var(--border-dark-color);
+      border: 1px solid rgba(0, 0, 0, 0.15);
       padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
 
       --md-icon-size: var(--fontsize-default, 14px);
@@ -71,7 +71,7 @@ export class OxInputValueMap extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     [data-key],
@@ -81,15 +81,15 @@ export class OxInputValueMap extends OxFormField {
 
     input {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     button.hidden {
@@ -98,13 +98,9 @@ export class OxInputValueMap extends OxFormField {
     }
 
     ox-input-color {
-      --input-color-input-color: {
-        margin: 1px;
-      }
-      --input-color-input-span: {
-        width: 10px;
-        height: 10px;
-      }
+      margin: 1px;
+      width: 10px;
+      height: 10px;
     }
 
     input[type='checkbox'] {

package/src/ox-input-value-ranges.ts

@@ -31,7 +31,7 @@ export class OxInputValueRange extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      border: var(--border-dark-color);
+      border: 1px solid rgba(0, 0, 0, 0.15);
       padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
 
       --md-icon-size: var(--fontsize-default, 14px);
@@ -71,7 +71,7 @@ export class OxInputValueRange extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     [data-from],
@@ -85,15 +85,15 @@ export class OxInputValueRange extends OxFormField {
 
     input {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     button.hidden {
@@ -116,7 +116,7 @@ export class OxInputValueRange extends OxFormField {
     }
 
     [filler] {
-      padding: var(--input-padding);
+      padding: var(--spacing-tiny);
       flex: 1;
     }
 

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

@@ -38,7 +38,7 @@ export class OxInputWorkShift extends OxFormField {
     div {
       display: flex;
       flex-flow: row nowrap;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
     }
 
     empty-element {
@@ -52,7 +52,7 @@ export class OxInputWorkShift extends OxFormField {
       flex: 1;
     }
     [data-header] {
-      background-color: rgba(var(--primary-color-rgb), 0.05);
+      background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);
       padding: var(--padding-narrow);
     }
     [data-header] span {
@@ -67,17 +67,17 @@ export class OxInputWorkShift extends OxFormField {
     input,
     select {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
 
       max-height: 35px;
     }
     input:focus,
     select:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     input:required:invalid {
@@ -98,7 +98,7 @@ export class OxInputWorkShift extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     [placeholder='value'] {

package/src/ox-select.ts

@@ -4,9 +4,10 @@
 
 import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
+import './ox-checkbox.js'
 
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { css, html, render, PropertyValues, nothing } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
@@ -27,20 +28,20 @@ function onmouseout(e: Event) {
 }
 
 @customElement('ox-select')
-export class Select extends OxFormField {
+export class OxSelect extends OxFormField {
   static styles = [
     TooltipStyles,
     css`
       :host {
         display: block;
         position: relative;
-        border-bottom: var(--border-dark-color);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 
-        --ox-select-padding: var(--input-padding);
+        --ox-select-padding: var(--spacing-tiny);
         --ox-select-font: var(--input-font);
-        --ox-select-color: var(--input-color);
-        --ox-select-icon-color: var(--theme-primary-text-color, #3c3938);
-        --ox-select-icon-hover-color: var(--primary-color, #3c3938);
+        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
       }
 
       div {
@@ -74,7 +75,7 @@ export class Select extends OxFormField {
       }
 
       div:hover md-icon {
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
 
       ::slotted(ox-popup-list) {
@@ -137,14 +138,60 @@ export class Select extends OxFormField {
   async updated(changes: PropertyValues<this>) {
     if (changes.has('value')) {
       const popupList = this.querySelector('ox-popup-list') as OxPopupList
-      popupList.value = this.value
+      if (popupList) {
+        popupList.value = this.value
+        await this.requestUpdate()
 
-      await this.requestUpdate()
-
-      this.label = popupList.getSelectedLabels()
+        this.label = popupList.getSelectedLabels()
+      }
     }
   }
 
+  setOptions(
+    options: string[] | { display: string; value: string }[],
+    opt: { multiple?: boolean; withSearch?: boolean } = {}
+  ) {
+    const objOptions = options.map(option => {
+      return typeof option == 'string' ? { display: option, value: option } : option
+    })
+
+    const { multiple, withSearch } = opt || {}
+
+    const template = html`
+      <ox-popup-list
+        align-left
+        nowrap
+        ?multiple=${multiple}
+        attr-selected=${multiple ? 'checked' : ''}
+        ?with-search=${withSearch}
+      >
+        ${multiple
+          ? html`<ox-checkbox
+                @change=${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(
+                    option => !option.hasAttribute('hidden')
+                  )
+                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
+
+                  this.value = options
+                    .map(option =>
+                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined
+                    )
+                    .filter(Boolean)
+                }}
+                >set all</ox-checkbox
+              >
+              ${objOptions.map(
+                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+              )} `
+          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}
+      </ox-popup-list>
+    `
+
+    render(template, this)
+  }
+
   expand() {
     if (this.disabled) {
       return

package/src/ox-zoomable-image.ts

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+@customElement('ox-zoomable-image')
+export class OxZoomableImage extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      overflow: hidden;
+      position: relative;
+    }
+
+    img {
+      transition: transform 0.25s ease;
+      transform-origin: center;
+      cursor: grab;
+    }
+  `
+
+  @property({ type: String }) src = ''
+
+  @query('img') image!: HTMLImageElement
+
+  private scale: number = 1
+  private startX: number = 0
+  private startY: number = 0
+  private x: number = 0
+  private y: number = 0
+  private dragging: boolean = false
+
+  render() {
+    return html`
+      <img
+        id="zoomableImage"
+        src="${this.src}"
+        @wheel="${this.handleWheel}"
+        @mousedown="${this.handleMouseDown}"
+        @mousemove="${this.handleMouseMove}"
+        @mouseup="${this.handleMouseUp}"
+        @mouseleave="${this.handleMouseUp}"
+        style="transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});"
+      />
+    `
+  }
+
+  private handleWheel(event: WheelEvent) {
+    event.preventDefault()
+    const delta = event.deltaY
+    const zoomIntensity = 0.1
+    this.scale += delta > 0 ? -zoomIntensity : zoomIntensity
+    this.scale = Math.max(0.1, Math.min(this.scale, 4))
+    this.requestUpdate()
+  }
+
+  private handleMouseDown(event: MouseEvent) {
+    this.startX = event.clientX - this.x
+    this.startY = event.clientY - this.y
+    this.dragging = true
+    const img = this.image as HTMLImageElement
+    img.style.cursor = 'grabbing'
+  }
+
+  private handleMouseMove(event: MouseEvent) {
+    if (!this.dragging) return
+    this.x = event.clientX - this.startX
+    this.y = event.clientY - this.startY
+    this.requestUpdate()
+  }
+
+  private handleMouseUp() {
+    this.dragging = false
+    const img = this.image as HTMLImageElement
+    img.style.cursor = 'grab'
+  }
+}

package/stories/ox-buttons-radio.stories.ts

@@ -0,0 +1,96 @@
+import '@material/web/all.js'
+import '../src/ox-buttons-radio.js'
+
+import { TemplateResult, html } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+export default {
+  title: 'ox-buttons-radio',
+  component: 'ox-buttons-radio',
+  argTypes: {
+    value: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value?: string
+  disabled?: boolean
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ 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);
+
+      padding: 20px;
+    }
+
+    ox-buttons-radio {
+      padding: 20px;
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-buttons-radio
+      @change=${(e: CustomEvent) => {
+        console.log('changed', e.detail)
+      }}
+      value=${ifDefined(value)}
+      ?disabled=${disabled}
+    >
+      <md-filled-button data-value="1">Option 1</md-filled-button>
+      <md-filled-button data-value="2">Option 2</md-filled-button>
+      <md-outlined-button data-value="3">Option 3</md-outlined-button>
+      <md-text-button trailing-icon>Open<md-icon slot="icon">upload</md-icon></md-text-button>
+      <md-elevated-button>Elevated</md-elevated-button>
+    </ox-buttons-radio>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  value: '',
+  disabled: false,
+  theme: 'light'
+}

package/stories/ox-checkbox.stories.ts

@@ -1,6 +1,9 @@
+import '@material/web/all.js'
 import '../src/ox-checkbox.js'
 
 import { TemplateResult, html } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-checkbox',
@@ -11,7 +14,8 @@ export default {
     value: { control: 'boolean' },
     indeterminatable: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -28,26 +32,68 @@ interface ArgTypes {
   indeterminatable?: boolean
   indeterminate?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
   label = 'Checkbox',
   name = 'hello',
-  value = true,
+  value,
   indeterminatable = false,
   indeterminate = false,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <ox-checkbox
-    @click=${(e: MouseEvent) => console.log('clicked')}
-    name=${name}
-    .checked=${value}
-    ?indeterminatable=${indeterminatable}
-    ?indeterminate=${indeterminate}
-    ?disabled=${disabled}
-  >
-    ${label}
-  </ox-checkbox>
+  <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;
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-checkbox
+      @click=${(e: MouseEvent) => console.log('clicked')}
+      name=${name}
+      .checked=${value}
+      ?indeterminatable=${indeterminatable}
+      ?indeterminate=${indeterminate}
+      ?disabled=${disabled}
+    >
+      ${label}
+    </ox-checkbox>
+  </div>
 `
 
 export const Regular = Template.bind({})
@@ -68,6 +114,7 @@ CustomActivated.args = {
 export const CustomIndeterminated = Template.bind({})
 CustomIndeterminated.args = {
   label: 'Indeterminated',
+  indeterminatable: true,
   indeterminate: true,
-  value: true
+  theme: 'light'
 }

package/stories/ox-input-3axis.stories.ts

@@ -2,13 +2,15 @@ import '../src/ox-input-3axis.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-3axis',
   component: 'ox-input-3axis',
   argTypes: {
     value: { control: 'object' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -21,10 +23,15 @@ interface Story<T> {
 interface ArgTypes {
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ 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"
@@ -40,18 +47,34 @@ const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   />
 
   <style>
-    body {
+    ${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>
 
-  <ox-input-3axis
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-3axis>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-3axis
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-3axis>
+  </div>
 `
 
 export const Regular = Template.bind({})