From 1b0a4c5e44bf4840c177e767eaea6b9bfc2ef550 Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 18 Jan 2024 17:11:29 +0200 Subject: [PATCH] feat(form-elements): Adding default value for input fields where missing --- .github/workflows/ci.yml | 12 ++-- patches/@ecl+builder+3.11.0.patch | 67 ------------------- patches/@ecl+theme-dev+3.11.0.patch | 19 ------ ...l+vanilla-component-accordion+3.11.0.patch | 29 -------- ...@ecl+vanilla-component-button+3.11.0.patch | 15 ----- .../@ecl+vanilla-component-card+3.11.0.patch | 12 ---- ...cl+vanilla-component-carousel+3.11.0.patch | 13 ---- ...lla-component-category-filter+3.11.0.patch | 48 ------------- ...nilla-component-content-block+3.11.0.patch | 13 ---- ...@ecl+vanilla-component-select+3.13.0.patch | 13 ++++ src/components.d.ts | 8 ++- src/components/ecl-range/ecl-range.tsx | 6 +- .../ecl-search-form/ecl-search-form.tsx | 2 + src/components/ecl-search-form/readme.md | 37 +++++----- .../ecl-select/ecl-select.stories.ts | 5 +- src/components/ecl-select/ecl-select.tsx | 32 +++++++-- src/components/ecl-select/readme.md | 2 +- .../ecl-textarea/ecl-textarea.stories.ts | 2 +- src/components/ecl-textarea/ecl-textarea.tsx | 11 ++- src/components/ecl-textarea/readme.md | 31 ++++----- 20 files changed, 97 insertions(+), 280 deletions(-) delete mode 100644 patches/@ecl+builder+3.11.0.patch delete mode 100644 patches/@ecl+theme-dev+3.11.0.patch delete mode 100644 patches/@ecl+vanilla-component-accordion+3.11.0.patch delete mode 100644 patches/@ecl+vanilla-component-button+3.11.0.patch delete mode 100644 patches/@ecl+vanilla-component-card+3.11.0.patch delete mode 100644 patches/@ecl+vanilla-component-carousel+3.11.0.patch delete mode 100644 patches/@ecl+vanilla-component-category-filter+3.11.0.patch delete mode 100644 patches/@ecl+vanilla-component-content-block+3.11.0.patch create mode 100644 patches/@ecl+vanilla-component-select+3.13.0.patch diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7573b611..c30282ed 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -16,7 +16,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '18.8.2' - uses: amannn/action-semantic-pull-request@v5 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -27,7 +27,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '18.8.2' - name: Test run: ./scripts/audit.sh tests: @@ -37,7 +37,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '18.8.2' - name: Install dependencies run: yarn install --frozen-lockfile - name: Build stencil @@ -52,7 +52,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '18.8.2' - name: Install dependencies run: yarn install --frozen-lockfile - name: Package application @@ -74,7 +74,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '18.8.2' - name: Install dependencies run: yarn install --frozen-lockfile - name: Package application @@ -96,7 +96,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '18.8.2' - name: Install dependencies run: yarn install --frozen-lockfile - name: Package application diff --git a/patches/@ecl+builder+3.11.0.patch b/patches/@ecl+builder+3.11.0.patch deleted file mode 100644 index 76ad8f35..00000000 --- a/patches/@ecl+builder+3.11.0.patch +++ /dev/null @@ -1,67 +0,0 @@ -diff --git a/node_modules/@ecl/builder/bin/build.js b/node_modules/@ecl/builder/bin/build.js -index edd25b9..0c98c60 100755 ---- a/node_modules/@ecl/builder/bin/build.js -+++ b/node_modules/@ecl/builder/bin/build.js -@@ -62,7 +62,7 @@ program - .action(() => { - const config = loadConfig(program.config); - config.copy.forEach((conf) => -- copyFiles(conf.patterns || '**', conf.from, conf.to), -+ copyFiles(conf.from || "**", conf.to, conf.options), - ); - }); - -diff --git a/node_modules/@ecl/builder/scripts/copy.js b/node_modules/@ecl/builder/scripts/copy.js -index 30019d2..3bfefde 100644 ---- a/node_modules/@ecl/builder/scripts/copy.js -+++ b/node_modules/@ecl/builder/scripts/copy.js -@@ -1,23 +1,32 @@ --const fs = require('fs'); --const path = require('path'); --const { promisify } = require('util'); --const { ncp } = require('ncp'); --const globby = require('globby'); -+/** -+ * Copy files. -+ * -+ * @param {string} from - Path to a folder or file. -+ * @param {string} to - String to prefix, suffix or replace the current file name. -+ * @param {object} options - Object -+ * -+ * Example config object: { -+ * copy: [ -+ * { -+ * from: [path.resolve(nodeModules, "myfile.js")], -+ * to: path.resolve(outputFolder, "js"), -+ * options: { up: true }, -+ * }, -+ * ], -+ */ - --const copy = promisify(ncp); - --module.exports = (patterns, from, to) => { -- const executor = async () => { -- const paths = await globby(patterns, { nodir: true, cwd: from }); -- -- paths.map(async (file) => { -- const input = path.resolve(from, file); -- const dest = path.resolve(to, file); -+const fs = require("fs"); -+const path = require("path"); -+const copy = require("copyfiles"); - -- fs.mkdirSync(path.dirname(dest), { recursive: true }); -- await copy(input, dest); -- }); -+module.exports = (from, to, options) => { -+ const executor = async () => { -+ from.push(to); -+ await copy(from, options, function (err) { -+ if (err) console.error(err); -+ }) - }; - - executor(); --}; -+} diff --git a/patches/@ecl+theme-dev+3.11.0.patch b/patches/@ecl+theme-dev+3.11.0.patch deleted file mode 100644 index 802d3974..00000000 --- a/patches/@ecl+theme-dev+3.11.0.patch +++ /dev/null @@ -1,19 +0,0 @@ -diff --git a/node_modules/@ecl/theme-dev/maps/color.scss b/node_modules/@ecl/theme-dev/maps/color.scss -index 0c6ca02..42ecd0b 100644 ---- a/node_modules/@ecl/theme-dev/maps/color.scss -+++ b/node_modules/@ecl/theme-dev/maps/color.scss -@@ -32,12 +32,14 @@ $color: ( - 'blue-120': #003776, - 'blue-110': #003d84, - 'blue-100': #004494, -+ 'blue-80': #3e6cd5, - 'blue-75': #4073af, - 'blue-50': #7fa1c9, - 'blue-25': #bfd0e4, - 'blue-5': #f2f5f9, - 'green-100': #467a39, - 'grey-100': #404040, -+ 'grey-140': #171a22, - 'grey-75': #707070, - 'grey-50': #9f9f9f, - 'grey-25': #cfcfcf, diff --git a/patches/@ecl+vanilla-component-accordion+3.11.0.patch b/patches/@ecl+vanilla-component-accordion+3.11.0.patch deleted file mode 100644 index eaaf18a4..00000000 --- a/patches/@ecl+vanilla-component-accordion+3.11.0.patch +++ /dev/null @@ -1,29 +0,0 @@ -diff --git a/node_modules/@ecl/vanilla-component-accordion/accordion.js b/node_modules/@ecl/vanilla-component-accordion/accordion.js -index 85141a9..f06232d 100644 ---- a/node_modules/@ecl/vanilla-component-accordion/accordion.js -+++ b/node_modules/@ecl/vanilla-component-accordion/accordion.js -@@ -131,14 +131,21 @@ export class Accordion { - if (iconElement) { - const useNode = queryOne('use', iconElement); - if (useNode) { -- const originalXlinkHref = useNode.getAttribute('xlink:href'); -- let newXlinkHref = ''; -+ var originalXlinkHref = useNode.getAttribute('xlink:href'); -+ if (!originalXlinkHref) { -+ originalXlinkHref = useNode.getAttribute('href'); -+ } -+ var newXlinkHref = ''; - if (isExpanded) { - newXlinkHref = originalXlinkHref.replace('minus', 'plus'); - } else { - newXlinkHref = originalXlinkHref.replace('plus', 'minus'); - } -- useNode.setAttribute('xlink:href', newXlinkHref); -+ if (useNode.getAttribute('xlink:href')) { -+ useNode.setAttribute('xlink:href', newXlinkHref); -+ } else { -+ useNode.setAttribute('href', newXlinkHref); -+ } - } - } - diff --git a/patches/@ecl+vanilla-component-button+3.11.0.patch b/patches/@ecl+vanilla-component-button+3.11.0.patch deleted file mode 100644 index dbb7ab5c..00000000 --- a/patches/@ecl+vanilla-component-button+3.11.0.patch +++ /dev/null @@ -1,15 +0,0 @@ -diff --git a/node_modules/@ecl/vanilla-component-button/_button.scss b/node_modules/@ecl/vanilla-component-button/_button.scss -index 4531e25..8698461 100644 ---- a/node_modules/@ecl/vanilla-component-button/_button.scss -+++ b/node_modules/@ecl/vanilla-component-button/_button.scss -@@ -67,10 +67,6 @@ $_shadow-hover: null !default; - margin-inline-start: map.get(theme.$spacing, 'xs'); - } - --.ecl-button__icon:only-child { -- margin: 0; --} -- - /** - * Primary - */ diff --git a/patches/@ecl+vanilla-component-card+3.11.0.patch b/patches/@ecl+vanilla-component-card+3.11.0.patch deleted file mode 100644 index 292d5956..00000000 --- a/patches/@ecl+vanilla-component-card+3.11.0.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/node_modules/@ecl/vanilla-component-card/_card.scss b/node_modules/@ecl/vanilla-component-card/_card.scss -index 0c0e435..9722633 100644 ---- a/node_modules/@ecl/vanilla-component-card/_card.scss -+++ b/node_modules/@ecl/vanilla-component-card/_card.scss -@@ -23,7 +23,6 @@ $_body-padding: null !default; - border-radius: $_border-radius; - box-shadow: $_shadow; - box-sizing: border-box; -- height: 100%; - margin: 0; - overflow: hidden; - overflow-wrap: break-word; diff --git a/patches/@ecl+vanilla-component-carousel+3.11.0.patch b/patches/@ecl+vanilla-component-carousel+3.11.0.patch deleted file mode 100644 index fc565dda..00000000 --- a/patches/@ecl+vanilla-component-carousel+3.11.0.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/node_modules/@ecl/vanilla-component-carousel/carousel.js b/node_modules/@ecl/vanilla-component-carousel/carousel.js -index 3e1dc99..08cdab4 100644 ---- a/node_modules/@ecl/vanilla-component-carousel/carousel.js -+++ b/node_modules/@ecl/vanilla-component-carousel/carousel.js -@@ -131,6 +131,8 @@ export class Carousel { - this.direction = getComputedStyle(this.element).direction; - - this.slides = queryAll(this.slideClass, this.element); -+ this.slidesContainer.innerHTML = ''; -+ this.slidesContainer.append(...this.slides); - this.total = this.slides.length; - - // If only one slide, don't initialize carousel and hide controls \ No newline at end of file diff --git a/patches/@ecl+vanilla-component-category-filter+3.11.0.patch b/patches/@ecl+vanilla-component-category-filter+3.11.0.patch deleted file mode 100644 index 99508711..00000000 --- a/patches/@ecl+vanilla-component-category-filter+3.11.0.patch +++ /dev/null @@ -1,48 +0,0 @@ -diff --git a/node_modules/@ecl/vanilla-component-category-filter/category-filter.js b/node_modules/@ecl/vanilla-component-category-filter/category-filter.js -index 76b4353..ed7da7d 100644 ---- a/node_modules/@ecl/vanilla-component-category-filter/category-filter.js -+++ b/node_modules/@ecl/vanilla-component-category-filter/category-filter.js -@@ -90,21 +90,24 @@ export class CategoryFilter { - - const treeItem = e.target.closest('.ecl-category-filter__item'); - -+ const liItem = treeItem.closest('.ecl-category-filter__list-item'); -+ const ariaExpanded = liItem.getAttribute('aria-expanded'); -+ - if (treeItem.classList.contains('ecl-category-filter__item--level-1')) { -- this.items.forEach((item) => { -+ this.items.forEach(function (item) { - if (item !== treeItem) { -- item.parentElement.setAttribute('aria-expanded', 'false'); -+ liItem.setAttribute('aria-expanded', 'false'); - } - }); - -- if (treeItem.parentElement.getAttribute('aria-expanded') === 'true') { -- treeItem.parentElement.setAttribute('aria-expanded', 'false'); -- treeItem.classList.remove('ecl-category-filter__item--current'); -+ if (ariaExpanded === 'true') { -+ liItem.setAttribute('aria-expanded', 'false'); -+ liItem.classList.remove('ecl-category-filter__item--current'); - return; - } - } - -- this.items.forEach((item) => { -+ this.items.forEach(function (item) { - if (item === treeItem) { - item.classList.add('ecl-category-filter__item--current'); - } else { -@@ -112,11 +115,7 @@ export class CategoryFilter { - } - }); - -- const ariaExpanded = treeItem.parentElement.getAttribute('aria-expanded'); -- treeItem.parentElement.setAttribute( -- 'aria-expanded', -- ariaExpanded === 'false' ? 'true' : 'false', -- ); -+ liItem.setAttribute('aria-expanded', ariaExpanded === 'false' ? 'true' : 'false'); - } - } - diff --git a/patches/@ecl+vanilla-component-content-block+3.11.0.patch b/patches/@ecl+vanilla-component-content-block+3.11.0.patch deleted file mode 100644 index 1b8e52b3..00000000 --- a/patches/@ecl+vanilla-component-content-block+3.11.0.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/node_modules/@ecl/vanilla-component-content-block/content-block.js b/node_modules/@ecl/vanilla-component-content-block/content-block.js -index 6913470..ee23ad4 100644 ---- a/node_modules/@ecl/vanilla-component-content-block/content-block.js -+++ b/node_modules/@ecl/vanilla-component-content-block/content-block.js -@@ -72,7 +72,7 @@ export class ContentBlock { - } - - this.title = queryOne(this.titleSelector, this.element); -- this.linkEl = this.title ? queryOne('a', this.title) : false; -+ this.linkEl = this.title.nodeName === 'A' ? this.title : queryOne('a', this.title); - if (this.linkEl) { - this.picture.style.cursor = 'pointer'; - const img = queryOne('img', this.picture); diff --git a/patches/@ecl+vanilla-component-select+3.13.0.patch b/patches/@ecl+vanilla-component-select+3.13.0.patch new file mode 100644 index 00000000..22cd3c44 --- /dev/null +++ b/patches/@ecl+vanilla-component-select+3.13.0.patch @@ -0,0 +1,13 @@ +diff --git a/node_modules/@ecl/vanilla-component-select/select.js b/node_modules/@ecl/vanilla-component-select/select.js +index af9c468..5696a1a 100644 +--- a/node_modules/@ecl/vanilla-component-select/select.js ++++ b/node_modules/@ecl/vanilla-component-select/select.js +@@ -495,7 +495,7 @@ export class Select { + } + this.visibleOptions = this.checkboxes; + +- this.select.parentNode.parentNode.insertBefore( ++ this.select.closest('.ecl-form-group').insertBefore( + this.selectMultiple, + this.select.parentNode.nextSibling, + ); diff --git a/src/components.d.ts b/src/components.d.ts index 5f9db9eb..eb95217f 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -648,6 +648,7 @@ export namespace Components { "disabled": boolean; "helperId": string; "helperText": string; + "inputDefaultValue": string; "inputId": string; "invalid": boolean; "invalidText": string; @@ -664,8 +665,8 @@ export namespace Components { "disabled": boolean; "eclScript": boolean; "hasChanged": boolean; + "inputValue": string; "invalid": boolean; - "isFocused": boolean; "multiple": boolean; "multipleAllText": string; "multipleClearAllText": string; @@ -764,6 +765,7 @@ export namespace Components { "theme": string; } interface EclTextarea { + "defaultValue": string; "disabled": boolean; "hasChanged": boolean; "inputId": string; @@ -2084,6 +2086,7 @@ declare namespace LocalJSX { "disabled"?: boolean; "helperId"?: string; "helperText"?: string; + "inputDefaultValue"?: string; "inputId"?: string; "invalid"?: boolean; "invalidText"?: string; @@ -2100,8 +2103,8 @@ declare namespace LocalJSX { "disabled"?: boolean; "eclScript"?: boolean; "hasChanged"?: boolean; + "inputValue"?: string; "invalid"?: boolean; - "isFocused"?: boolean; "multiple"?: boolean; "multipleAllText"?: string; "multipleClearAllText"?: string; @@ -2203,6 +2206,7 @@ declare namespace LocalJSX { "theme"?: string; } interface EclTextarea { + "defaultValue"?: string; "disabled"?: boolean; "hasChanged"?: boolean; "inputId"?: string; diff --git a/src/components/ecl-range/ecl-range.tsx b/src/components/ecl-range/ecl-range.tsx index 724f4f62..3a0b781b 100644 --- a/src/components/ecl-range/ecl-range.tsx +++ b/src/components/ecl-range/ecl-range.tsx @@ -97,10 +97,6 @@ export class EclRange { } } - handleInput(event) { - this.value = event.target.value; - } - handleFocus(event) { this.inputFocus.emit(event); this.isFocused = true; @@ -142,7 +138,7 @@ export class EclRange { > this.handleInput(ev)} + onInput={ev => this.handleChange(ev)} onFocus={ev => this.handleFocus(ev)} onBlur={ev => this.handleBlur(ev)} onChange={ev => this.handleChange(ev)} diff --git a/src/components/ecl-search-form/ecl-search-form.tsx b/src/components/ecl-search-form/ecl-search-form.tsx index 53efa719..e3ecbe8d 100644 --- a/src/components/ecl-search-form/ecl-search-form.tsx +++ b/src/components/ecl-search-form/ecl-search-form.tsx @@ -20,6 +20,7 @@ export class EclSearchForm { @Prop() helperText: string; @Prop() placeholder: string; @Prop() inputId: string; + @Prop() inputDefaultValue: string; @Prop() width: string = 'm'; @Prop() label: string; @Prop() type: string; @@ -58,6 +59,7 @@ export class EclSearchForm { invalid={this.invalid} width="m" placeholder={this.placeholder} + default-value={this.inputDefaultValue} > diff --git a/src/components/ecl-search-form/readme.md b/src/components/ecl-search-form/readme.md index 702f53ba..df0ef6e2 100644 --- a/src/components/ecl-search-form/readme.md +++ b/src/components/ecl-search-form/readme.md @@ -7,24 +7,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ----------- | --------- | ----------- | -| `buttonAriaLabel` | `button-aria-label` | | `string` | `undefined` | -| `buttonLabel` | `button-label` | | `string` | `undefined` | -| `disabled` | `disabled` | | `boolean` | `false` | -| `helperId` | `helper-id` | | `string` | `undefined` | -| `helperText` | `helper-text` | | `string` | `undefined` | -| `inputId` | `input-id` | | `string` | `undefined` | -| `invalid` | `invalid` | | `boolean` | `false` | -| `invalidText` | `invalid-text` | | `string` | `undefined` | -| `label` | `label` | | `string` | `undefined` | -| `name` | `name` | | `string` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `required` | `required` | | `boolean` | `false` | -| `styleClass` | `style-class` | | `string` | `undefined` | -| `theme` | `theme` | | `string` | `'ec'` | -| `type` | `type` | | `string` | `undefined` | -| `width` | `width` | | `string` | `'m'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ----------- | --------- | ----------- | +| `buttonAriaLabel` | `button-aria-label` | | `string` | `undefined` | +| `buttonLabel` | `button-label` | | `string` | `undefined` | +| `disabled` | `disabled` | | `boolean` | `false` | +| `helperId` | `helper-id` | | `string` | `undefined` | +| `helperText` | `helper-text` | | `string` | `undefined` | +| `inputDefaultValue` | `input-default-value` | | `string` | `undefined` | +| `inputId` | `input-id` | | `string` | `undefined` | +| `invalid` | `invalid` | | `boolean` | `false` | +| `invalidText` | `invalid-text` | | `string` | `undefined` | +| `label` | `label` | | `string` | `undefined` | +| `name` | `name` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `undefined` | +| `required` | `required` | | `boolean` | `false` | +| `styleClass` | `style-class` | | `string` | `undefined` | +| `theme` | `theme` | | `string` | `'ec'` | +| `type` | `type` | | `string` | `undefined` | +| `width` | `width` | | `string` | `'m'` | ## Dependencies diff --git a/src/components/ecl-select/ecl-select.stories.ts b/src/components/ecl-select/ecl-select.stories.ts index 9a0b7667..29b59939 100644 --- a/src/components/ecl-select/ecl-select.stories.ts +++ b/src/components/ecl-select/ecl-select.stories.ts @@ -186,7 +186,6 @@ const Template = (args) => ecl-script=${args.multiple} select-id="custom-select" name="ecl-select" - value="Italy" theme="${args.theme}" width=${args.width} > @@ -195,7 +194,7 @@ const Template = (args) => - + @@ -204,7 +203,7 @@ const Template = (args) => - + `; diff --git a/src/components/ecl-select/ecl-select.tsx b/src/components/ecl-select/ecl-select.tsx index 3c4d8890..19729ea0 100644 --- a/src/components/ecl-select/ecl-select.tsx +++ b/src/components/ecl-select/ecl-select.tsx @@ -1,4 +1,4 @@ -import { Component, h, Prop, Element, State, Event, EventEmitter } from '@stencil/core'; +import { Component, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core'; import getAssetPath from "../../utils/assetPath"; declare const ECL: any; @@ -31,14 +31,14 @@ export class EclSelect { @Prop() multipleAllText: string; @Prop() multipleClearAllText: string; @Prop() multipleCloseText: string; - @State() value: string; + @Prop() inputValue: string; + @State() selectValue: string[]; @Prop() hasChanged: boolean = false; - @Prop() isFocused: boolean = false; + @State() isFocused: boolean = false; @Event() inputChange: EventEmitter; @Event() inputFocus: EventEmitter; @Event() inputBlur: EventEmitter; - getClass(): string { const styleClasses = [ `ecl-select__container`, @@ -56,6 +56,10 @@ export class EclSelect { return styleClasses.join(' '); } + componentWillLoad() { + this.selectValue = JSON.parse(this.inputValue || '[]'); + } + componentDidLoad() { if (this.selectId) { const group = this.el.closest('.ecl-form-group'); @@ -85,6 +89,10 @@ export class EclSelect { document.body.appendChild(script); } + + if (this.inputValue) { + this.handleSelection(); + } } handleFocus(event) { @@ -93,8 +101,18 @@ export class EclSelect { } handleChange(event) { - const value = (event.target as HTMLInputElement).value; - this.inputChange.emit(value); + const selectElement = event.target as HTMLSelectElement; + const selectedOptions = Array.from(selectElement.selectedOptions).map(option => option.value); + this.selectValue = selectedOptions; + this.inputChange.emit(this.selectValue); + } + + private handleSelection() {; + const options = this.el.querySelectorAll('option'); + options.forEach((option: HTMLOptionElement) => { + const optionValue = String(option.value); + option.selected = this.selectValue.some(val => String(val) === optionValue); + }); } handleBlur(event) { @@ -109,6 +127,7 @@ export class EclSelect { name: this.name, required: this.required, disabled: this.disabled, + value: this.inputValue, }; if (this.multiple) { @@ -131,6 +150,7 @@ export class EclSelect { onFocus={ev => this.handleFocus(ev)} onBlur={ev => this.handleBlur(ev)} onChange={ev => this.handleChange(ev)} + onInput={ev => this.handleChange(ev)} > diff --git a/src/components/ecl-select/readme.md b/src/components/ecl-select/readme.md index 6de87b81..8288f2c3 100644 --- a/src/components/ecl-select/readme.md +++ b/src/components/ecl-select/readme.md @@ -12,8 +12,8 @@ | `disabled` | `disabled` | | `boolean` | `false` | | `eclScript` | `ecl-script` | | `boolean` | `false` | | `hasChanged` | `has-changed` | | `boolean` | `false` | +| `inputValue` | `input-value` | | `string` | `undefined` | | `invalid` | `invalid` | | `boolean` | `false` | -| `isFocused` | `is-focused` | | `boolean` | `false` | | `multiple` | `multiple` | | `boolean` | `false` | | `multipleAllText` | `multiple-all-text` | | `string` | `undefined` | | `multipleClearAllText` | `multiple-clear-all-text` | | `string` | `undefined` | diff --git a/src/components/ecl-textarea/ecl-textarea.stories.ts b/src/components/ecl-textarea/ecl-textarea.stories.ts index 97191f99..fd077b88 100644 --- a/src/components/ecl-textarea/ecl-textarea.stories.ts +++ b/src/components/ecl-textarea/ecl-textarea.stories.ts @@ -128,7 +128,7 @@ const Template = (args) => disabled=${args.disabled} name="ecl-textarea" width="${args.width}" - textarea-id=${args.textareaId} + textarea-id="${args.textareaId}" > `; diff --git a/src/components/ecl-textarea/ecl-textarea.tsx b/src/components/ecl-textarea/ecl-textarea.tsx index 5b3dc26d..175a1c1c 100644 --- a/src/components/ecl-textarea/ecl-textarea.tsx +++ b/src/components/ecl-textarea/ecl-textarea.tsx @@ -1,4 +1,4 @@ -import { Component, h, Prop, Element, State, Event, EventEmitter} from '@stencil/core'; +import { Component, h, Prop, Element, Event, EventEmitter} from '@stencil/core'; @Component({ tag: 'ecl-textarea', @@ -22,7 +22,7 @@ export class EclTextarea{ @Prop() rows: number = 4; @Prop() inputId: string; @Prop() placeholder: string; - @State() value: string; + @Prop() defaultValue: string; @Prop() hasChanged: boolean = false; @Prop() isFocused: boolean = false; @Event() inputFocus: EventEmitter; @@ -63,10 +63,6 @@ export class EclTextarea{ return styleClasses.join(' '); } - handleInput(event) { - this.value = event.target.value; - } - handleFocus(event) { this.inputFocus.emit(event); this.isFocused = true; @@ -91,12 +87,13 @@ export class EclTextarea{ disabled: this.disabled, placeholder: this.placeholder, rows: this.rows, + value: this.defaultValue, }; return (