@digital-realty/ix-textbox 2.0.1 → 2.0.5

package/src/ix-textbox-styles.ts

@@ -1,59 +1,59 @@
-import { css } from 'lit';
-
-export const IxTextboxStyles = css`
-  :host {
-    display: block;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  input {
-    display: block;
-    width: 100%;
-    padding: 0.5em;
-    font-size: 1rem;
-    line-height: 1.25rem;
-    border: 1px solid lightgrey;
-    background-repeat: no-repeat;
-    background-position: calc(100% - 0.5em) 50%;
-    border-radius: 3px;
-    box-sizing: border-box;
-  }
-
-  input:focus {
-    outline: none;
-    box-shadow: 0 0 2px 1px rgba(0, 153, 204, 0.39),
-      0 0 4px 3px rgba(0, 153, 204, 0.18), 0 0 8px 4px rgba(0, 153, 204, 0.1);
-  }
-
-  input:required.-is-valid {
-    border-color: #99ca3c;
-    background-image: url("data:image/svg+xml,%3Csvg width='19px' height='13px' viewBox='0 0 19 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cpolygon fill='%2399CA3C' points='6.70967742 13 0 6.29032258 2.09677419 4.19354839 6.70967742 8.80645161 16.3548387 0 18.4516129 2.09677419'%3E%3C/polygon%3E %3C/svg%3E");
-    padding-right: 2em;
-  }
-
-  input:required.-is-invalid {
-    border-color: #e3097c;
-    background-image: url("data:image/svg+xml,%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cpolygon id='Path' fill='%23E3097C' points='12.759145 0.0312229203 14.8804653 2.15254326 9.57716447 7.45584412 14.8804653 12.759145 12.759145 14.8804653 7.45584412 9.57716447 2.15254326 14.8804653 0.0312229203 12.759145 5.33452378 7.45584412 0.0312229203 2.15254326 2.15254326 0.0312229203 7.45584412 5.33452378'%3E%3C/polygon%3E %3C/svg%3E");
-    padding-right: 2em;
-  }
-
-  input[type='search'] {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Path_46' data-name='Path 46' d='M17.835-27.347l5.506,5.506a2.249,2.249,0,0,1,0,3.182,2.249,2.249,0,0,1-3.182,0h0l-5.506-5.506a10.6,10.6,0,0,0,3.182-3.182ZM9-42a9,9,0,0,1,9,9,9,9,0,0,1-9,9,9,9,0,0,1-9-9A9,9,0,0,1,9-42Zm0,2.25A6.757,6.757,0,0,0,2.25-33,6.757,6.757,0,0,0,9-26.25,6.757,6.757,0,0,0,15.75-33,6.758,6.758,0,0,0,9-39.75Zm0,1.5v1.5A3.754,3.754,0,0,0,5.25-33H3.75A5.256,5.256,0,0,1,9-38.25Z' transform='translate(0 42)' fill='%23d8d8d8' clip-rule='evenodd'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='icon_search' data-name='icon search' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_45' data-name='Path 45' d='M-1-43H24.363v25.363H-1Z' transform='translate(0.429 42.429)' fill='%23d8d8d8'/%3E%3C/g%3E%3C/svg%3E%0A");
-    background-position: 0.5em 50%;
-    padding-left: 2.25rem;
-  }
-
-  input:disabled {
-    border-width: 0 0 1px;
-    color: #595959;
-    border-color: lightgrey;
-  }
-
-  input:not([type='search']):disabled {
-    background-image: none;
-    padding-left: 0;
-  }
-`;
+import { css } from 'lit';
+
+export const IxTextboxStyles = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    padding: 0.5em;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    border: 1px solid lightgrey;
+    background-repeat: no-repeat;
+    background-position: calc(100% - 0.5em) 50%;
+    border-radius: 3px;
+    box-sizing: border-box;
+  }
+
+  input:focus {
+    outline: none;
+    box-shadow: 0 0 2px 1px rgba(0, 153, 204, 0.39),
+      0 0 4px 3px rgba(0, 153, 204, 0.18), 0 0 8px 4px rgba(0, 153, 204, 0.1);
+  }
+
+  input:required.-is-valid {
+    border-color: #99ca3c;
+    background-image: url("data:image/svg+xml,%3Csvg width='19px' height='13px' viewBox='0 0 19 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cpolygon fill='%2399CA3C' points='6.70967742 13 0 6.29032258 2.09677419 4.19354839 6.70967742 8.80645161 16.3548387 0 18.4516129 2.09677419'%3E%3C/polygon%3E %3C/svg%3E");
+    padding-right: 2em;
+  }
+
+  input:required.-is-invalid {
+    border-color: #e3097c;
+    background-image: url("data:image/svg+xml,%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cpolygon id='Path' fill='%23E3097C' points='12.759145 0.0312229203 14.8804653 2.15254326 9.57716447 7.45584412 14.8804653 12.759145 12.759145 14.8804653 7.45584412 9.57716447 2.15254326 14.8804653 0.0312229203 12.759145 5.33452378 7.45584412 0.0312229203 2.15254326 2.15254326 0.0312229203 7.45584412 5.33452378'%3E%3C/polygon%3E %3C/svg%3E");
+    padding-right: 2em;
+  }
+
+  input[type='search'] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Path_46' data-name='Path 46' d='M17.835-27.347l5.506,5.506a2.249,2.249,0,0,1,0,3.182,2.249,2.249,0,0,1-3.182,0h0l-5.506-5.506a10.6,10.6,0,0,0,3.182-3.182ZM9-42a9,9,0,0,1,9,9,9,9,0,0,1-9,9,9,9,0,0,1-9-9A9,9,0,0,1,9-42Zm0,2.25A6.757,6.757,0,0,0,2.25-33,6.757,6.757,0,0,0,9-26.25,6.757,6.757,0,0,0,15.75-33,6.758,6.758,0,0,0,9-39.75Zm0,1.5v1.5A3.754,3.754,0,0,0,5.25-33H3.75A5.256,5.256,0,0,1,9-38.25Z' transform='translate(0 42)' fill='%23d8d8d8' clip-rule='evenodd'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='icon_search' data-name='icon search' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_45' data-name='Path 45' d='M-1-43H24.363v25.363H-1Z' transform='translate(0.429 42.429)' fill='%23d8d8d8'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-position: 0.5em 50%;
+    padding-left: 2.25rem;
+  }
+
+  input:disabled {
+    border-width: 0 0 1px;
+    color: #595959;
+    border-color: lightgrey;
+  }
+
+  input:not([type='search']):disabled {
+    background-image: none;
+    padding-left: 0;
+  }
+`;

package/src/ix-textbox.ts

@@ -1,3 +1,3 @@
-import { IxTextbox } from './IxTextbox.js';
-
-window.customElements.define('ix-textbox', IxTextbox);
+import { IxTextbox } from './IxTextbox.js';
+
+window.customElements.define('ix-textbox', IxTextbox);

package/src/react/IxTextbox.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { IxTextbox as LitComp } from '../IxTextbox.js';
+
+window.customElements.define('ix-textbox', LitComp);
+
+export const IxTextbox = createComponent({
+  tagName: 'ix-textbox',
+  elementClass: LitComp,
+  react: React,
+});

package/src/types/index.ts

@@ -1,24 +1,29 @@
-/**
- * Input types that are compatible with the text field.
- */
-export type TextFieldType =
-  | 'email'
-  | 'number'
-  | 'password'
-  | 'search'
-  | 'tel'
-  | 'text'
-  | 'url'
-  | 'textarea';
-
-/**
- * Input types that are not fully supported for the text field.
- */
-export type UnsupportedTextFieldType =
-  | 'color'
-  | 'date'
-  | 'datetime-local'
-  | 'file'
-  | 'month'
-  | 'time'
-  | 'week';
+/**
+ * Input types that are compatible with the text field.
+ */
+export type TextFieldType =
+  | 'email'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'url'
+  | 'textarea';
+
+/**
+ * Input types that are not fully supported for the text field.
+ */
+export type UnsupportedTextFieldType =
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'file'
+  | 'month'
+  | 'time'
+  | 'week';
+
+/**
+ * The event that is fired when the text field's value changes.
+ */
+export type TextChangeEvent = CustomEvent<{ value: string }>;

package/test/ix-textbox.test.ts

@@ -1,32 +1,32 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-import { IxTextbox } from '../src/IxTextbox.js';
-import '../src/ix-textbox.js';
-
-describe('IxTextbox', () => {
-  it('should show the outlined text field by default', async () => {
-    const el = await fixture<IxTextbox>(html`<ix-textbox></ix-textbox>`);
-    console.log(el.innerHTML);
-    const outlinedTextField = el.shadowRoot?.querySelector(
-      'md-outlined-text-field'
-    );
-    const filledTextField = el.shadowRoot?.querySelector(
-      'md-filled-text-field'
-    );
-    expect(outlinedTextField).to.not.be.null;
-    expect(filledTextField).to.be.null;
-  });
-  it('should show the filled text field when outlined is false', async () => {
-    const el = await fixture<IxTextbox>(
-      html`<ix-textbox .outlined=${false}></ix-textbox>`
-    );
-    const outlinedTextField = el.shadowRoot?.querySelector(
-      'md-outlined-text-field'
-    );
-    const filledTextField = el.shadowRoot?.querySelector(
-      'md-filled-text-field'
-    );
-    expect(outlinedTextField).to.be.null;
-    expect(filledTextField).to.not.be.null;
-  });
-});
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { IxTextbox } from '../src/IxTextbox.js';
+import '../src/ix-textbox.js';
+
+describe('IxTextbox', () => {
+  it('should show the outlined text field by default', async () => {
+    const el = await fixture<IxTextbox>(html`<ix-textbox></ix-textbox>`);
+    console.log(el.innerHTML);
+    const outlinedTextField = el.shadowRoot?.querySelector(
+      'md-outlined-text-field'
+    );
+    const filledTextField = el.shadowRoot?.querySelector(
+      'md-filled-text-field'
+    );
+    expect(outlinedTextField).to.not.be.null;
+    expect(filledTextField).to.be.null;
+  });
+  it('should show the filled text field when outlined is false', async () => {
+    const el = await fixture<IxTextbox>(
+      html`<ix-textbox .outlined=${false}></ix-textbox>`
+    );
+    const outlinedTextField = el.shadowRoot?.querySelector(
+      'md-outlined-text-field'
+    );
+    const filledTextField = el.shadowRoot?.querySelector(
+      'md-filled-text-field'
+    );
+    expect(outlinedTextField).to.be.null;
+    expect(filledTextField).to.not.be.null;
+  });
+});

package/tsconfig.json

@@ -1,22 +1,22 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "noImplicitAny": false
-  },
-  "include": ["**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "noImplicitAny": false
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -1,27 +1,27 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -1,41 +1,41 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/demo/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../dist/src/ix-textbox.js';
-
-    const header = 'Hello owc World!';
-    render(
-      html`
-        <ix-textbox .header=${header}>
-          some light-dom
-        </ix-textbox>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/dist/stories/index.stories.d.ts

