diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7573b611..f99d6592 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.18.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.18.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.18.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.18.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.18.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.18.2' - name: Install dependencies run: yarn install --frozen-lockfile - name: Package application diff --git a/.nvmrc b/.nvmrc index 8ddbc0c6..bb52a169 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.16.0 +v18.18.2 diff --git a/lerna.json b/lerna.json index 91a6ce47..089d7d28 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "0.12.0", + "version": "0.13.0", "npmClient": "yarn", "changelog": { "repo": "ec-europa/ecl-webcomponents", diff --git a/packages/ecl-webcomponents-angular-workspace/package.json b/packages/ecl-webcomponents-angular-workspace/package.json index b4fd4b67..aa135b47 100644 --- a/packages/ecl-webcomponents-angular-workspace/package.json +++ b/packages/ecl-webcomponents-angular-workspace/package.json @@ -1,6 +1,6 @@ { "name": "@ecl/ecl-webcomponents-angular-workspace", - "version": "0.12.0", + "version": "0.13.0", "scripts": { "clean": "rimraf dist", "ng": "ng", @@ -30,8 +30,8 @@ "@angular/cli": "16.2.8", "@angular/compiler-cli": "16.2.11", "@babel/plugin-proposal-private-property-in-object": "7.21.11", - "@ecl/ecl-webcomponents": "0.12.0", - "@ecl/ecl-webcomponents-angular": "0.12.0", + "@ecl/ecl-webcomponents": "0.13.0", + "@ecl/ecl-webcomponents-angular": "0.13.0", "browser-sync": "3.0.2", "express": "4.18.2", "karma": "~6.4.0", diff --git a/packages/ecl-webcomponents-angular-workspace/projects/ecl-webcomponents-angular/package.json b/packages/ecl-webcomponents-angular-workspace/projects/ecl-webcomponents-angular/package.json index a9c49170..18633e5b 100644 --- a/packages/ecl-webcomponents-angular-workspace/projects/ecl-webcomponents-angular/package.json +++ b/packages/ecl-webcomponents-angular-workspace/projects/ecl-webcomponents-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ecl/ecl-webcomponents-angular", - "version": "0.12.0", + "version": "0.13.0", "publishConfig": { "access": "public" }, diff --git a/packages/ecl-webcomponents-react-consumer/package.json b/packages/ecl-webcomponents-react-consumer/package.json index f9588ccf..f7af1437 100644 --- a/packages/ecl-webcomponents-react-consumer/package.json +++ b/packages/ecl-webcomponents-react-consumer/package.json @@ -1,7 +1,7 @@ { "name": "@ecl/ecl-webcomponents-react-consumer", "private": true, - "version": "0.12.0", + "version": "0.13.0", "type": "module", "scripts": { "clean": "rimraf dist", @@ -12,7 +12,7 @@ "pre-publish": "npm run build" }, "dependencies": { - "@ecl/ecl-webcomponents-react": "0.12.0", + "@ecl/ecl-webcomponents-react": "0.13.0", "react": "18.2.0", "react-dom": "18.2.0", "rimraf": "5.0.5" diff --git a/packages/ecl-webcomponents-react/package.json b/packages/ecl-webcomponents-react/package.json index 084d4f97..0283bacd 100644 --- a/packages/ecl-webcomponents-react/package.json +++ b/packages/ecl-webcomponents-react/package.json @@ -1,6 +1,6 @@ { "name": "@ecl/ecl-webcomponents-react", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL react app", "main": "lib/index.ts", "module": "dist/index.js", @@ -27,7 +27,7 @@ "access": "public" }, "dependencies": { - "@ecl/ecl-webcomponents": "0.12.0" + "@ecl/ecl-webcomponents": "0.13.0" }, "devDependencies": { "@types/react": "18.2.48", diff --git a/packages/ecl-webcomponents/package.json b/packages/ecl-webcomponents/package.json index d0f60483..236f70b4 100644 --- a/packages/ecl-webcomponents/package.json +++ b/packages/ecl-webcomponents/package.json @@ -1,6 +1,6 @@ { "name": "@ecl/ecl-webcomponents", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL web components", "license": "EUPL-1.2", "main": "dist/index.cjs.js", diff --git a/patches/@ecl+builder+3.11.0.patch b/patches/@ecl+builder+3.13.0.patch similarity index 100% rename from patches/@ecl+builder+3.11.0.patch rename to patches/@ecl+builder+3.13.0.patch diff --git a/patches/@ecl+theme-dev+3.11.0.patch b/patches/@ecl+theme-dev+3.13.0.patch similarity index 100% rename from patches/@ecl+theme-dev+3.11.0.patch rename to patches/@ecl+theme-dev+3.13.0.patch diff --git a/patches/@ecl+vanilla-component-accordion+3.11.0.patch b/patches/@ecl+vanilla-component-accordion+3.13.0.patch similarity index 93% rename from patches/@ecl+vanilla-component-accordion+3.11.0.patch rename to patches/@ecl+vanilla-component-accordion+3.13.0.patch index eaaf18a4..ddc60b4c 100644 --- a/patches/@ecl+vanilla-component-accordion+3.11.0.patch +++ b/patches/@ecl+vanilla-component-accordion+3.13.0.patch @@ -1,8 +1,8 @@ diff --git a/node_modules/@ecl/vanilla-component-accordion/accordion.js b/node_modules/@ecl/vanilla-component-accordion/accordion.js -index 85141a9..f06232d 100644 +index 08c5b16..cd41037 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 { +@@ -138,14 +138,21 @@ export class Accordion { if (iconElement) { const useNode = queryOne('use', iconElement); if (useNode) { diff --git a/patches/@ecl+vanilla-component-button+3.11.0.patch b/patches/@ecl+vanilla-component-button+3.13.0.patch similarity index 100% rename from patches/@ecl+vanilla-component-button+3.11.0.patch rename to patches/@ecl+vanilla-component-button+3.13.0.patch diff --git a/patches/@ecl+vanilla-component-card+3.11.0.patch b/patches/@ecl+vanilla-component-card+3.13.0.patch similarity index 100% rename from patches/@ecl+vanilla-component-card+3.11.0.patch rename to patches/@ecl+vanilla-component-card+3.13.0.patch diff --git a/patches/@ecl+vanilla-component-carousel+3.11.0.patch b/patches/@ecl+vanilla-component-carousel+3.13.0.patch similarity index 87% rename from patches/@ecl+vanilla-component-carousel+3.11.0.patch rename to patches/@ecl+vanilla-component-carousel+3.13.0.patch index fc565dda..71f59ac1 100644 --- a/patches/@ecl+vanilla-component-carousel+3.11.0.patch +++ b/patches/@ecl+vanilla-component-carousel+3.13.0.patch @@ -1,8 +1,8 @@ diff --git a/node_modules/@ecl/vanilla-component-carousel/carousel.js b/node_modules/@ecl/vanilla-component-carousel/carousel.js -index 3e1dc99..08cdab4 100644 +index f37281d..6b799b9 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 { +@@ -136,6 +136,8 @@ export class Carousel { this.direction = getComputedStyle(this.element).direction; this.slides = queryAll(this.slideClass, this.element); @@ -10,4 +10,4 @@ index 3e1dc99..08cdab4 100644 + 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 + // If only one slide, don't initialize carousel and hide controls diff --git a/patches/@ecl+vanilla-component-category-filter+3.11.0.patch b/patches/@ecl+vanilla-component-category-filter+3.13.0.patch similarity index 93% rename from patches/@ecl+vanilla-component-category-filter+3.11.0.patch rename to patches/@ecl+vanilla-component-category-filter+3.13.0.patch index 99508711..1816f486 100644 --- a/patches/@ecl+vanilla-component-category-filter+3.11.0.patch +++ b/patches/@ecl+vanilla-component-category-filter+3.13.0.patch @@ -1,8 +1,8 @@ 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 +index a1d3c09..d48617c 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 { +@@ -96,21 +96,24 @@ export class CategoryFilter { const treeItem = e.target.closest('.ecl-category-filter__item'); @@ -33,7 +33,7 @@ index 76b4353..ed7da7d 100644 if (item === treeItem) { item.classList.add('ecl-category-filter__item--current'); } else { -@@ -112,11 +115,7 @@ export class CategoryFilter { +@@ -118,11 +121,7 @@ export class CategoryFilter { } }); diff --git a/patches/@ecl+vanilla-component-content-block+3.11.0.patch b/patches/@ecl+vanilla-component-content-block+3.13.0.patch similarity index 89% rename from patches/@ecl+vanilla-component-content-block+3.11.0.patch rename to patches/@ecl+vanilla-component-content-block+3.13.0.patch index 1b8e52b3..9a9a60d6 100644 --- a/patches/@ecl+vanilla-component-content-block+3.11.0.patch +++ b/patches/@ecl+vanilla-component-content-block+3.13.0.patch @@ -1,8 +1,8 @@ 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 +index e231bd7..72de3e9 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 { +@@ -77,7 +77,7 @@ export class ContentBlock { } this.title = queryOne(this.titleSelector, this.element); 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/playground/package.json b/playground/package.json index 6ce48470..8abaa52d 100644 --- a/playground/package.json +++ b/playground/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-playground", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL web components playground", "main": "index.html", "private": true, diff --git a/src/components.d.ts b/src/components.d.ts index ae815716..d01dd726 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -284,6 +284,8 @@ export namespace Components { "theme": string; } interface EclFormGroup { + "ariaLabelOptional": string; + "ariaLabelRequired": string; "helperId": string; "helperText": string; "invalid": boolean; @@ -291,11 +293,13 @@ export namespace Components { "invalidText": string; "label": string; "labelClass": string; + "labelTag": string; "name": string; "optionalText": string; "required": boolean; "requiredText": string; "styleClass": string; + "tag": string; "theme": string; } interface EclGallery { @@ -382,7 +386,6 @@ export namespace Components { "disabled": boolean; "eclScript": boolean; "hasChanged": boolean; - "helperId": string; "helperText": string; "inputClass": string; "inputId": string; @@ -462,6 +465,7 @@ export namespace Components { "eclScript": boolean; "group": string; "maxLines": number; + "menuId": string; "menuLink": string; "menuTitle": string; "nextLabel": string; @@ -644,6 +648,7 @@ export namespace Components { "disabled": boolean; "helperId": string; "helperText": string; + "inputDefaultValue": string; "inputId": string; "invalid": boolean; "invalidText": string; @@ -660,8 +665,8 @@ export namespace Components { "disabled": boolean; "eclScript": boolean; "hasChanged": boolean; + "inputValue": string; "invalid": boolean; - "isFocused": boolean; "multiple": boolean; "multipleAllText": string; "multipleClearAllText": string; @@ -760,8 +765,10 @@ export namespace Components { "theme": string; } interface EclTextarea { + "defaultValue": string; "disabled": boolean; "hasChanged": boolean; + "inputId": string; "invalid": boolean; "isFocused": boolean; "name": string; @@ -1049,7 +1056,7 @@ declare global { interface HTMLEclInputElementEventMap { "inputFocus": FocusEvent; "inputBlur": FocusEvent; - "inputChange": any; + "inputChange": { type: string; value: string }; } interface HTMLEclInputElement extends Components.EclInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLEclInputElement, ev: EclInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -1706,6 +1713,8 @@ declare namespace LocalJSX { "theme"?: string; } interface EclFormGroup { + "ariaLabelOptional"?: string; + "ariaLabelRequired"?: string; "helperId"?: string; "helperText"?: string; "invalid"?: boolean; @@ -1713,11 +1722,13 @@ declare namespace LocalJSX { "invalidText"?: string; "label"?: string; "labelClass"?: string; + "labelTag"?: string; "name"?: string; "optionalText"?: string; "required"?: boolean; "requiredText"?: string; "styleClass"?: string; + "tag"?: string; "theme"?: string; } interface EclGallery { @@ -1804,7 +1815,6 @@ declare namespace LocalJSX { "disabled"?: boolean; "eclScript"?: boolean; "hasChanged"?: boolean; - "helperId"?: string; "helperText"?: string; "inputClass"?: string; "inputId"?: string; @@ -1813,7 +1823,7 @@ declare namespace LocalJSX { "label"?: string; "name"?: string; "onInputBlur"?: (event: EclInputCustomEvent) => void; - "onInputChange"?: (event: EclInputCustomEvent) => void; + "onInputChange"?: (event: EclInputCustomEvent<{ type: string; value: string }>) => void; "onInputFocus"?: (event: EclInputCustomEvent) => void; "placeholder"?: string; "required"?: boolean; @@ -1887,6 +1897,7 @@ declare namespace LocalJSX { "eclScript"?: boolean; "group"?: string; "maxLines"?: number; + "menuId"?: string; "menuLink"?: string; "menuTitle"?: string; "nextLabel"?: string; @@ -2075,6 +2086,7 @@ declare namespace LocalJSX { "disabled"?: boolean; "helperId"?: string; "helperText"?: string; + "inputDefaultValue"?: string; "inputId"?: string; "invalid"?: boolean; "invalidText"?: string; @@ -2091,8 +2103,8 @@ declare namespace LocalJSX { "disabled"?: boolean; "eclScript"?: boolean; "hasChanged"?: boolean; + "inputValue"?: string; "invalid"?: boolean; - "isFocused"?: boolean; "multiple"?: boolean; "multipleAllText"?: string; "multipleClearAllText"?: string; @@ -2194,8 +2206,10 @@ declare namespace LocalJSX { "theme"?: string; } interface EclTextarea { + "defaultValue"?: string; "disabled"?: boolean; "hasChanged"?: boolean; + "inputId"?: string; "invalid"?: boolean; "isFocused"?: boolean; "name"?: string; diff --git a/src/components/ecl-accordion/package.json b/src/components/ecl-accordion/package.json index e6906da9..04bef2ac 100644 --- a/src/components/ecl-accordion/package.json +++ b/src/components/ecl-accordion/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-accordion", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Button", "main": "ecl-accordion.tsx", "private": true, @@ -15,16 +15,16 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/resources-ec-icons": "3.11.0", - "@ecl/resources-eu-icons": "3.11.0", - "@ecl/specs-component-accordion": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-accordion": "3.11.0", - "@ecl/vanilla-component-button": "3.11.0", - "@ecl/vanilla-component-icon": "3.11.0", - "@ecl/vanilla-layout-grid": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/resources-ec-icons": "3.13.0", + "@ecl/resources-eu-icons": "3.13.0", + "@ecl/specs-component-accordion": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-accordion": "3.13.0", + "@ecl/vanilla-component-button": "3.13.0", + "@ecl/vanilla-component-icon": "3.13.0", + "@ecl/vanilla-layout-grid": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-banner/package.json b/src/components/ecl-banner/package.json index da67f541..41d16cf7 100644 --- a/src/components/ecl-banner/package.json +++ b/src/components/ecl-banner/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-banner", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Page Banner", "main": "ecl-banner.tsx", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-banner": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-banner": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-blockquote/package.json b/src/components/ecl-blockquote/package.json index 83e11a01..8fb57d63 100644 --- a/src/components/ecl-blockquote/package.json +++ b/src/components/ecl-blockquote/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-blockquote", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Blockquote", "main": "ecl-blockquote.tsx", "private": true, @@ -13,10 +13,10 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-blockquote": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-blockquote": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-breadcrumb/package.json b/src/components/ecl-breadcrumb/package.json index ed177044..2d0a7d18 100644 --- a/src/components/ecl-breadcrumb/package.json +++ b/src/components/ecl-breadcrumb/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-breadcrumb", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Breadcrumb", "main": "ecl-breadcrumb.tsx", "private": true, @@ -14,10 +14,10 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-breadcrumb": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-breadcrumb": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-button/package.json b/src/components/ecl-button/package.json index e3ca3f85..ed74bbfc 100644 --- a/src/components/ecl-button/package.json +++ b/src/components/ecl-button/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-button", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Button", "main": "ecl-button.tsx", "private": true, @@ -13,15 +13,15 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/resources-ec-icons": "3.11.0", - "@ecl/resources-eu-icons": "3.11.0", - "@ecl/specs-component-button": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-button": "3.11.0", - "@ecl/vanilla-component-icon": "3.11.0", - "@ecl/vanilla-component-link": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/resources-ec-icons": "3.13.0", + "@ecl/resources-eu-icons": "3.13.0", + "@ecl/specs-component-button": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-button": "3.13.0", + "@ecl/vanilla-component-icon": "3.13.0", + "@ecl/vanilla-component-link": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-card/package.json b/src/components/ecl-card/package.json index 00ab8691..dd7ec10e 100644 --- a/src/components/ecl-card/package.json +++ b/src/components/ecl-card/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-card", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Content Item", "main": "ecl-card.tsx", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-card": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-card": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-carousel/package.json b/src/components/ecl-carousel/package.json index d27250d6..44e24a9f 100644 --- a/src/components/ecl-carousel/package.json +++ b/src/components/ecl-carousel/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-carousel", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Carousel", "main": "ecl-carousel.tsx", "private": true, @@ -14,9 +14,9 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-carousel": "3.11.0", - "@ecl/vanilla-layout-grid": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-carousel": "3.13.0", + "@ecl/vanilla-layout-grid": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-category-filter/package.json b/src/components/ecl-category-filter/package.json index 04248f46..5a92b58f 100644 --- a/src/components/ecl-category-filter/package.json +++ b/src/components/ecl-category-filter/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-category-filter", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Category Filter", "main": "ecl-category-filter.tsx", "private": true, @@ -14,8 +14,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-category-filter": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-category-filter": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-content-block/package.json b/src/components/ecl-content-block/package.json index cda2f9fb..a0a117f4 100644 --- a/src/components/ecl-content-block/package.json +++ b/src/components/ecl-content-block/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-content-block", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Content Block", "main": "ecl-content-block.tsx", "private": true, @@ -14,14 +14,14 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-content-block": "3.11.0", - "@ecl/vanilla-component-description-list": "3.11.0", - "@ecl/vanilla-component-icon": "3.11.0", - "@ecl/vanilla-component-label": "3.11.0", - "@ecl/vanilla-component-link": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-content-block": "3.13.0", + "@ecl/vanilla-component-description-list": "3.13.0", + "@ecl/vanilla-component-icon": "3.13.0", + "@ecl/vanilla-component-label": "3.13.0", + "@ecl/vanilla-component-link": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-content-item/package.json b/src/components/ecl-content-item/package.json index 0dbef3b6..b87a1ea5 100644 --- a/src/components/ecl-content-item/package.json +++ b/src/components/ecl-content-item/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-content-item", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Content Item", "main": "ecl-content-item.tsx", "private": true, @@ -13,10 +13,10 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-content-item": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-content-item": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-date-block/package.json b/src/components/ecl-date-block/package.json index 8533e404..24dff42e 100644 --- a/src/components/ecl-date-block/package.json +++ b/src/components/ecl-date-block/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-date-block", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Date Block", "main": "ecl-date-block.tsx", "private": true, @@ -13,11 +13,11 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/theme-ec": "3.11.0", - "@ecl/theme-eu": "3.11.0", - "@ecl/vanilla-component-date-block": "3.11.0", - "@ecl/vanilla-utility-screen-reader": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/theme-ec": "3.13.0", + "@ecl/theme-eu": "3.13.0", + "@ecl/vanilla-component-date-block": "3.13.0", + "@ecl/vanilla-utility-screen-reader": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-datepicker/ecl-datepicker.stories.ts b/src/components/ecl-datepicker/ecl-datepicker.stories.ts index be4ca5ed..32016230 100644 --- a/src/components/ecl-datepicker/ecl-datepicker.stories.ts +++ b/src/components/ecl-datepicker/ecl-datepicker.stories.ts @@ -97,6 +97,8 @@ const Template = args => disabled=${args.disabled} invalid-text="This is the error message" theme="${args.theme}" + aria-label-optional="Aria label optional" + aria-label-required="Aria label required" > disabled=${args.disabled} invalid-text="This is an error message" theme="${args.theme}" + aria-label-optional="Aria label optional" + aria-label-required="Aria label required" > { this.label ? - {this.label} - { this.required && this.requiredText ? - {this.requiredText} : '' - } + {this.required && this.requiredText ? ( + + {this.requiredText} + + ) : ''} { !this.required && this.optionalText ? - {this.optionalText} : '' + + {this.optionalText} : '' } - : '' + : '' } { this.helperText ?
: '' } - + ) } } \ No newline at end of file diff --git a/src/components/ecl-form-group/package.json b/src/components/ecl-form-group/package.json index 52168757..61e23b2f 100644 --- a/src/components/ecl-form-group/package.json +++ b/src/components/ecl-form-group/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-form-group", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL form group", "main": "ecl-form-group.tsx", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-form": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-form": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-form-group/readme.md b/src/components/ecl-form-group/readme.md index 7f47dd7f..83a4c777 100644 --- a/src/components/ecl-form-group/readme.md +++ b/src/components/ecl-form-group/readme.md @@ -7,21 +7,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ----------- | --------- | ----------- | -| `helperId` | `helper-id` | | `string` | `undefined` | -| `helperText` | `helper-text` | | `string` | `undefined` | -| `invalid` | `invalid` | | `boolean` | `false` | -| `invalidIcon` | `invalid-icon` | | `string` | `'error'` | -| `invalidText` | `invalid-text` | | `string` | `undefined` | -| `label` | `label` | | `string` | `undefined` | -| `labelClass` | `label-class` | | `string` | `undefined` | -| `name` | `name` | | `string` | `undefined` | -| `optionalText` | `optional-text` | | `string` | `undefined` | -| `required` | `required` | | `boolean` | `false` | -| `requiredText` | `required-text` | | `string` | `'*'` | -| `styleClass` | `style-class` | | `string` | `''` | -| `theme` | `theme` | | `string` | `'ec'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ----------- | --------- | ----------- | +| `ariaLabelOptional` | `aria-label-optional` | | `string` | `undefined` | +| `ariaLabelRequired` | `aria-label-required` | | `string` | `undefined` | +| `helperId` | `helper-id` | | `string` | `undefined` | +| `helperText` | `helper-text` | | `string` | `undefined` | +| `invalid` | `invalid` | | `boolean` | `false` | +| `invalidIcon` | `invalid-icon` | | `string` | `'error'` | +| `invalidText` | `invalid-text` | | `string` | `undefined` | +| `label` | `label` | | `string` | `undefined` | +| `labelClass` | `label-class` | | `string` | `undefined` | +| `labelTag` | `label-tag` | | `string` | `'label'` | +| `name` | `name` | | `string` | `undefined` | +| `optionalText` | `optional-text` | | `string` | `undefined` | +| `required` | `required` | | `boolean` | `false` | +| `requiredText` | `required-text` | | `string` | `'*'` | +| `styleClass` | `style-class` | | `string` | `''` | +| `tag` | `tag` | | `string` | `'div'` | +| `theme` | `theme` | | `string` | `'ec'` | ## Dependencies diff --git a/src/components/ecl-gallery/package.json b/src/components/ecl-gallery/package.json index 3d74e2af..ce54561a 100644 --- a/src/components/ecl-gallery/package.json +++ b/src/components/ecl-gallery/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-gallery", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Page Banner", "main": "ecl-hero-banner.tsx", "private": true, @@ -14,9 +14,9 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-gallery": "3.11.0", - "@ecl/vanilla-layout-grid": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-gallery": "3.13.0", + "@ecl/vanilla-layout-grid": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-grid/package.json b/src/components/ecl-grid/package.json index ef70b4a1..50715609 100644 --- a/src/components/ecl-grid/package.json +++ b/src/components/ecl-grid/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-grid", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Grid", "main": "ecl-grid.ts", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-layout-grid": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-layout-grid": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-hero-banner/package.json b/src/components/ecl-hero-banner/package.json index c97b87c7..c11af420 100644 --- a/src/components/ecl-hero-banner/package.json +++ b/src/components/ecl-hero-banner/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-hero-banner", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Page Banner", "main": "ecl-hero-banner.tsx", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-hero-banner": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-hero-banner": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-icon/package.json b/src/components/ecl-icon/package.json index 8b304832..8b29f7a9 100644 --- a/src/components/ecl-icon/package.json +++ b/src/components/ecl-icon/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-icon", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Icon", "main": "ecl-icon.ts", "private": true, @@ -14,11 +14,11 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/resources-ec-icons": "3.11.0", - "@ecl/resources-eu-icons": "3.11.0", - "@ecl/specs-component-icon": "3.11.0", - "@ecl/vanilla-component-icon": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/resources-ec-icons": "3.13.0", + "@ecl/resources-eu-icons": "3.13.0", + "@ecl/specs-component-icon": "3.13.0", + "@ecl/vanilla-component-icon": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-inpage-navigation/package.json b/src/components/ecl-inpage-navigation/package.json index 18011a6f..1e1bfa96 100644 --- a/src/components/ecl-inpage-navigation/package.json +++ b/src/components/ecl-inpage-navigation/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-inpage-navigation", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL inpage navigation", "main": "ecl-inpage-navigation.tsx", "private": true, @@ -14,9 +14,9 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-inpage-navigation": "3.11.0", - "@ecl/vanilla-layout-grid": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-inpage-navigation": "3.13.0", + "@ecl/vanilla-layout-grid": "3.13.0", "cross-env": "7.0.3", "lorem-ipsum": "2.0.8" }, diff --git a/src/components/ecl-input/ecl-input.stories.ts b/src/components/ecl-input/ecl-input.stories.ts index cc7e207e..1e18350c 100644 --- a/src/components/ecl-input/ecl-input.stories.ts +++ b/src/components/ecl-input/ecl-input.stories.ts @@ -106,6 +106,10 @@ const Template = args => disabled=${args.disabled} invalid-text="This is an error message" theme="${args.theme}" + aria-label-optional="Aria label optional" + ${args.type === 'checkbox' || args.type === 'radio' ? `tag="${args.type === 'checkbox' || args.type === 'radio' ? 'fieldset' : ''}"` : ''} + ${args.type === 'checkbox' || args.type === 'radio' ? `label-tag="${args.type === 'checkbox' || args.type === 'radio' ? 'legend' : ''}"` : ''} + aria-label-required="Aria label required" > ; @Event() inputBlur: EventEmitter; - @Event() inputChange: EventEmitter; + @Event() inputChange: EventEmitter<{ type: string; value: string }>; + + + componentDidRender() { + if (this.inputId) { + const group = this.el.closest('.ecl-form-group'); + if (group) { + const label = group.querySelector('.ecl-form-label'); + if (label) { + if (this.type !== 'radio' && this.type !== 'checkbox') { + label.setAttribute('for', this.inputId); + } + label.setAttribute('id', `${this.inputId}-label`); + } + const helper = group.querySelector('.ecl-help-block'); + if (helper) { + if (this.type !== 'radio' && this.type !== 'checkbox') { + helper.setAttribute('id', `${this.inputId}-helper`); + } + } + } + } + } getClass(): string { const styleClasses = ['ecl-input', this.styleClass]; @@ -103,7 +125,7 @@ export class EclInput { handleChange(event) { const value = (event.target as HTMLInputElement).value; - this.inputChange.emit(value); + this.inputChange.emit({ type: this.type, value }); } handleBlur(event) { @@ -156,7 +178,7 @@ export class EclInput { { this.type === 'checkbox' && this.helperText ?
{this.helperText}
@@ -177,7 +199,7 @@ export class EclInput { { this.type === 'radio' && this.helperText ?
{this.helperText}
diff --git a/src/components/ecl-input/package.json b/src/components/ecl-input/package.json index 4a059c8c..b7d1605e 100644 --- a/src/components/ecl-input/package.json +++ b/src/components/ecl-input/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-input", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Select", "main": "ecl-input.tsx", "private": true, @@ -14,14 +14,14 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-button": "3.11.0", - "@ecl/vanilla-component-checkbox": "3.11.0", - "@ecl/vanilla-component-datepicker": "3.11.0", - "@ecl/vanilla-component-file-upload": "3.11.0", - "@ecl/vanilla-component-radio": "3.11.0", - "@ecl/vanilla-component-search-form": "3.11.0", - "@ecl/vanilla-component-text-input": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-button": "3.13.0", + "@ecl/vanilla-component-checkbox": "3.13.0", + "@ecl/vanilla-component-datepicker": "3.13.0", + "@ecl/vanilla-component-file-upload": "3.13.0", + "@ecl/vanilla-component-radio": "3.13.0", + "@ecl/vanilla-component-search-form": "3.13.0", + "@ecl/vanilla-component-text-input": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-input/readme.md b/src/components/ecl-input/readme.md index 48727fe0..2315d1e3 100644 --- a/src/components/ecl-input/readme.md +++ b/src/components/ecl-input/readme.md @@ -13,7 +13,6 @@ | `disabled` | `disabled` | | `boolean` | `false` | | `eclScript` | `ecl-script` | | `boolean` | `false` | | `hasChanged` | `has-changed` | | `boolean` | `false` | -| `helperId` | `helper-id` | | `string` | `undefined` | | `helperText` | `helper-text` | | `string` | `undefined` | | `inputClass` | `input-class` | | `string` | `undefined` | | `inputId` | `input-id` | | `string` | `undefined` | @@ -31,11 +30,11 @@ ## Events -| Event | Description | Type | -| ------------- | ----------- | ------------------------- | -| `inputBlur` | | `CustomEvent` | -| `inputChange` | | `CustomEvent` | -| `inputFocus` | | `CustomEvent` | +| Event | Description | Type | +| ------------- | ----------- | ----------------------------------------------- | +| `inputBlur` | | `CustomEvent` | +| `inputChange` | | `CustomEvent<{ type: string; value: string; }>` | +| `inputFocus` | | `CustomEvent` | ## Dependencies diff --git a/src/components/ecl-input/test/__snapshots__/ecl-input.spec.tsx.snap b/src/components/ecl-input/test/__snapshots__/ecl-input.spec.tsx.snap index 22b43815..29fe157d 100644 --- a/src/components/ecl-input/test/__snapshots__/ecl-input.spec.tsx.snap +++ b/src/components/ecl-input/test/__snapshots__/ecl-input.spec.tsx.snap @@ -3,14 +3,14 @@ exports[`ecl-input renders 1`] = ` -
- +
+
+
`; diff --git a/src/components/ecl-label/package.json b/src/components/ecl-label/package.json index 976ae67f..886072dc 100644 --- a/src/components/ecl-label/package.json +++ b/src/components/ecl-label/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-label", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Label", "main": "ecl-label.tsx", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-label": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-label": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-link/package.json b/src/components/ecl-link/package.json index 2307cdef..5715f07a 100644 --- a/src/components/ecl-link/package.json +++ b/src/components/ecl-link/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-link", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Link", "main": "ecl-link.tsx", "private": true, @@ -13,11 +13,11 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/specs-component-icon": "3.11.0", - "@ecl/vanilla-component-button": "3.11.0", - "@ecl/vanilla-component-icon": "3.11.0", - "@ecl/vanilla-component-link": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/specs-component-icon": "3.13.0", + "@ecl/vanilla-component-button": "3.13.0", + "@ecl/vanilla-component-icon": "3.13.0", + "@ecl/vanilla-component-link": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-list-illustration/package.json b/src/components/ecl-list-illustration/package.json index 6d895c2f..15274116 100644 --- a/src/components/ecl-list-illustration/package.json +++ b/src/components/ecl-list-illustration/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-list-illustration", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Lst with illustration", "main": "ecl-list-illustration.tsx", "private": true, @@ -13,8 +13,8 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-list-illustration": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-list-illustration": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-media-container/package.json b/src/components/ecl-media-container/package.json index d7c8de74..5485792a 100644 --- a/src/components/ecl-media-container/package.json +++ b/src/components/ecl-media-container/package.json @@ -2,7 +2,7 @@ "name": "@ecl/web-components-media-container", "author": "European Commission", "license": "EUPL-1.2", - "version": "0.12.0", + "version": "0.13.0", "description": "ECL Media container", "main": "ecl-media-container.tsx", "private": true, @@ -14,9 +14,9 @@ "prepublish": "npm run build" }, "devDependencies": { - "@ecl/builder": "3.11.0", - "@ecl/vanilla-component-media-container": "3.11.0", - "@ecl/vanilla-layout-grid": "3.11.0", + "@ecl/builder": "3.13.0", + "@ecl/vanilla-component-media-container": "3.13.0", + "@ecl/vanilla-layout-grid": "3.13.0", "cross-env": "7.0.3" }, "repository": { diff --git a/src/components/ecl-menu/ecl-menu.stories.ts b/src/components/ecl-menu/ecl-menu.stories.ts index 76c0fea5..aa4ee3b0 100644 --- a/src/components/ecl-menu/ecl-menu.stories.ts +++ b/src/components/ecl-menu/ecl-menu.stories.ts @@ -1,5 +1,6 @@ const getArgs = () => { return { + menuId: 'menu-demo', menuTitle: 'Menu', menuLink: '/example.html', backMenu: 'Back', @@ -12,41 +13,46 @@ const getArgs = () => { const getArgTypes = () => { return { + menuId: { + name: 'menu-id', + type: { name: 'string' }, + description: 'Id of the menu', + }, menuTitle: { - name: 'Title of the menu', + name: 'menu-title', type: { name: 'string' }, - description: '', + description: 'Title of the menu', }, menuLink: { - name: 'Menu link', + name: 'menu-link', type: { name: 'string' }, - description: '', + description: 'Link for the menu', }, closeMenu: { - name: 'Label of the close button', + name: 'close-menu', type: { name: 'string' }, - description: '', + description: 'Label for the close button', }, backMenu: { - name: 'Label of the back button', + name: 'back-menu', type: { name: 'string' }, - description: '', + description: 'Label of the back button', }, previousLabel: { - name: 'Label of the back button (slider)', + name: 'previous-label', type: { name: 'string' }, - description: '', + description: 'Label of the back button (slider)', }, nextLabel: { - name: 'Label of the next button (slider)', + name: 'next-label', type: { name: 'string' }, - description: '', + description: 'Label of the next button (slider)', }, maxLines: { - name: 'Allowed number of text lines per item', + name: 'max-lines', type: { name: 'select' }, options: [1, 2, 3, 4], - description: 'You can limit the number of lines for item when it wraps', + description: 'Allowed number of text lines per item', }, }; }; @@ -62,6 +68,7 @@ const Template = args => back-label="${args.backMenu}" menu-link="${args.menuLink}" ecl-script + menu-id="${args.menuId}" menu-title="${args.menuTitle}" previousLabel="${args.previousLabel}" nextLabel="${args.nextLabel}" diff --git a/src/components/ecl-menu/ecl-menu.tsx b/src/components/ecl-menu/ecl-menu.tsx index a3145ebb..4304d446 100644 --- a/src/components/ecl-menu/ecl-menu.tsx +++ b/src/components/ecl-menu/ecl-menu.tsx @@ -16,6 +16,7 @@ declare const ECL: any; export class EclMenu { @Element() el: HTMLElement; @Prop() theme: string = 'ec'; + @Prop() menuId: string; @Prop() eclScript: boolean = false; @Prop() styleClass: string; @Prop() group: string = 'group1'; @@ -55,6 +56,17 @@ export class EclMenu { } } + componentDidRender() { + if (this.menuId) { + const items = this.el.querySelectorAll('.ecl-menu__item'); + if (items) { + items.forEach((item, i) => { + item.id = `ecl-menu-item-${this.menuId}-${i}`; + }); + } + } + } + getAttrs() { const attrs = { 'aria-expanded': 'false', @@ -86,7 +98,11 @@ export class EclMenu { > {this.menuTitle} -
+