diff --git a/.github/workflows/test-on-pr-branch.yml b/.github/workflows/test-on-pr-branch.yml
index c40bd08..b1612c9 100644
--- a/.github/workflows/test-on-pr-branch.yml
+++ b/.github/workflows/test-on-pr-branch.yml
@@ -11,7 +11,7 @@ jobs:
- name: Set up Node.js
uses: actions/setup-node@v3
with:
- node-version: '16'
+ node-version: '20'
- name: Install dependencies
run: npm ci
@@ -20,4 +20,4 @@ jobs:
run: npx playwright install --with-deps
- name: Run tests
- run: npm run-script test
+ run: npm run test
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 9841d3d..2ab516e 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,27 +1,9 @@
name: Test
-on: push
-jobs:
- unit:
- runs-on: ubuntu-20.04
- steps:
- - name: Checkout
- uses: actions/checkout@v3
+on: workflow_dispatch
- - name: Set up Node.js
- uses: actions/setup-node@v3
- with:
- node-version: '16'
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install playwright browsers
- run: npx playwright install --with-deps
-
- - name: Run unit tests
- run: npm run-script test:unit
- visual:
+jobs:
+ test:
runs-on: ubuntu-20.04
steps:
- name: Checkout
@@ -30,7 +12,7 @@ jobs:
- name: Set up Node.js
uses: actions/setup-node@v3
with:
- node-version: '16'
+ node-version: '20'
- name: Install dependencies
run: npm ci
@@ -38,16 +20,5 @@ jobs:
- name: Install playwright browsers
run: npx playwright install --with-deps
- - name: Run visual test
- run: npm run-script test:visual
-
- - name: Update screenshots
- if: failure()
- run: npm run test:update
-
- - name: Commit changes
- if: failure()
- uses: EndBug/add-and-commit@v9
- with:
- message: 'ci: update screenshots'
- add: 'screenshots'
+ - name: Run tests
+ run: npm run test
\ No newline at end of file
diff --git a/.storybook/server.mjs b/.storybook/server.mjs
index 9e91906..d2bf8d9 100644
--- a/.storybook/server.mjs
+++ b/.storybook/server.mjs
@@ -1,8 +1,13 @@
import { storybookPlugin } from '@web/dev-server-storybook';
import baseConfig from '../web-dev-server.config.mjs';
+import { polyfill } from '@web/dev-server-polyfill';
+
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
...baseConfig,
open: '/',
- plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+ plugins: [
+ polyfill({
+ scopedCustomElementRegistry: true,
+ }),storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
});
diff --git a/README.md b/README.md
index 802bc9b..1fd0e4d 100644
--- a/README.md
+++ b/README.md
@@ -7,9 +7,9 @@ This is a web component meant to be used for SCL type attributes. In addition to
This element was meant to be used only for plugins in this organization. If it still fills you bill please use or re-use it. But be aware that we will not react on features wishes that do not contribute to the needs of plugin in this organization.
-## `scl-text-field.ts`:
+## `SclTextField.ts`:
-### class: `SclTextField`
+### class: `SclTextField`, `scl-text-field`
#### Superclass
@@ -17,28 +17,47 @@ This element was meant to be used only for plugins in this organization. If it s
| ------------ | ------ | ------- |
| `LitElement` | | lit |
+#### Mixins
+
+| Name | Module | Package |
+| --------------------- | ------ | --------------------------------------- |
+| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js |
+
+#### Static Fields
+
+| Name | Privacy | Type | Default | Description | Inherited From |
+| ---------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |
+| `scopedElements` | | `object` | `{
+ 'md-filled-text-field': MdFilledTextField,
+ 'md-switch': MdSwitch,
+ 'md-icon': MdIcon,
+ 'md-icon-button': MdIconButton,
+ 'md-menu': MdMenu,
+ 'md-menu-item': MdMenuItem,
+ }` | | |
+
#### Fields
-| Name | Privacy | Type | Default | Description | Inherited From |
-| ---------------- | ------- | --------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- | -------------- |
-| `nullable` | | `boolean` | `false` | Whether \[\[\`value\`]] may be set to \`null\` by nullSwitch | |
-| `value` | | `string \| null` | | SCL attributes \`value\`, can only be \`null\` if \[\[\`nullable\`]]. | |
-| `disabled` | | `boolean` | `false` | | |
-| `label` | | `string` | `''` | | |
-| `required` | | `boolean` | `false` | | |
-| `supportingText` | | `string` | `''` | | |
-| `suffixText` | | `string` | `''` | The inputs suffix text so long there is no \[\[\`unit\`]] defined | |
-| `placeholder` | | `string` | `''` | | |
-| `type` | | `'number' \| 'text'` | `'text'` | | |
-| `pattern` | | `string` | `''` | | |
-| `max` | | `string` | `''` | | |
-| `min` | | `string` | `''` | | |
-| `maxLength` | | `number` | `-1` | | |
-| `minLength` | | `number` | `-1` | | |
-| `unit` | | `string` | `''` | SI Unit, must be non-empty to allow for selecting a \[\[\`multiplier\`]].
Overrides \[\[\`suffixText\`]]. | |
-| `multipliers` | | `array` | `[null, '']` | Selectable SI multipliers for a non-empty \[\[\`unit\`]]. | |
-| `multiplier` | | `string \| null` | | The current selected \[\[\`multiplier\`]] | |
-| `nullSwitch` | | `Switch \| undefined` | | | |
+| Name | Privacy | Type | Default | Description | Inherited From |
+| ---------------- | ------- | ----------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- | -------------- |
+| `nullable` | | `boolean` | `false` | Whether \[\[\`value\`]] may be set to \`null\` by nullSwitch | |
+| `value` | | `string \| null` | | SCL attributes \`value\`, can only be \`null\` if \[\[\`nullable\`]]. | |
+| `disabled` | | `boolean` | `false` | | |
+| `label` | | `string` | `''` | | |
+| `required` | | `boolean` | `false` | | |
+| `supportingText` | | `string` | `''` | | |
+| `suffixText` | | `string` | `''` | The inputs suffix text so long there is no \[\[\`unit\`]] defined | |
+| `placeholder` | | `string` | `''` | | |
+| `type` | | `'number' \| 'text'` | `'text'` | | |
+| `pattern` | | `string` | `''` | | |
+| `max` | | `string` | `''` | | |
+| `min` | | `string` | `''` | | |
+| `maxLength` | | `number` | `-1` | | |
+| `minLength` | | `number` | `-1` | | |
+| `unit` | | `string` | `''` | SI Unit, must be non-empty to allow for selecting a \[\[\`multiplier\`]].
Overrides \[\[\`suffixText\`]]. | |
+| `multipliers` | | `array` | `[null, '']` | Selectable SI multipliers for a non-empty \[\[\`unit\`]]. | |
+| `multiplier` | | `string \| null` | | The current selected \[\[\`multiplier\`]] | |
+| `nullSwitch` | | `MdSwitch \| undefined` | | | |
#### Methods
@@ -66,7 +85,7 @@ This element was meant to be used only for plugins in this organization. If it s
| `isNull` | private | `boolean` | `false` | | |
| `parkedValue` | private | `string \| null` | `null` | | |
| `null` | private | `boolean` | | | |
-| `multiplierMenu` | private | `Menu \| undefined` | | | |
+| `multiplierMenu` | private | `MdMenu \| undefined` | | | |
| `textField` | private | `TextField \| undefined` | | | |
#### Methods
@@ -86,9 +105,17 @@ This element was meant to be used only for plugins in this organization. If it s
### Exports
-| Kind | Name | Declaration | Module | Package |
-| ---- | -------------- | ------------ | ----------------- | ------- |
-| `js` | `SclTextField` | SclTextField | scl-text-field.ts | |
+| Kind | Name | Declaration | Module | Package |
+| ---- | -------------- | ------------ | --------------- | ------- |
+| `js` | `SclTextField` | SclTextField | SclTextField.ts | |
+
+## `scl-text-field.ts`:
+
+### Exports
+
+| Kind | Name | Declaration | Module | Package |
+| --------------------------- | ---------------- | ------------ | ---------------- | ------- |
+| `custom-element-definition` | `scl-text-field` | SclTextField | /SclTextField.js | |
© 2023 The Contributors
diff --git a/SclTextField.ts b/SclTextField.ts
new file mode 100644
index 0000000..9d8ec30
--- /dev/null
+++ b/SclTextField.ts
@@ -0,0 +1,281 @@
+import { css, html, LitElement, TemplateResult } from 'lit';
+
+import { property, query, state } from 'lit/decorators.js';
+
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+
+import {
+ CloseMenuEvent,
+ MdMenu,
+} from '@scopedelement/matarial-web/menu/MdMenu.js';
+import { MdFilledTextField } from '@scopedelement/matarial-web/textfield/MdFilledTextField.js';
+import { MdIcon } from '@scopedelement/matarial-web/icon/MdIcon.js';
+import { MdIconButton } from '@scopedelement/matarial-web/iconbutton/MdIconButton.js';
+import { MdMenuItem } from '@scopedelement/matarial-web/menu/MdMenuItem.js';
+import { MdSwitch } from '@scopedelement/matarial-web/switch/MdSwtich.js';
+import { TextField } from '@scopedelement/matarial-web/textfield/internal/text-field';
+
+/** TextField designed to be used for SCL element */
+export class SclTextField extends ScopedElementsMixin(LitElement) {
+ static scopedElements = {
+ 'md-filled-text-field': MdFilledTextField,
+ 'md-switch': MdSwitch,
+ 'md-icon': MdIcon,
+ 'md-icon-button': MdIconButton,
+ 'md-menu': MdMenu,
+ 'md-menu-item': MdMenuItem,
+ };
+
+ /** Whether [[`value`]] may be set to `null` by nullSwitch */
+ @property({ type: Boolean })
+ nullable = false;
+
+ @state()
+ private textFieldValue: string = '';
+
+ /** SCL attributes `value`, can only be `null` if [[`nullable`]]. */
+ @property({ type: String })
+ set value(value: string | null) {
+ if (value === null) this.null = true;
+ else {
+ this.null = false;
+ this.textFieldValue = value;
+ }
+ }
+
+ get value(): string | null {
+ return this.null ? null : this.textFieldValue;
+ }
+
+ @property({ type: Boolean })
+ disabled: boolean = false;
+
+ @property({ type: String })
+ label: string = '';
+
+ @property({ type: Boolean })
+ required: boolean = false;
+
+ @property({ type: String })
+ supportingText: string = '';
+
+ /** The inputs suffix text so long there is no [[`unit`]] defined */
+ @property({ type: String })
+ suffixText: string = '';
+
+ @property({ type: String })
+ placeholder: string = '';
+
+ @property({ type: String })
+ type: 'number' | 'text' = 'text';
+
+ @property({ type: String })
+ pattern: string = '';
+
+ @property({ type: String })
+ max: string = '';
+
+ @property({ type: String })
+ min: string = '';
+
+ @property({ type: Number })
+ maxLength: number = -1;
+
+ @property({ type: Number })
+ minLength: number = -1;
+
+ /** SI Unit, must be non-empty to allow for selecting a [[`multiplier`]].
+ * Overrides [[`suffixText`]]. */
+ @property({ type: String })
+ unit = '';
+
+ private multiplierIndex = 0;
+
+ /** Selectable SI multipliers for a non-empty [[`unit`]]. */
+ @property({ type: Array })
+ multipliers = [null, ''];
+
+ /** The current selected [[`multiplier`]] */
+ @property({ type: String })
+ get multiplier(): string | null {
+ if (this.unit === '') return null;
+ return (
+ this.multipliers[this.multiplierIndex] ?? this.multipliers[0] ?? null
+ );
+ }
+
+ set multiplier(value: string | null) {
+ const index = this.multipliers.indexOf(value);
+ if (index >= 0) this.multiplierIndex = index;
+ this.suffixText = (this.multiplier ?? '') + this.unit;
+ }
+
+ @state()
+ private isNull = false;
+
+ private parkedValue: string | null = null;
+
+ @state()
+ private get null(): boolean {
+ return this.nullable && this.isNull;
+ }
+
+ private set null(value: boolean) {
+ if (!this.nullable || value === this.isNull) return;
+ this.isNull = value;
+ // if (this.isNull) this.parkValue();
+ // else this.returnParkedValue();
+ }
+
+ @query('.nullswitch.element') nullSwitch?: MdSwitch;
+
+ @query('.multipliers') private multiplierMenu?: MdMenu;
+
+ @query('.input.element') private textField?: TextField;
+
+ reportValidity(): boolean {
+ return this.textField!.reportValidity();
+ }
+
+ setCustomValidity(message: string): void {
+ this.textField?.setCustomValidity(message);
+ }
+
+ checkValidity(): boolean {
+ return this.textField!.checkValidity();
+ }
+
+ reset(): void {
+ return this.textField!.reset();
+ }
+
+ private returnParkedValue(): void {
+ if (this.parkedValue === null) return;
+ this.textFieldValue = this.parkedValue;
+ this.parkedValue = null;
+ }
+
+ private parkValue(): void {
+ if (this.parkedValue !== null) return;
+ this.parkedValue = this.textFieldValue;
+ }
+
+ private selectMultiplier(se: CloseMenuEvent): void {
+ let selection =
+ se.detail.initiator.querySelector(':scope > div')?.textContent;
+
+ if (selection === 'No multiplier') selection = null;
+ if (selection !== undefined) this.multiplier = selection;
+ }
+
+ private renderMultiplierList(): TemplateResult {
+ return html`${this.multipliers.map(multiplier => {
+ const value = multiplier === null ? 'No multiplier' : multiplier;
+
+ return html`${value}
+ `;
+ })}`;
+ }
+
+ private renderUnitSelector(): TemplateResult {
+ if (this.multipliers.length && this.unit)
+ return html`
+ this.multiplierMenu?.show()}
+ >more
+ ${this.renderMultiplierList()}
+
`;
+
+ return html``;
+ }
+
+ private renderNullSwitch(): TemplateResult {
+ if (this.nullable) {
+ return html``;
+ }
+ return html``;
+ }
+
+ render(): TemplateResult {
+ return html`
+
+
+
+
+ ${this.renderUnitSelector()}
+
${this.renderNullSwitch()}
+
${value}
- `;
- })}`;
- }
-
- private renderUnitSelector(): TemplateResult {
- if (this.multipliers.length && this.unit)
- return html`
- this.multiplierMenu?.show()}
- >more
- ${this.renderMultiplierList()}
-
`;
-
- return html``;
- }
-
- private renderNullSwitch(): TemplateResult {
- if (this.nullable) {
- return html``;
- }
- return html``;
- }
-
- render(): TemplateResult {
- return html`
-
-
-
-
- ${this.renderUnitSelector()}
-
${this.renderNullSwitch()}
-