@operato/input 9.0.0-beta.11 → 9.0.0-beta.14

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

@@ -0,0 +1,120 @@
+import '../src/ox-select.js';
+import '../src/ox-checkbox.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
+export default {
+    title: 'ox-select-images',
+    component: 'ox-select',
+    argTypes: {
+        placeholder: { control: 'text' },
+        name: { control: 'text' },
+        disabled: { control: 'boolean' }
+    }
+};
+const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot, disabled }) => 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: 250px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+
+    ox-select {
+      width: 160px;
+    }
+  </style>
+
+  <style>
+    .line-type {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)
+        50% 0 no-repeat;
+      min-height: 24px;
+      padding: 3px 7px;
+    }
+
+    .line-type.solid {
+      background-position: 50% 14px;
+    }
+    .line-type.round-dot {
+      background-position: 50% -36px;
+    }
+    .line-type.square-dot {
+      background-position: 50% -86px;
+    }
+    .line-type.dash {
+      background-position: 50% -136px;
+    }
+    .line-type.dash-dot {
+      background-position: 50% -186px;
+    }
+    .line-type.long-dash {
+      background-position: 50% -236px;
+    }
+    .line-type.long-dash-dot {
+      background-position: 50% -286px;
+    }
+    .line-type.long-dash-dot-dot {
+      background-position: 50% -336px;
+    }
+  </style>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-select
+      name=${name}
+      @change=${(e) => {
+    console.log(e.target.value);
+}}
+      placeholder=${placeholder}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+      ${slot}
+    </ox-select>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    placeholder: 'single select',
+    name: 'label',
+    value: '',
+    slot: html `
+    <div class="line-type dash" slot="label"></div>
+    <ox-popup-list align-left nowrap>
+      <div class="line-type solid" value="solid" option></div>
+      <div class="line-type round-dot" value="round-dot" option></div>
+      <div class="line-type square-dot" value="square-dot" option></div>
+      <div class="line-type dash" value="dash" option></div>
+      <div class="line-type dash-dot" value="dash-dot" option></div>
+      <div class="line-type long-dash" value="long-dash" option></div>
+      <div class="line-type long-dash-dot" value="long-dash-dot" option></div>
+      <div class="line-type long-dash-dot-dot" value="long-dash-dot-dot" option></div>
+    </ox-popup-list>
+  `
+};
+//# sourceMappingURL=ox-select-images.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-select-images.stories.js","sourceRoot":"","sources":["../../stories/ox-select-images.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAsDlB,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;oBACa,WAAW;eAChB,KAAK;kBACF,QAAQ;;QAElB,IAAI;;;CAGX,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,IAAI,CAAA;;;;;;;;;;;;GAYT;CACF,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-select-images',\n  component: 'ox-select',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: object | string\n  slot?: TemplateResult\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  slot,\n  disabled\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    .container {\n      height: 250px;\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    ox-select {\n      width: 160px;\n    }\n  </style>\n\n  <style>\n    .line-type {\n      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)\n        50% 0 no-repeat;\n      min-height: 24px;\n      padding: 3px 7px;\n    }\n\n    .line-type.solid {\n      background-position: 50% 14px;\n    }\n    .line-type.round-dot {\n      background-position: 50% -36px;\n    }\n    .line-type.square-dot {\n      background-position: 50% -86px;\n    }\n    .line-type.dash {\n      background-position: 50% -136px;\n    }\n    .line-type.dash-dot {\n      background-position: 50% -186px;\n    }\n    .line-type.long-dash {\n      background-position: 50% -236px;\n    }\n    .line-type.long-dash-dot {\n      background-position: 50% -286px;\n    }\n    .line-type.long-dash-dot-dot {\n      background-position: 50% -336px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-select\n      name=${name}\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      placeholder=${placeholder}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n      ${slot}\n    </ox-select>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'single select',\n  name: 'label',\n  value: '',\n  slot: html`\n    <div class=\"line-type dash\" slot=\"label\"></div>\n    <ox-popup-list align-left nowrap>\n      <div class=\"line-type solid\" value=\"solid\" option></div>\n      <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n      <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n      <div class=\"line-type dash\" value=\"dash\" option></div>\n      <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n      <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n      <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n      <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n    </ox-popup-list>\n  `\n}\n"]}