@@ -1,33 +0,0 @@
-import { TemplateResult } from 'lit';
-import '../src/ix-textbox.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        header: {
-            control: string;
-        };
-        counter: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    header?: string;
-    counter?: number;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomHeader: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -1,37 +0,0 @@
-import { html } from 'lit';
-import '../src/ix-textbox.js';
-export default {
-    title: 'IxTextbox',
-    component: 'ix-textbox',
-    argTypes: {
-        header: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' },
-    },
-};
-const Template = ({ header = 'Hello world', counter = 5, textColor, slot, }) => html `
-  <ix-textbox
-    style="--ix-textbox-text-color: ${textColor || 'black'}"
-    .header=${header}
-    .counter=${counter}
-  >
-    ${slot}
-  </ix-textbox>
-`;
-export const Regular = Template.bind({});
-export const CustomHeader = Template.bind({});
-CustomHeader.args = {
-    header: 'My header',
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456,
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,CAAC,EACX,SAAS,EACT,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;;sCAEkB,SAAS,IAAI,OAAO;cAC5C,MAAM;eACL,OAAO;;MAEhB,IAAI;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,WAAW;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/ix-textbox.js';\n\nexport default {\n  title: 'IxTextbox',\n  component: 'ix-textbox',\n  argTypes: {\n    header: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  header?: string;\n  counter?: number;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  header = 'Hello world',\n  counter = 5,\n  textColor,\n  slot,\n}: ArgTypes) => html`\n  <ix-textbox\n    style=\"--ix-textbox-text-color: ${textColor || 'black'}\"\n    .header=${header}\n    .counter=${counter}\n  >\n    ${slot}\n  </ix-textbox>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomHeader = Template.bind({});\nCustomHeader.args = {\n  header: 'My header',\n};\n\nexport const CustomCounter = Template.bind({});\nCustomCounter.args = {\n  counter: 123456,\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}