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

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

@@ -70,6 +70,17 @@ const Template: Story<ArgTypes> = ({ name = 'options', value, disabled }: ArgTyp
       ?disabled=${disabled}
     >
     </ox-input-direction>
+    <br />
+    <ox-input-direction
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+      inbound
+    >
+    </ox-input-direction>
   </div>
 `
 

package/stories/ox-select-floor.stories.ts

@@ -0,0 +1,197 @@
+import '../src/ox-select-floor.js'
+
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+import { IMAGE } from './image-for-select-floor.js'
+
+export default {
+  title: 'ox-select-floor',
+  component: 'ox-select-floor',
+  argTypes: {
+    disabled: { control: 'boolean' },
+    value: { control: 'text' },
+    bottomLimit: { control: 'number' },
+    perspective: { control: 'number' },
+    rotateX: { control: 'number' },
+    rotateXForActive: { control: 'number' },
+    interval: { control: 'number' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value?: string
+  bottomLimit?: number
+  perspective?: number
+  rotateX?: number
+  rotateXForActive?: number
+  disabled?: boolean
+  interval?: number
+}
+
+const cards = new Array(10).fill({}).map((_, index) => {
+  return {
+    image: IMAGE,
+    name: index + 1 + '층'
+  }
+})
+
+const Template: Story<ArgTypes> = ({
+  value,
+  disabled,
+  bottomLimit = 70,
+  perspective = 1200,
+  rotateX = 60,
+  rotateXForActive = 40,
+  interval = 0
+}: 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>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+
+      overscroll-behavior-y: none;
+
+      /* This is a font-stack that tries to use the system-default sans-serifs first */
+      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+
+      accent-color: var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-background);
+    }
+
+    .container {
+      height: 1000px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+
+    div[status] {
+      display: flex;
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      align-items: center;
+      right: 3%;
+    }
+
+    div[status] > div[content] {
+      display: flex;
+      background-color: #4e5055;
+      color: #fff;
+      padding: 5px 7px;
+      border-radius: 7px;
+      gap: 10px;
+      font-size: 14px;
+    }
+
+    div[status] span {
+      display: flex;
+      align-items: center;
+      width: 48px;
+    }
+
+    div[status] md-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      border-radius: 5px;
+      font-size: 21px;
+      font-weight: 700;
+    }
+    div[status] md-icon[request] {
+      background-color: #f7f7f7;
+      color: #4e5055;
+    }
+    div[status] md-icon[pass] {
+      background-color: #4bbb4a;
+    }
+    div[status] md-icon[fail] {
+      background-color: #ff4444;
+    }
+
+    span[name] {
+      width: 40px;
+      color: #4e5055;
+      margin-left: 6px;
+      text-align: center;
+    }
+
+    span[name][active] {
+      color: var(--md-sys-color-on-error);
+      background-color: var(--md-sys-color-error);
+      border-radius: 999px;
+    }
+
+    ox-select-floor {
+      --ox-select-floor-rotate-x: ${rotateX}deg;
+      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;
+      --ox-select-floor-perspective: ${perspective}px;
+    }
+  </style>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-select-floor
+      .cards=${cards}
+      .bottomLimit=${bottomLimit}
+      ?disabled=${disabled}
+      .interval=${interval}
+      @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}
+    >
+      ${cards.map(
+        ({ image, name }, index) =>
+          html`<div slot="template-${index}" status>
+            <div content>
+              <span><md-icon request slot="icon">exclamation</md-icon>100</span>
+              <span><md-icon pass slot="icon">check</md-icon>50</span>
+              <span><md-icon fail slot="icon">close</md-icon>5</span>
+            </div>
+            <span name>${name}</span>
+          </div>`
+      )}
+    </ox-select-floor>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  bottomLimit: 70,
+  perspective: 1200,
+  rotateX: 60,
+  rotateXForActive: 40,
+  interval: 0
+}

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);

package/dist/src/ox-zoomable-image.d.ts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-export declare class OxZoomableImage extends LitElement {
-    static styles: import("lit").CSSResult;
-    src: string;
-    image: HTMLImageElement;
-    private scale;
-    private startX;
-    private startY;
-    private x;
-    private y;
-    private dragging;
-    render(): import("lit-html").TemplateResult<1>;
-    private handleWheel;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
-}

package/dist/src/ox-zoomable-image.js

@@ -1,80 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-let OxZoomableImage = class OxZoomableImage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.src = '';
-        this.scale = 1;
-        this.startX = 0;
-        this.startY = 0;
-        this.x = 0;
-        this.y = 0;
-        this.dragging = false;
-    }
-    static { this.styles = css `
-    :host {
-      display: block;
-      overflow: hidden;
-      position: relative;
-    }
-
-    img {
-      transition: transform 0.25s ease;
-      transform-origin: center;
-      cursor: grab;
-    }
-  `; }
-    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});"
-      />
-    `;
-    }
-    handleWheel(event) {
-        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();
-    }
-    handleMouseDown(event) {
-        this.startX = event.clientX - this.x;
-        this.startY = event.clientY - this.y;
-        this.dragging = true;
-        const img = this.image;
-        img.style.cursor = 'grabbing';
-    }
-    handleMouseMove(event) {
-        if (!this.dragging)
-            return;
-        this.x = event.clientX - this.startX;
-        this.y = event.clientY - this.startY;
-        this.requestUpdate();
-    }
-    handleMouseUp() {
-        this.dragging = false;
-        const img = this.image;
-        img.style.cursor = 'grab';
-    }
-};
-__decorate([
-    property({ type: String })
-], OxZoomableImage.prototype, "src", void 0);
-__decorate([
-    query('img')
-], OxZoomableImage.prototype, "image", void 0);
-OxZoomableImage = __decorate([
-    customElement('ox-zoomable-image')
-], OxZoomableImage);
-export { OxZoomableImage };
-//# sourceMappingURL=ox-zoomable-image.js.map

