porscheinformatik / clarity-addons

Addons to Clarity Design System

Addons for the Clarity Design System

Clarity Addons provides additional components and themes to the Clarity Design System.

Getting Started

See the How to Use Clarity-Addons in the docs.

Documentation

For documentation on the Clarity Addons, including a list of components and example usage, see our website.

Contributing

We welcome contributions from the community. For more detailed information, see CONTRIBUTING.

Licenses

• Clarity Addons are licensed under the MIT license.
• Clarity Addons icons are © Volkswagen AG.
  When using the icons, copyrights, name and trademark rights as well as other property rights of Volkswagen AG must be observed. The icons and the brand are protected. No licence or other right of use is granted by the availability of the icons.

clarity-addons's Issues

Angular 8 - ivy compatibility

Hello,

having an angular 8.2 project, when enabling ivy and building the app, i get the error:

ERROR in No suitable injection token for parameter 'location' of class 'ClrBackButton'.
no type or decorator

can you take a look ?

Brand avatar

Is your feature request related to a problem? Please describe.
Similar to the Letter Avatar, which shows the initials of an Person/Organisation, the vehicle need some clear and identifying/reoccuring badge.

Describe the solution you'd like

• Brand avatar showing the brand-logo on a square ground with rounded corners.
• The Shape is intentionally different to the Letter avatar, where a circle is used.
• Brand logos are available (see POI internal confluence, page "Logo, Theme, Icons")

Usage

Specs

