@digital-realty/ix-textbox 2.0.5 → 2.1.2

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

@@ -1,11 +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,
-});
+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,29 +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';
-
-/**
- * The event that is fired when the text field's value changes.
- */
-export type TextChangeEvent = CustomEvent<{ value: string }>;
+/**
+ * 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,43 @@
-// 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'],
+  },
+
+  port: 8019,
+
+  /** 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
+});