@operato/input 8.0.0-alpha.3 → 8.0.0-alpha.33

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

@@ -0,0 +1,41 @@
+import '../src/ox-select-floor.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        bottomLimit: {
+            control: string;
+        };
+        perspective: {
+            control: string;
+        };
+        rotateX: {
+            control: string;
+        };
+        rotateXForActive: {
+            control: string;
+        };
+    };
+};
+export default _default;
+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;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-select-floor.stories.js

@@ -0,0 +1,163 @@
+import '../src/ox-select-floor.js';
+import { html } 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' }
+    }
+};
+const cards = new Array(10).fill({}).map((_, index) => {
+    return {
+        image: IMAGE,
+        name: index + 1 + '층'
+    };
+});
+const Template = ({ value, disabled, bottomLimit = 70, perspective = 1200, rotateX = 60, rotateXForActive = 40 }) => 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}
+      @change=${(e) => console.log(e.target.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
+};
+//# sourceMappingURL=ox-select-floor.stories.js.map

package/dist/stories/ox-select-floor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-select-floor.stories.js","sourceRoot":"","sources":["../../stories/ox-select-floor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEnD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,gBAAgB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KACxC;CACF,CAAA;AAiBD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;IACpD,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK,GAAG,CAAC,GAAG,GAAG;KACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,EAAE,EAChB,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,EAAE,EACZ,gBAAgB,GAAG,EAAE,EACZ,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwFK,OAAO;2CACA,gBAAgB;uCACpB,WAAW;;;;;;eAMnC,KAAK;qBACC,WAAW;kBACd,QAAQ;gBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAG,CAAiB,CAAC,MAAe,CAAC,KAAK,CAAC;;QAE5E,KAAK,CAAC,GAAG,CACT,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,CAAA,uBAAuB,KAAK;;;;;;yBAMjB,IAAI;iBACZ,CACV;;;CAGN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,EAAE;IACX,gBAAgB,EAAE,EAAE;CACrB,CAAA","sourcesContent":["import '../src/ox-select-floor.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { IMAGE } from './image-for-select-floor.js'\n\nexport default {\n  title: 'ox-select-floor',\n  component: 'ox-select-floor',\n  argTypes: {\n    disabled: { control: 'boolean' },\n    value: { control: 'text' },\n    bottomLimit: { control: 'number' },\n    perspective: { control: 'number' },\n    rotateX: { control: 'number' },\n    rotateXForActive: { control: 'number' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: string\n  bottomLimit?: number\n  perspective?: number\n  rotateX?: number\n  rotateXForActive?: number\n  disabled?: boolean\n}\n\nconst cards = new Array(10).fill({}).map((_, index) => {\n  return {\n    image: IMAGE,\n    name: index + 1 + '층'\n  }\n})\n\nconst Template: Story<ArgTypes> = ({\n  value,\n  disabled,\n  bottomLimit = 70,\n  perspective = 1200,\n  rotateX = 60,\n  rotateXForActive = 40\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    html,\n    body {\n      margin: 0;\n      padding: 0;\n      overflow: hidden;\n\n      overscroll-behavior-y: none;\n\n      /* This is a font-stack that tries to use the system-default sans-serifs first */\n      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n      line-height: 1.5;\n      -webkit-font-smoothing: antialiased;\n\n      accent-color: var(--md-sys-color-primary);\n      background-color: var(--md-sys-color-background);\n    }\n\n    .container {\n      height: 1000px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    div[status] {\n      display: flex;\n      position: absolute;\n      right: 0px;\n      bottom: 0px;\n      align-items: center;\n      right: 3%;\n    }\n\n    div[status] > div[content] {\n      display: flex;\n      background-color: #4e5055;\n      color: #fff;\n      padding: 5px 7px;\n      border-radius: 7px;\n      gap: 10px;\n      font-size: 14px;\n    }\n\n    div[status] span {\n      display: flex;\n      align-items: center;\n      width: 48px;\n    }\n\n    div[status] md-icon {\n      width: 20px;\n      height: 20px;\n      margin-right: 4px;\n      border-radius: 5px;\n      font-size: 21px;\n      font-weight: 700;\n    }\n    div[status] md-icon[request] {\n      background-color: #f7f7f7;\n      color: #4e5055;\n    }\n    div[status] md-icon[pass] {\n      background-color: #4bbb4a;\n    }\n    div[status] md-icon[fail] {\n      background-color: #ff4444;\n    }\n\n    span[name] {\n      width: 40px;\n      color: #4e5055;\n      margin-left: 6px;\n      text-align: center;\n    }\n\n    span[name][active] {\n      color: var(--md-sys-color-on-error);\n      background-color: var(--md-sys-color-error);\n      border-radius: 999px;\n    }\n\n    ox-select-floor {\n      --ox-select-floor-rotate-x: ${rotateX}deg;\n      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;\n      --ox-select-floor-perspective: ${perspective}px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-select-floor\n      .cards=${cards}\n      .bottomLimit=${bottomLimit}\n      ?disabled=${disabled}\n      @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}\n    >\n      ${cards.map(\n        ({ image, name }, index) =>\n          html`<div slot=\"template-${index}\" status>\n            <div content>\n              <span><md-icon request slot=\"icon\">exclamation</md-icon>100</span>\n              <span><md-icon pass slot=\"icon\">check</md-icon>50</span>\n              <span><md-icon fail slot=\"icon\">close</md-icon>5</span>\n            </div>\n            <span name>${name}</span>\n          </div>`\n      )}\n    </ox-select-floor>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  bottomLimit: 70,\n  perspective: 1200,\n  rotateX: 60,\n  rotateXForActive: 40\n}\n"]}