Merge branch 'main' into CDE-2441

.storybook/stories/alert/app-level-alert.stories.ts

@@ -79,7 +79,13 @@ const template = `
     (clrAlertClosedChange)="clrAlertClosedChange($event)"
   >
     <clr-alert-item *ngFor="let _ of createArray(itemCount); let i = index">
-      <span class="alert-text">{{ content }} {{ i + 1 }}</span>
+      <span class="alert-text">
+        {{ content }} {{ i + 1 }}
+        <a href="javascript://">
+          <cds-icon shape="user"></cds-icon>
+          Reset to green
+        </a>
+      </span>
       <div *ngIf="showActions" class="alert-actions">
         <button class="btn alert-action">Fix</button>
         <button class="btn alert-action">Ignore</button>
@@ -122,7 +128,7 @@ const PaginatedTemplate: StoryFn = args => ({
   template: `
     <clr-alerts [clrCurrentAlertIndex]="clrCurrentAlertIndex">
       <clr-alert
-        *ngFor="let alert of ALERT_TYPES"
+        *ngFor="let alert of ALERT_TYPES; let i = index"
         [clrAlertAppLevel]="true"
         [clrAlertClosable]="clrAlertClosable"
         [clrAlertIcon]="clrAlertIcon"
@@ -131,7 +137,17 @@ const PaginatedTemplate: StoryFn = args => ({
         (clrAlertClosedChange)="clrAlertClosedChange($event)"
       >
         <clr-alert-item>
-          <span class="alert-text">{{ content }} {{ alert }}</span>
+          <span class="alert-text">
+            {{ content }} {{ i + 1 }}
+            <a href="javascript://">
+              <cds-icon shape="user"></cds-icon>
+              Reset to green
+            </a>
+          </span>
+          <div *ngIf="showActions" class="alert-actions">
+            <button class="btn alert-action">Fix</button>
+            <button class="btn alert-action">Ignore</button>
+          </div>
         </clr-alert-item>
       </clr-alert>
     </clr-alerts>
@@ -160,6 +176,16 @@ export const Paginated: StoryObj = {
   },
 };
 
+export const PaginatedWithActions: StoryObj = {
+  render: PaginatedTemplate,
+  argTypes: paginatedArgTypes,
+  args: {
+    ...paginatedArgs,
+    clrAlertClosable: false,
+    showActions: true,
+  },
+};
+
 export const PaginatedClosable: StoryObj = {
   render: PaginatedTemplate,
   argTypes: paginatedArgTypes,

projects/angular/src/emphasis/alert/_alert.clarity.scss

@@ -19,8 +19,13 @@
   background: alert-variables.getAlertColor($alertType, bg-color);
   color: alert-variables.getAlertColor($alertType, color);
 
-  & a {
+  & .alert-items .alert-item a {
     color: alert-variables.getAlertColor($alertType, color);
+
+    cds-icon,
+    clr-icon {
+      fill: alert-variables.getAlertColor($alertType, color);
+    }
   }
 
   $border-prop: alert-variables.getAlertColor($alertType, border-color);
@@ -362,11 +367,6 @@
     .close {
       margin: var(--cds-global-space-4) 0;
     }
-
-    .alert-action,
-    .dropdown-toggle {
-      text-decoration: none;
-    }
   }
 
   .alert-sm {

projects/angular/src/forms/datepicker/_datepicker.clarity.scss

@@ -163,11 +163,7 @@
     }
 
     &.is-excluded {
-      color: tokens.$cds-alias-object-interaction-color-disabled;
-
-      &:hover {
-        background: none;
-      }
+      display: none;
     }
 
     &.is-selected {

projects/angular/src/forms/datepicker/day.ts

@@ -77,6 +77,9 @@ export class ClrDay {
    * Updates the selectedDay when the ClrDay is selected and closes the datepicker popover.
    */
   selectDay(): void {
+    if (this.dayView.isDisabled) {
+      return;
+    }
     const day: DayModel = this.dayView.dayModel;
     this._dateNavigationService.notifySelectedDayChanged(day);
     this.dateFormControlService.markAsDirty();

projects/angular/src/layout/tabs/index.ts

@@ -14,5 +14,6 @@ export * from './tab-link.directive';
 export * from './tab-action.directive';
 export * from './tabs.module';
 
+export { ClrTabsActionsPosition } from './tabs-actions';
 export { TabsWillyWonka as ÇlrTabsWillyWonka } from './chocolate/tabs-willy-wonka';
 export { ActiveOompaLoompa as ÇlrActiveOompaLoompa } from './chocolate/active-oompa-loompa';