package/dist/src/ox-zoomable-image.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-zoomable-image.js","sourceRoot":"","sources":["../../src/ox-zoomable-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAeuB,QAAG,GAAG,EAAE,CAAA;QAI5B,UAAK,GAAW,CAAC,CAAA;QACjB,WAAM,GAAW,CAAC,CAAA;QAClB,WAAM,GAAW,CAAC,CAAA;QAClB,MAAC,GAAW,CAAC,CAAA;QACb,MAAC,GAAW,CAAC,CAAA;QACb,aAAQ,GAAY,KAAK,CAAA;IA8CnC,CAAC;aArEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYZ;IAaD,MAAM;QACJ,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,GAAG;kBACL,IAAI,CAAC,WAAW;sBACZ,IAAI,CAAC,eAAe;sBACpB,IAAI,CAAC,eAAe;oBACtB,IAAI,CAAC,aAAa;uBACf,IAAI,CAAC,aAAa;sCACH,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,KAAK;;KAE3E,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAA;QAC1B,MAAM,aAAa,GAAG,GAAG,CAAA;QACzB,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAA;QACxD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;QACnD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAyB,CAAA;QAC1C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAA;IAC/B,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAyB,CAAA;QAC1C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;IAC3B,CAAC;;AAtD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAS;AAEtB;IAAb,KAAK,CAAC,KAAK,CAAC;8CAAyB;AAjB3B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAsE3B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-zoomable-image')\nexport class OxZoomableImage extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n\n    img {\n      transition: transform 0.25s ease;\n      transform-origin: center;\n      cursor: grab;\n    }\n  `\n\n  @property({ type: String }) src = ''\n\n  @query('img') image!: HTMLImageElement\n\n  private scale: number = 1\n  private startX: number = 0\n  private startY: number = 0\n  private x: number = 0\n  private y: number = 0\n  private dragging: boolean = false\n\n  render() {\n    return html`\n      <img\n        id=\"zoomableImage\"\n        src=\"${this.src}\"\n        @wheel=\"${this.handleWheel}\"\n        @mousedown=\"${this.handleMouseDown}\"\n        @mousemove=\"${this.handleMouseMove}\"\n        @mouseup=\"${this.handleMouseUp}\"\n        @mouseleave=\"${this.handleMouseUp}\"\n        style=\"transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});\"\n      />\n    `\n  }\n\n  private handleWheel(event: WheelEvent) {\n    event.preventDefault()\n    const delta = event.deltaY\n    const zoomIntensity = 0.1\n    this.scale += delta > 0 ? -zoomIntensity : zoomIntensity\n    this.scale = Math.max(0.1, Math.min(this.scale, 4))\n    this.requestUpdate()\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    this.startX = event.clientX - this.x\n    this.startY = event.clientY - this.y\n    this.dragging = true\n    const img = this.image as HTMLImageElement\n    img.style.cursor = 'grabbing'\n  }\n\n  private handleMouseMove(event: MouseEvent) {\n    if (!this.dragging) return\n    this.x = event.clientX - this.startX\n    this.y = event.clientY - this.startY\n    this.requestUpdate()\n  }\n\n  private handleMouseUp() {\n    this.dragging = false\n    const img = this.image as HTMLImageElement\n    img.style.cursor = 'grab'\n  }\n}\n"]}

package/src/ox-zoomable-image.ts

@@ -1,75 +0,0 @@
-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'
-  }
-}