diff --git a/CHANGELOG.md b/CHANGELOG.md index cbd97e4e..a4d944e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,32 @@ +# [6.1.0-rc.3](https://github.com/TEDI-Design-System/angular/compare/angular-6.1.0-rc.2...angular-6.1.0-rc.3) (2026-02-12) + + +### Features + +* **progress-bar:** Add community progress bar [#299](https://github.com/TEDI-Design-System/angular/issues/299) ([b22be12](https://github.com/TEDI-Design-System/angular/commit/b22be1234eeab7bea67172bc4b9e3084af21a835)) +* **progress-bar:** add progress bar exports [#299](https://github.com/TEDI-Design-System/angular/issues/299) ([e6bc4bf](https://github.com/TEDI-Design-System/angular/commit/e6bc4bfb25456882e98673bc6af7499a1faffdec)) + +# [6.1.0-rc.2](https://github.com/TEDI-Design-System/angular/compare/angular-6.1.0-rc.1...angular-6.1.0-rc.2) (2026-02-03) + + +### Bug Fixes + +* **datepicker:** displayed value not changing on external update [#322](https://github.com/TEDI-Design-System/angular/issues/322) ([#323](https://github.com/TEDI-Design-System/angular/issues/323)) ([adfb6c1](https://github.com/TEDI-Design-System/angular/commit/adfb6c12e4855af1a4724de9e08f9fd8dbc4b835)) + +# [6.1.0-rc.1](https://github.com/TEDI-Design-System/angular/compare/angular-6.0.1-rc.1...angular-6.1.0-rc.1) (2026-02-03) + + +### Features + +* **progress-bar:** Add community progress bar [#299](https://github.com/TEDI-Design-System/angular/issues/299) ([#321](https://github.com/TEDI-Design-System/angular/issues/321)) ([3b75325](https://github.com/TEDI-Design-System/angular/commit/3b7532584d3f480b9e429d5db0fb11196d32abbc)) + +## [6.0.1-rc.1](https://github.com/TEDI-Design-System/angular/compare/angular-6.0.0...angular-6.0.1-rc.1) (2026-01-29) + + +### Bug Fixes + +* **vertical-stepper:** add missing export [#254](https://github.com/TEDI-Design-System/angular/issues/254) ([#309](https://github.com/TEDI-Design-System/angular/issues/309)) ([5355844](https://github.com/TEDI-Design-System/angular/commit/53558446861cf960f94918ac4cec5113019b2982)) + # [6.0.0](https://github.com/TEDI-Design-System/angular/compare/angular-5.0.0...angular-6.0.0) (2026-01-29) diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..f05362f4 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 TEDI Design System + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/community/components/helpers/index.ts b/community/components/helpers/index.ts new file mode 100644 index 00000000..c56d4c06 --- /dev/null +++ b/community/components/helpers/index.ts @@ -0,0 +1 @@ +export * from "./progress-bar"; diff --git a/community/components/helpers/progress-bar/index.ts b/community/components/helpers/progress-bar/index.ts new file mode 100644 index 00000000..7a5a721e --- /dev/null +++ b/community/components/helpers/progress-bar/index.ts @@ -0,0 +1 @@ +export * from "./progress-bar.component"; diff --git a/community/components/helpers/progress-bar/progress-bar.component.html b/community/components/helpers/progress-bar/progress-bar.component.html new file mode 100644 index 00000000..ffc65cf6 --- /dev/null +++ b/community/components/helpers/progress-bar/progress-bar.component.html @@ -0,0 +1,20 @@ + + +{{ value() }}% + +@if (feedbackText(); as feedback) { + +} diff --git a/community/components/helpers/progress-bar/progress-bar.component.scss b/community/components/helpers/progress-bar/progress-bar.component.scss new file mode 100644 index 00000000..f625fe7d --- /dev/null +++ b/community/components/helpers/progress-bar/progress-bar.component.scss @@ -0,0 +1,56 @@ +@use "@tedi-design-system/core/bootstrap-utility/breakpoints"; + +.tedi-progress { + --_bar-height: var(--progress-bar-height, 8px); + --_bar-radius: var(--progress-bar-radius, 4px); + --_bar-background: var(--progress-bar-background-passive, #f9f9f9); + --_bar-border: var(--progress-bar-border-default, #838494); + --_progress-background: var(--progress-bar-background-active, #005aa3); + + display: grid; + grid-template-areas: "bar bar" ". indicator"; + grid-template-rows: 24px; + grid-template-columns: 1fr auto; + column-gap: var(--layout-grid-gutters-08, 8px); + + &__bar { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + grid-area: bar; + height: var(--_bar-height); + border-radius: var(--_bar-radius); + border: 1px solid var(--_bar-border); + width: 100%; + align-self: center; + + &::-webkit-progress-bar { + background: var(--_bar-background); + border-radius: var(--_bar-radius); + } + + &::-webkit-progress-value { + background: var(--_progress-background); + border-radius: var(--_bar-radius); + } + + &::-moz-progress-bar { + background: var(--_progress-background); + border-radius: var(--_bar-radius); + } + } + + &__indicator { + grid-area: indicator; + } + + &--small { + --_bar-height: var(--progress-bar-height-sm, 4px); + } + + &--horizontal { + @include breakpoints.media-breakpoint-up(sm) { + grid-template-areas: "bar indicator"; + } + } +} diff --git a/community/components/helpers/progress-bar/progress-bar.component.ts b/community/components/helpers/progress-bar/progress-bar.component.ts new file mode 100644 index 00000000..911581c7 --- /dev/null +++ b/community/components/helpers/progress-bar/progress-bar.component.ts @@ -0,0 +1,30 @@ +import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core"; +import { ComponentInputs, FeedbackTextComponent, generateUUID, LabelComponent } from "@tedi-design-system/angular/tedi"; + +@Component({ + selector: "tedi-progress-bar", + imports: [FeedbackTextComponent, LabelComponent], + templateUrl: "./progress-bar.component.html", + styleUrl: "./progress-bar.component.scss", + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { + "[class.tedi-progress]": "true", + "[class.tedi-progress--small]": "small()", + "[class.tedi-progress--horizontal]": "direction() === 'horizontal'", + }, +}) +export class ProgressBarComponent { + progressId = input(); + value = input(0); + direction = input<'horizontal' | 'vertical'>("horizontal"); + small = input(false, { transform: booleanAttribute }); + feedbackText = input>(); + + feedbackTextId = computed(() => { + if (this.feedbackText()) { + return generateUUID(); + } + return; + }); +} diff --git a/community/components/helpers/progress-bar/progress-bar.stories.ts b/community/components/helpers/progress-bar/progress-bar.stories.ts new file mode 100644 index 00000000..e77b6d56 --- /dev/null +++ b/community/components/helpers/progress-bar/progress-bar.stories.ts @@ -0,0 +1,86 @@ +import { Meta, moduleMetadata, StoryObj } from "@storybook/angular"; +import { ProgressBarComponent } from "./progress-bar.component"; + +export default { + title: "Community/Helpers/ProgressBar", + component: ProgressBarComponent, + decorators: [ + moduleMetadata({ + imports: [ProgressBarComponent], + }), + ], + argTypes: { + progressId: { + description: + "Optional id for the progress element to bind with label etc.", + control: "text", + table: { + type: { summary: "string" }, + }, + }, + value: { + description: "Progress value between 0 and 100", + control: { type: "number", min: 0, max: 100, step: 1 }, + table: { + type: { summary: "number" }, + defaultValue: { summary: "0" }, + }, + }, + direction: { + description: "Orientation of the progress bar", + control: { type: "radio" }, + options: ["horizontal", "vertical"], + table: { + type: { summary: "'horizontal' | 'vertical'" }, + defaultValue: { summary: "horizontal" }, + }, + }, + small: { + description: "Whether it's the small variant", + control: "boolean", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + }, + feedbackText: { + description: + "Optional feedback text displayed alongside the progress bar. Accepts `FeedbackTextComponent` inputs.", + control: "object", + table: { + type: { summary: "ComponentInputs" }, + }, + }, + }, +} as Meta; + +export const Default: StoryObj = { + args: { + value: 50, + direction: "horizontal", + small: false, + }, +}; + +export const Small: StoryObj = { + args: { + value: 50, + direction: "horizontal", + small: true, + }, +}; + +export const WithFeedback: StoryObj = { + args: { + value: 50, + feedbackText: { text: "Uploading…", type: "hint", position: "left" }, + }, +}; + +export const Vertical: StoryObj = { + args: { + value: 50, + feedbackText: { text: "Uploading…", type: "hint", position: "left" }, + direction: "vertical", + }, +}; diff --git a/community/components/navigation/index.ts b/community/components/navigation/index.ts index 1b282a6e..d1d791f2 100644 --- a/community/components/navigation/index.ts +++ b/community/components/navigation/index.ts @@ -2,3 +2,4 @@ export * from "./breadcrumbs/breadcrumbs.component"; export * from "./pagination/pagination.component"; export * from "./table-of-contents"; export * from "./tabs"; +export * from "./vertical-stepper"; diff --git a/community/index.ts b/community/index.ts index fa989c6d..4044f9bf 100644 --- a/community/index.ts +++ b/community/index.ts @@ -5,3 +5,4 @@ export * from "./components/navigation"; export * from "./components/overlay"; export * from "./components/tags"; export * from "./components/table"; +export * from "./components/helpers"; diff --git a/package-lock.json b/package-lock.json index fcb4226a..d3e7b90a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,10 +30,10 @@ "@angular/platform-browser-dynamic": "19.2.15", "@angular/router": "19.2.15", "@commitlint/cli": "^19.8.1", - "@commitlint/config-conventional": "^20.2.0", + "@commitlint/config-conventional": "^20.4.2", "@compodoc/compodoc": "^1.1.26", "@etchteam/storybook-addon-status": "^5.0.0", - "@schematics/angular": "19.2.15", + "@schematics/angular": "21.1.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/commit-analyzer": "^13.0.0", "@semantic-release/git": "^10.0.1", @@ -766,6 +766,23 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@angular/cli/node_modules/@schematics/angular": { + "version": "19.2.15", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.2.15.tgz", + "integrity": "sha512-dz/eoFQKG09POSygpEDdlCehFIMo35HUM2rVV8lx9PfQEibpbGwl1NNQYEbqwVjTyCyD/ILyIXCWPE+EfTnG4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "19.2.15", + "@angular-devkit/schematics": "19.2.15", + "jsonc-parser": "3.3.1" + }, + "engines": { + "node": "^18.19.1 || ^20.11.1 || >=22.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, "node_modules/@angular/cli/node_modules/rxjs": { "version": "7.8.1", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", @@ -3043,33 +3060,49 @@ } }, "node_modules/@commitlint/config-conventional": { - "version": "20.2.0", - "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-20.2.0.tgz", - "integrity": "sha512-MsRac+yNIbTB4Q/psstKK4/ciVzACHicSwz+04Sxve+4DW+PiJeTjU0JnS4m/oOnulrXYN+yBPlKaBSGemRfgQ==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-20.4.2.tgz", + "integrity": "sha512-rwkTF55q7Q+6dpSKUmJoScV0f3EpDlWKw2UPzklkLS4o5krMN1tPWAVOgHRtyUTMneIapLeQwaCjn44Td6OzBQ==", "dev": true, "license": "MIT", "dependencies": { - "@commitlint/types": "^20.2.0", - "conventional-changelog-conventionalcommits": "^7.0.2" + "@commitlint/types": "^20.4.0", + "conventional-changelog-conventionalcommits": "^9.1.0" }, "engines": { "node": ">=v18" } }, "node_modules/@commitlint/config-conventional/node_modules/@commitlint/types": { - "version": "20.2.0", - "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-20.2.0.tgz", - "integrity": "sha512-KTy0OqRDLR5y/zZMnizyx09z/rPlPC/zKhYgH8o/q6PuAjoQAKlRfY4zzv0M64yybQ//6//4H1n14pxaLZfUnA==", + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-20.4.0.tgz", + "integrity": "sha512-aO5l99BQJ0X34ft8b0h7QFkQlqxC6e7ZPVmBKz13xM9O8obDaM1Cld4sQlJDXXU/VFuUzQ30mVtHjVz74TuStw==", "dev": true, "license": "MIT", "dependencies": { - "@types/conventional-commits-parser": "^5.0.0", - "chalk": "^5.3.0" + "conventional-commits-parser": "^6.2.1", + "picocolors": "^1.1.1" }, "engines": { "node": ">=v18" } }, + "node_modules/@commitlint/config-conventional/node_modules/conventional-commits-parser": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.2.1.tgz", + "integrity": "sha512-20pyHgnO40rvfI0NGF/xiEoFMkXDtkF8FwHvk5BokoFoCuTQRI8vrNCNFWUOfuolKJMm1tPCHc8GgYEtr1XRNA==", + "dev": true, + "license": "MIT", + "dependencies": { + "meow": "^13.0.0" + }, + "bin": { + "conventional-commits-parser": "dist/cli/index.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@commitlint/config-validator": { "version": "19.8.1", "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-19.8.1.tgz", @@ -8168,22 +8201,233 @@ } }, "node_modules/@schematics/angular": { - "version": "19.2.15", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.2.15.tgz", - "integrity": "sha512-dz/eoFQKG09POSygpEDdlCehFIMo35HUM2rVV8lx9PfQEibpbGwl1NNQYEbqwVjTyCyD/ILyIXCWPE+EfTnG4g==", + "version": "21.1.2", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.1.2.tgz", + "integrity": "sha512-kxwxhCIUrj7DfzEtDSs/pi/w+aII/WQLpPfLgoQCWE8/95v60WnTfd1afmsXsFoxikKPxkwoPWtU2YbhSoX9MQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "19.2.15", - "@angular-devkit/schematics": "19.2.15", + "@angular-devkit/core": "21.1.2", + "@angular-devkit/schematics": "21.1.2", "jsonc-parser": "3.3.1" }, "engines": { - "node": "^18.19.1 || ^20.11.1 || >=22.0.0", + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", "yarn": ">= 1.13.0" } }, + "node_modules/@schematics/angular/node_modules/@angular-devkit/core": { + "version": "21.1.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.1.2.tgz", + "integrity": "sha512-0wl5nJlFWsbwfUB2CQeTSmnVQ8AtqqwM3bYPYtXSc+vA8+hzsOAjjDuRnBxZS9zTnqtXKXB1e7M3Iy7KUwh7LA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "8.17.1", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.3", + "rxjs": "7.8.2", + "source-map": "0.7.6" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^5.0.0" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, + "node_modules/@schematics/angular/node_modules/@angular-devkit/schematics": { + "version": "21.1.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.1.2.tgz", + "integrity": "sha512-PA3gkiFhHUuXd2XuP7yzKg/9N++bjw+uOl473KwIsMuZwMPhncKa4+mUYBaffDoPqaujZvjfo6mjtCBuiBv05w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "21.1.2", + "jsonc-parser": "3.3.1", + "magic-string": "0.30.21", + "ora": "9.0.0", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@schematics/angular/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@schematics/angular/node_modules/cli-spinners": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-3.4.0.tgz", + "integrity": "sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@schematics/angular/node_modules/is-interactive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz", + "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@schematics/angular/node_modules/is-unicode-supported": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz", + "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@schematics/angular/node_modules/log-symbols": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz", + "integrity": "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-unicode-supported": "^2.0.0", + "yoctocolors": "^2.1.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@schematics/angular/node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, + "node_modules/@schematics/angular/node_modules/ora": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ora/-/ora-9.0.0.tgz", + "integrity": "sha512-m0pg2zscbYgWbqRR6ABga5c3sZdEon7bSgjnlXC64kxtxLOyjRcbbUkLj7HFyy/FTD+P2xdBWu8snGhYI0jc4A==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^5.6.2", + "cli-cursor": "^5.0.0", + "cli-spinners": "^3.2.0", + "is-interactive": "^2.0.0", + "is-unicode-supported": "^2.1.0", + "log-symbols": "^7.0.1", + "stdin-discarder": "^0.2.2", + "string-width": "^8.1.0", + "strip-ansi": "^7.1.2" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@schematics/angular/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/@schematics/angular/node_modules/readdirp": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz", + "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@schematics/angular/node_modules/source-map": { + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", + "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 12" + } + }, + "node_modules/@schematics/angular/node_modules/string-width": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.1.tgz", + "integrity": "sha512-KpqHIdDL9KwYk22wEOg/VIqYbrnLeSApsKT/bSj6Ez7pn3CftUiLAv2Lccpq1ALcpLV9UX1Ppn92npZWu2w/aw==", + "dev": true, + "license": "MIT", + "dependencies": { + "get-east-asian-width": "^1.3.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@sec-ant/readable-stream": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz", @@ -13718,16 +13962,16 @@ } }, "node_modules/conventional-changelog-conventionalcommits": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-7.0.2.tgz", - "integrity": "sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-9.1.0.tgz", + "integrity": "sha512-MnbEysR8wWa8dAEvbj5xcBgJKQlX/m0lhS8DsyAAWDHdfs2faDJxTgzRYlRYpXSe7UiKrIIlB4TrBKU9q9DgkA==", "dev": true, "license": "ISC", "dependencies": { "compare-func": "^2.0.0" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/conventional-changelog-writer": { diff --git a/package.json b/package.json index bdd0e160..6d9eb15b 100644 --- a/package.json +++ b/package.json @@ -54,10 +54,10 @@ "@angular/platform-browser-dynamic": "19.2.15", "@angular/router": "19.2.15", "@commitlint/cli": "^19.8.1", - "@commitlint/config-conventional": "^20.2.0", + "@commitlint/config-conventional": "^20.4.2", "@compodoc/compodoc": "^1.1.26", "@etchteam/storybook-addon-status": "^5.0.0", - "@schematics/angular": "19.2.15", + "@schematics/angular": "21.1.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/commit-analyzer": "^13.0.0", "@semantic-release/git": "^10.0.1", diff --git a/tedi/components/form/date-picker/date-picker.component.spec.ts b/tedi/components/form/date-picker/date-picker.component.spec.ts index 996ed7c6..bece94c8 100644 --- a/tedi/components/form/date-picker/date-picker.component.spec.ts +++ b/tedi/components/form/date-picker/date-picker.component.spec.ts @@ -1230,4 +1230,26 @@ describe("DatePickerComponent", () => { jest.useRealTimers(); }); }); + + describe("External selected input changes", () => { + it("should update inputValue when selected input is changed externally", () => { + const date = new Date(2024, 5, 15); + fixture.componentRef.setInput("selected", date); + fixture.detectChanges(); + + expect(component.inputValue()).toBe("15.06.2024"); + }); + + it("should clear inputValue when selected input is set to null externally", () => { + fixture.componentRef.setInput("selected", new Date(2024, 5, 15)); + fixture.detectChanges(); + + expect(component.inputValue()).toBe("15.06.2024"); + + fixture.componentRef.setInput("selected", null); + fixture.detectChanges(); + + expect(component.inputValue()).toBe(""); + }); + }); }); diff --git a/tedi/components/form/date-picker/date-picker.component.ts b/tedi/components/form/date-picker/date-picker.component.ts index 3332a982..40b92a59 100644 --- a/tedi/components/form/date-picker/date-picker.component.ts +++ b/tedi/components/form/date-picker/date-picker.component.ts @@ -10,6 +10,7 @@ import { OnInit, viewChild, ElementRef, + effect, } from "@angular/core"; import { ButtonComponent } from "../../buttons/button/button.component"; import { ClosingButtonComponent } from "../../buttons/closing-button/closing-button.component"; @@ -272,11 +273,15 @@ export class DatePickerComponent implements OnInit { readonly translationService = inject(TediTranslationService); - ngOnInit(): void { - const selected = this.selected(); - this.inputValue.set(selected ? formatDate(selected) : ""); + constructor() { + effect(() => { + const selected = this.selected(); + this.inputValue.set(selected ? formatDate(selected) : ""); + }); + } - let active = selected ?? this.today; + ngOnInit(): void { + let active = this.selected() ?? this.today; // If the initial active date is disabled, find the first enabled date if (this.isDisabled(active)) {