• bg-color, should be customizable via variable, default: #707070
• border radius: 2,5px
• width/height: 26px
• brand-logo: either max-width or max-height = 22px (height or width depending on the brand-logo, as large as possible maintaining a 2px padding to the square's border.)

- for foreign (non-company-brands) use new-car-private icon (https://porscheinformatik.github.io/clarity-addons/icons/icon-sets)

Conflict with Clarity v4.0.8 DatePicker

Describe the bug

Clarity v4.0.8 introduced some CSS that conflicts with Clarity Addons for the DatePicker.

The DatePicker has no width anymore (see screenshot in reproduce section).

To Reproduce

1. Install Clarity v4.0.8.
2. Add DatePicker.
3. See DatePicker having no width anymore:
   

Expected behavior

I expect the DatePicker to have it's normal width again.

Versions

App

• Angular: 10
• Node: v14.15.3
• Clarity: v4.0.8
• Clarity-Addons: v9.1.2

Device:

• Multiple browsers.

Additional context

It appears to be introduced in this PR: vmware-archive/clarity#5238

Disabling the following code, fixed the issue:

Icon for Sidebar Pagelayout

How In collapse use icon

in short view only icon
in full icon + nav text

Form validation causes button clicks to miss

Describe the bug

When trying to submit a form contained in the edit block of a clr-view-edit-section at first the form is only re-validated. Only on second click the form is submitted.

This happens because the validation is triggered on blur and during the validation the form changes in height because error messages get displayed below certain fields.

This results in the save and cancel buttons changing position and therefore it is possible for the cursor to no longer be over the button and therefore not triggering the submit action when the click event is triggered.

Expected behavior

Submit event should be triggered regardless of form validation outcome

Versions

Addons Version 8.0.2
Clarity Version 3.1.3

Numeric field remains invalid, after valid number is pasted into it.

1. Enter a value, which fails to validate, and set the focus to the next field => you get 'clr-control-error' message
2. Copy a valid number to the clipboard, set the focus to the previous (faulty) field and paste the valid value into this field
3. Again set the focus to the next field => 'clr-control-error' message will stay and the form will stay invalid.

Example on Documentation page:

Copy '15' into the clipboard, below 'Vertical Form (Reactive)' type '-15' (negative 15) into the money field, hit 'tab' to set the focus to the 'Percentage field', you see the red message 'Please enter a value between 0 and 10.000'; hit SHIFT-'tab' to set the focus back to the 'Money' field, paste the clipboard content (positive 15) into the 'Money' field, hit 'tab' again to set the focus to the 'Percentage' field => the error message stays and the 'Money' field remains invalid!

It works fine, in case you type '15' instead of pasting!

When the project upgrade Clarity 2.0x and Angular 8.0x?

When the project upgrade Clarity 2.0x and Angular 8.0x?

Link to Clarity's new icon page is broken on Clarity Addons

Describe the bug

Link to Clarity's new icon page is broken on Clarity Addons

To Reproduce

Steps to reproduce the behavior:

1. Go to 'https://porscheinformatik.github.io/clarity-addons/icons/get-started'
2. Click on button 'Get started' or Link "Clarity Icons - Get Started Guide"
3. See error "404 ERROR Page not found
   The link is broken or the page has moved.

Expected behavior

Link to new page "https://clarity.design/foundation/icons/"

Versions

App

• Addons Version 10.1.0
• Clarity Version 5.0.0

Responsive menu black overlay with screen widths below 576

Describe the bug

Not sure if this css comes from your library or the old clarity version you are coupled with, but when screen width is below 576 the black overlay is in front of the menu, menues are not working. Not an css expert so not sure where this comes from but this appears when the width hits 575
@media screen and (max-width: 576px)
body {
padding-top: var(--clr-header-height);
}
(from src/clr-addons/mobile.scss:31)

Having the same issue in my project as soon as I add the styling from this project, not when using the latest clarity styles.

To Reproduce

your documentation site -> devtools -> responsive -> select phone or responsive -> screen width 575 - open either of the responsive hamburger menues - black overlay is in front of the menu

Make readonly configurable via boolean property

Currently readonly (https://porscheinformatik.github.io/clarity-addons/documentation/latest/readonly) can only be applied or not applied. It would be great to use a boolean binding to toggle readonly (like disabled).

<clr-checkbox-container [readonly]="shouldCheckboxesBeReadOnly">
</clr-checkbox-container>

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/checkout digest to a5ac7e5
• chore(deps): update angular+cli monorepo (@angular-devkit/build-angular, @angular-devkit/core, @angular/animations, @angular/cdk, @angular/cli, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/platform-server, @angular/router, zone.js)
• fix(deps): update dependency angular-calendar to v0.31.1
• fix(deps): update dependency tslib to v2.6.3
• chore(deps): update dependency @types/node to v20.14.2
• chore(deps): update dependency typescript to v5.4.5
• chore(deps): update typescript-eslint monorepo to v7.13.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update clarity monorepo (@cds/core, @clr/angular, @clr/ui)
• chore(deps): update angular+cli monorepo to v18 (major) (@angular-devkit/build-angular, @angular-devkit/core, @angular/animations, @angular/cdk, @angular/cli, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/platform-server, @angular/router, ng-packagr)
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency husky to v9
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency pretty-quick to v4
• fix(deps): update dependency date-fns to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/publish-website.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4
• JamesIves/github-pages-deploy-action v4.6.1

.github/workflows/publish.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4
• JamesIves/github-pages-deploy-action v4.6.1

.github/workflows/verifier.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4

npm

npm/clr-addons/package.json

package.json

• @angular/animations 17.3.0
• @angular/cdk 17.3.0
• @angular/common 17.3.0
• @angular/compiler 17.3.0
• @angular/core 17.3.0
• @angular/forms 17.3.0
• @angular/platform-browser 17.3.0
• @angular/platform-browser-dynamic 17.3.0
• @angular/router 17.3.0
• @cds/core 6.9.2
• @clr/angular 17.0.1
• @clr/icons 13.0.2
• @clr/ui ^17.0.0
• @kolkov/angular-editor 2.1.0
• @webcomponents/custom-elements 1.6.0
• @webcomponents/webcomponentsjs 2.8.0
• core-js 3.37.1
• rxjs 7.8.1
• tslib 2.6.2
• zone.js 0.14.4
• @alasdair/karma-scss-preprocessor 5.0.0-3
• @angular-devkit/build-angular 17.3.0
• @angular-devkit/core 17.3.0
• @angular-eslint/builder 18.0.1
• @angular/cli 17.3.0
• @angular/compiler-cli 17.3.0
• @types/jasmine 5.1.4
• @types/jasmine-matchers 0.2.35
• @types/jasminewd2 2.0.13
• @types/node 20.12.10
• @typescript-eslint/eslint-plugin 7.2.0
• @typescript-eslint/parser 7.2.0
• autoprefixer 10.4.19
• cp-cli 2.0.0
• csso-cli 4.0.2
• del-cli 5.1.0
• eslint 8.57.0
• eslint-config-prettier 9.1.0
• eslint-plugin-jasmine 4.1.3
• husky 8.0.3
• jasmine-core 5.1.2
• jasmine-spec-reporter 7.0.0
• karma 6.4.3
• karma-chrome-launcher 3.2.0
• karma-coverage-istanbul-reporter 3.0.3
• karma-htmlfile-reporter 0.3.8
• karma-jasmine 5.1.0
• karma-jasmine-html-reporter 2.1.0
• karma-jasmine-matchers 5.0.0
• karma-mocha-reporter 2.2.5
• karma-notify-reporter 1.3.0
• lite-server 2.6.1
• ng-packagr 17.3.0
• npm-run-all2 6.2.0
• postcss 8.4.38
• postcss-cli 11.0.0
• prettier 2.8.8
• pretty-quick 3.3.1
• replace 1.2.2
• sass 1.77.5
• shx 0.3.4
• typescript 5.3.3
• node >=18.0.0
• npm >=8.6.0

src/clr-addons/package.json

• @angular/common ^17.0.0
• @angular/core ^17.0.0
• @angular/compiler ^17.0.0
• @clr/angular 17.0.1
• @cds/core 6.9.2
• @clr/ui 17.0.1

website/package.json

• @angular/animations 17.3.0
• @angular/cdk 17.3.0
• @angular/common 17.3.0
• @angular/compiler 17.3.0
• @angular/core 17.3.0
• @angular/forms 17.3.0
• @angular/platform-browser 17.3.0
• @angular/platform-browser-dynamic 17.3.0
• @angular/platform-server 17.3.0
• @angular/router 17.3.0
• @cds/core 6.9.2
• @clr/angular ^17.0.1
• @clr/ui ^17.0.1
• @kolkov/angular-editor 2.1.0
• @webcomponents/custom-elements 1.6.0
• @webcomponents/webcomponentsjs 2.8.0
• angular-calendar 0.31.0
• core-js 3.37.1
• date-fns 2.30.0
• intl 1.2.5
• jump.js 1.0.2
• prismjs 1.29.0
• rxjs 7.8.1
• tslib 2.6.2
• zone.js 0.14.4
• @angular-devkit/build-angular 17.3.0
• @angular/cli 17.3.0
• @angular/compiler-cli 17.3.0
• @angular/language-service 17.3.0
• @types/node 20.12.10
• codelyzer 6.0.2
• cp-cli 2.0.0
• gh-pages 6.1.1
• ts-loader 9.5.1
• tslint 6.1.3
• typescript 5.3.3

---

• Check this box to trigger a request for Renovate to run again on this repository

Multilingual Input/Textarea - hide language selector when only one language

Would be great to hide the language selector if only one language is available (maybe make this configurable with an additional attribute).

External contribution to this repository

Hi!

Very glad, that I found you addons!

I have a few questions:

1. Do you really accept external contributions?
2. If yes, is it possible to contribute only new components/utils, or I can propose modifications to existing addons?
3. Do you have any roadmap and release schedule? Do you release info prior to releasing breaking changes?
4. Is this repository a long-term project?

Refactor/enhance history component

There are different issues with the history component:

• The component does not update when the history changes - should be refactored to use an Observable
• The cookie reading/writing is quite complication and is done multiple time while changing the history - rewrite to have a single entry point.
• initializeCookieSettings is called every time a component is used (history and pinned history)
• Make max entries, cookie names, max age configurable
• Username should not be outside of the context, it should be just another context property. Maybe event better: flatten the context to a single string - the using party can concat this themselves.
• Handle links and iOS app mode correctly, when single history-items are located in different tlds due to modularisation.

Ensure that we keep the following design goal intact:

1. we need to ensure proper link styling!
   valid "a href" seems to be required for clarity to apply styling.

2. from ux-point of view we should enable the user to open a history-item in a new tab quickly
   ("CRTL+Click", "Left-Click > open in new Tab", ...)

3. App-Mode must be supported and UX must not be brocken on mobile devices.
   this includes having different tld in history-items.

Nice to have:

• if URL is in the current application's route then do not reload page but just open the route

Add a date filter for datagrid

Is your feature request related to a problem? Please describe.
Currently, each project using Clarity has to implement its own date filter for the datagrid. This leads to the problem that filters are not consistent in look and behaviour.

Describe the solution you'd like
A built-in date filter to be used in all datagrids.

Additional context
It seems the Clarity team does not like to add a built-in filter for dates: vmware-clarity/ng-clarity#250

Missing icons on clr-brand-avatar since Angular v12 update

Describe the bug

Icons of clr-brand-avatar component don't load anymore since update to Angular v12.

To Reproduce

Implemented as described in documentation: https://porscheinformatik.github.io/clarity-addons/documentation/latest/brand-avatar

Versions

• Angular: 12.2.16
• Node: v14.15.5
• Clarity: 12.0.9
• Clarity-Addons: 11.0.0

clrNumeric required validation does not woek

When using a clrNumeric input required validation does not work.

Demo of the issue: https://stackblitz.com/edit/clr-addons-numeric-input-required

Display Default value for Datagrid Cell Values

Is your feature request related to a problem? Please describe.
From a design perspective, indicating empty cells in a datagrid cell deliberately is better then just displaying nothing.

Before:

After:

Describe the solution you'd like
Display a default value for DataGrid cells that might be null/empty.
Make the default value optional, and configurable. My suggestion is displaying a single dash -.
This way, everybody using the DataGrid, doesn't have to worry about displaying default values itself.

Describe alternatives you've considered
The alternative is that every application using the DataGrid component has to implement logic to handle displaying default values themselves. Pragmatically, only fields that are in fact optional or can be empty, need to be handled. A generic way to solve this issue for all fields could be nice.

The easiest but most repetitive option is to handle default values like this in the .html files.

<clr-dg-cell>{{fieldThatIsEmpty || '-'}}</clr-dg-cell>
<clr-dg-cell>{{(dateFieldThatIsEmpty | date:'dd.MM.yyyy') || '-'}}</clr-dg-cell>

Moving this logic in the corresponding component class would be more sensible, but in the case of a date field formatted with an angular pipe, the pipe would overwrite the default value as it's not formattable as a date.

Additional context
I'm not sure if meddling with displayed values in a cell can be problematic in some cases.
But since Clarity and specifically the clarity-addons for POI are opinionated, I thought I should mention it.

Quick List - Form Group Support

When adding a formControlName to the quick list component:

<clr-quick-list
    [clrAddLabel]="'Add Role'"
    [clrAllValues]="possibleRoles"
    formControlName="roles"
    class="clr-form-control clr-row"
    clrControlClasses="clr-col-lg-3 clr-col-md-4 clr-col-sm-5">
    <label class="clr-control-label clr-col-md-2 clr-col-sm-3">Roles</label>
</clr-quick-list>

I get the following error:

No value accessor for form control with name

Is this usage supported?

The solution I have come up with for now is as follows:

<clr-quick-list
    [clrAddLabel]="'Add Role'"
    [clrAllValues]="possibleRoles"
    (clrValuesChanged)="rolesChanged($event)"
    class="clr-form-control clr-row"
    clrControlClasses="clr-col-lg-3 clr-col-md-4 clr-col-sm-5">
    <label class="clr-control-label clr-col-md-2 clr-col-sm-3">Roles</label>
</clr-quick-list>

rolesChanged(roles: Array<ClrQuickListValue<string>>) {
    const selectedRoles = [];
    roles.forEach(selectedRole => {
      if (selectedRole.value != null) {
        selectedRoles.push(selectedRole.value);
      }
    });

    this.roleFormGroup.patchValue({ roles: selectedRoles });
}

Thanks

Internationalization example page, $ shown instead of € for language de-at.

Describe the bug

Go to clarity addons - internationalization page, there the $ currency symbol is shown instead of € for "de" locale.

How to reproduce

Steps to reproduce the behavior:

1. Go to 'https://porscheinformatik.github.io/clarity-addons/documentation/latest/internationalization'
2. Select "de-at" or "de" in the Currency example table
3. Verify example, see erroneous currency symbol: there the $ currency symbol is shown instead of €.

Expected behavior

"€" is shown for de, de-at -> verify that other languages work correctly

Versions

Addons Version 8.0.1
Clarity Version 3.1.1

how to use other theme?

How can i use other theme in sass?

Treetable header expand button drops through

Numeric input not matching set value

Describe the bug

I have an input field like below.
If I set it by Angular for example to 1.13 it changes to 1.12.

<input
  clrInput
  clrNumeric
  type="text"
  [(ngModel)]="value"
  [clrUnit]="'%'"
  [clrDecimalSep]="','"
  [clrDecimalPlaces]="2"
  [clrAutofillDecimals]="true"/>

To Reproduce

StackBlitz

Expected behavior

I want, that if I configure a valid number via TypeScript this value persists.

Versions

App

• Angular: 12.2.10
• Node: 14.17.4
• Clarity: 5.2.0
• Clarity-Addons: 10.4.1

Device

• Type: Laptop
• OS: Windows
• Browser: Chrome, Edge
• Version: 95.0.4638.69, 95.0.1020.53

Angular 14. The app doesn't compile after upgrade

Describe the bug

####dependencies

"@angular/animations": "^14.2.6",
    "@angular/common": "^14.2.6",
    "@angular/compiler": "^14.2.6",
    "@angular/core": "^14.2.6",
    "@angular/forms": "^14.2.6",
    "@angular/platform-browser": "^14.2.6",
    "@angular/platform-browser-dynamic": "^14.2.6",
    "@angular/router": "^14.2.6",
    "@cds/angular": "^6.1.6",
    "@cds/city": "^1.1.0",
    "@cds/core": "^6.1.6",
    "@clr/angular": "^13.8.4",
    "@clr/icons": "^13.0.2",
    "@clr/ui": "^13.8.4",
    "@porscheinformatik/clr-addons": "^13.0.0",
    "@webcomponents/custom-elements": "^1.0.0",
    "@webcomponents/webcomponentsjs": "^2.6.0",

./node_modules/@porscheinformatik/clr-addons/fesm2020/clr-addons.mjs:8132:42-53 - Error: export 'takeUntil' (imported as 'takeUntil$1') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrameScheduler, asapScheduler, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

./node_modules/@porscheinformatik/clr-addons/fesm2020/clr-addons.mjs:8385:35-46 - Error: export 'takeUntil' (imported as 'takeUntil$1') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrameScheduler, asapScheduler, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queueScheduler, race, range, scheduled, throwError, timer, using, zip)



✖ Failed to compile.

Angular 10 / Clarity 4 Update

Update to Clarity 4 and Angular 10 and possibly provide .next builds like Clarity does before the release.

broken documentation links

hello,

the documentation links worked last week but somehow every links are dead now.

can you take a look ?

thanks.

ClrNumeric does not add disabled tag when its disabled property value is true

bandicam.2021-07-16.18-28-39-048.mp4

Describe the bug

ClrNumeric does not add the disabled tag when its disabled property is set to true. Instead, the clr-form-control-disabled css class is applied.

To Reproduce

Steps to reproduce the behavior:

Create a form with an input, then put the ClrNumeric directive on it and set its initial disable value to false

Expected behavior

clr-form-control-disabled is applied disabled tag is added to the input

Versions

clr-addon: 10.1.0
clr: 5.0.1

App

• Angular: 11
• Clarity: 5.0.1
• Clarity-Addons: 10.1.0

Notification config to make box appear from bottom

The notification box does stand out as clear when using a blue standard clr header, would be nice if it could take configuration saying that it should appear from the bottom (toastr like).

Treetable with fixed header scrolls out with longer content

Error: export 'ɵbc' (imported as 'ɵbc') was not found in '@clr/angular'

Describe the bug

After upgrading Clarity and Clarity addons to their latest versions for my Angular app, when I try to build the app, I'm faced with the following error:

To Reproduce

Steps to reproduce the behavior:

1. Create an Angular app (version 13.*)
2. Install latest version of Clarity, Clarity Icons (clr/icons) and Clarity Add ons.
3. Run ng build --configuration production
4. See build fail on error shown above

Expected behavior

The angular application should be able to build.

Versions

App

• Angular: [e.g. 13.1.2]
• Node: [e.g. 14.6.1]
• Clarity: [e.g. 13.0.0-next.1]
• Clarity-Addons: [11.0.1]

Additional context

Is this a known bug with the different version, or have I missed a step on the upgrade process?

Icon button broken in a Treetable header

When using an icon button in a clr-treetable the button is not shown correctly.

Numeric input removing decimal places

Describe the bug

I have an input field like below which removes leading zeros if I set the value to 1.5 via Angular for example.

<input
  clrInput
  clrNumeric
  type="text"
  [(clrNumericValue)]="value"
  [clrUnit]="'%'"
  [clrDecimalSep]="','"
  [clrDecimalPlaces]="2"
  [clrAutofillDecimals]="true"/>

To Reproduce

StackBlitz

Expected behavior

I don't want that, these decimal places are removed (replaced with zero).

Versions

App

• Angular: 12.2.10
• Node: 14.17.4
• Clarity: 5.2.0
• Clarity-Addons: 10.4.1

Device

• Type: Laptop
• OS: Windows
• Browser: Chrome, Edge
• Version: 95.0.4638.69, 95.0.1020.53

How to get clarity sass variables into Angular library?

How were you able to reference clarity-ui theme variables from node_modules into the Angular library?

I tried what clr-addons did but I got the following errors:

Missing delete button on ClrSearch input

When the value of a the field is change programatically via the "ngModel" binding, the delte button of the component is not displayed.

The component only listens to the "input" event of the input field. But this is not triggered in this case. Only on user interaction the event is triggered.

I used a own directive as workaround that gets the NgControl injected and subscribes to the valueChanges.

Maybe this could be added in addition to the input event listener. Or maybe it could replace the listener completely.

private listener: () => void;
    private subscription: Subscription;

    constructor(private renderer: Renderer2, private inputEl: ElementRef, private ngControl: NgControl) {}

    ngOnInit() {
        this.subscription = this.ngControl.valueChanges.subscribe(value => {
            if (value) {
                this.renderer.addClass(this.inputEl.nativeElement.parentNode, "has-value");
            }

            window.setTimeout(() => this.unsubscribe(), 1);
        });
    }

    ngOnDestroy() {
        if (this.listener) {
            this.listener();

            delete this.listener;
        }

        this.unsubscribe();
    }

    private unsubscribe() {
        if (this.subscription) {
            this.subscription.unsubscribe();

            delete this.subscription;
        }
    }

Clarity Time Picker Component uses Browser Locale instead of Angular Locale

Describe the bug

The Time Picker component shows either the 12h Format (AM/PM) or the 24h Format based on the browser locale (browser language) and not the angular locale.

To Reproduce

Use the clrTime Input component:

Steps to reproduce the behavior:

1. Use the clrTime component with browser locale (browser language) set to English.
2. Use the clrTime component with browser locale (browser language) set to German.

Expected behavior

The clrTime 12h/24h Format should be based on the Angular locale that can be dynamically changed for the app the user is currently using, and not be based on the locale that has been set in the browser.

Versions

App

• Angular: 13.3.2
• Node: 14.16.0
• Clarity: 12.0.13
• Clarity-Addons: 10.5.1

Device:

• Type: Any
• OS: Any
• Browser: Any
• Version:

Peer dependencies are wrong for 8.1.3 release

The declared peer dependencies to @clr/* are 3.1.1 - the build used 3.1.3

https://github.com/porscheinformatik/clarity-addons/blob/v8.1.3/npm/clr-addons/package.json#L27 vs. https://github.com/porscheinformatik/clarity-addons/blob/v8.1.3/package.json#L45

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error: expecting end of expression or separator near "auto

Content panel grows to the right instead of sliding from the right

Describe the bug

When opening the content panel, the panel grows from the final position towards the right hand side of the browser window instead of going from the right to the left.

To Reproduce

Just open the clarity addons content panel demo

Steps to reproduce the behavior:

1. Click on the open button
2. Click on the close button

Both transitions happen in an unexpected way, not matching visually with the intention.

GIF for future reference:

Expected behavior

The content panel should slide from the right with the left boundary moving from right side to the final position (right side - panel width)

Versions

Locally, I experienced this issue with the following versions:

App

• Angular: 9.1.7
• Node: 10.15.3
• Clarity: 3.1.3
• Clarity-Addons: 8.1.2

Device:

• Type: Lenovo
• OS: Windows 10
• Browser: Google Chrome
• Version: 85.0.4183.121

Treetable with multiline header (fixed height) hides first row(s)

Update Clarity to 2.3.0

Numeric Field: Change event of input is not fired sometimes on Safari and iOS

Describe the bug

In Safari on iOS the change event of an numeric field is not firing all the time (see video). The setup in the video is almost the same as in the stackblitz example, the change event of the input should fire a recalculation of the values in the other form fields. If you change the digits before the decimal separator the event isn't fired sometimes, but if you change a decimal digit, then it works all the time.
This behaviour is only visible when the clrNumeric directive is added.

To Reproduce

Here is a stackblitz example, although it only happens on iOS and Safari.
https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-gqvbd6?file=src/app/app.component.html

Versions

App

• Angular: 11.2.5
• Node: 16.15.0
• Clarity: 5.2.0
• Clarity-Addons: 10.5.0

Device:

• Type: iPad
• OS: iOS 15.4.1
• Browser: Safari
• Version: 15

numeric-field-ipad.mp4

content-panel not working with datagrid inside

As soon as you place a datagrid component inside a content-panel, it stops resizing itself.

The other content-panel doesn't open anymore and if the datagrid is larger than the content container there is no overflow or scrollbar: the rest of the table cannot be displayed in any way by the user.

Example: Datagrid in the content container:

<clr-content-panel-container>

	<clr-content-panel-container-content>
		<clr-datagrid>
		...
		</clr-datagrid>
	</clr-content-panel-container-content>
	
	<clr-content-panel #rightPanel>
		<ng-container clr-content-panel-title>Right panel title</ng-container>
		<ng-container clr-content-panel-content>
		...
		</ng-container>
	</clr-content-panel>
</clr-content-panel-container>

Command Bar Dropdown Menu is below Content Panel since Clarity 3.1.5

Describe the bug

Clarity changed the z-index base values in 3.1.5: vmware-archive/clarity@f0e70df

This breaks dropdown menus in the command bar.

To Reproduce

https://stackblitz.com/edit/clarity-v3-light-theme-jlys1a

• Click on the History button (top right)
• The dropdown is shown below the content panel

Expected behavior

Dropdown should be on top

Versions

App

• Angular: 9
• Node: 10 or 12
• Clarity: 3.1.5
• Clarity-Addons: 8.2.2

Additional context

Add any other context about the problem here.

View Edit section should change its editability according to clrEditable value

On View Edit section the mode should be changed to VIEW when clrEditable is false in case it is currently on edit mode.

Numeric Field in Treetable or Datagrid - unit not aligned

When using a Numeric Field in a Treetable the unit symbol is not aligned correctly.

Missing .scss files

Describe the bug

In a few of our projects we have custom theme's setup for Clarity. We could do this very simple by importing all the required Clarity and Clarity Addons SCSS files in our themes. This allowed us to use all variables, while still applying the styling and extending where ever needed.

	@import '@clr/ui/src/utils/components.clarity'; // Clarity components.
	@import '@porscheinformatik/clr-addons/src/components.variables.clr-addons'; // Clarity Addons variables.
	@import '@porscheinformatik/clr-addons/src/components.clr-addons'; // Clarity Addons components.

However, in #1565 (and release 12.1.0.new) you removed the src folder (breaking change?), which also contained the .scss files.

Would you consider adding those files back?
Perhaps move them to the styles folder?

Versions

App

• Angular: 13.2.5
• Node: v16.14.0
• Clarity: 13.0.2
• Clarity-Addons: 12.1.0

Combobox validation

When the value in the combobox is empty and the component itself is blurred, the validation should be triggered. What about introducing a prop named required, if it is set, the validation is triggered when the value is empty.

Release Notes

Great project, but to keep up with updates, we need release notes.

I looked for:

• News page, but it appears to be out-of-date.
• Notes in README.md file, but it appears to be missing.
• Release notes file in this repo, but it appears to be missing.
• GitHub releases page, but it appears to be out-of-date.
• GitHub tags page with git tags, but it appears to be out-of-date.

It would be great if per version an overview of release notes could be created. Preferred system would be to use GitHub releases page. Both the README.md and news page could be linking to the releases page.

Clr-icons not showing

After I installed clarity-addons, I see the following error in debugger: Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "clr-icon" has already been used with this registry
at CustomElementRegistry.target.
I figured this had to do with the icon library being called twice. I removed "node_modules/@clr/icons/clr-icons.min.js" from "scripts" in my angular.json file, but once I do that, all icons disappear in my app and are replaced by an (!) icon.
I also imported ClrAddonsModule in my modules. What did I forget?

Table info popup not visible on smartphone

Screenshot: