@ndwnu/design-system 14.2.1 → 14.3.0

package/styles/components/_datepicker.scss

@@ -1,134 +1,134 @@
-@use '@angular/material' as mat;
-
-:root {
-  @include mat.datepicker-overrides(
-    (
-      toggle-icon-color: var(--ndw-color-primary),
-      calendar-container-background-color: var(--ndw-color-grey-100),
-      calendar-container-elevation-shadow: var(--ndw-elevation-content),
-      calendar-container-shape: var(--ndw-border-radius-md),
-      calendar-text-font: var(--ndw-font-family-body),
-      calendar-text-size: var(--ndw-font-size-sm),
-      calendar-header-text-size: var(--ndw-font-size-sm),
-      calendar-body-label-text-size: var(--ndw-font-size-sm),
-      calendar-period-button-text-size: var(--ndw-font-size-sm),
-      calendar-date-text-color: var(--ndw-color-text),
-      calendar-date-today-outline-color: var(--ndw-color-secondary-200),
-      calendar-date-selected-state-background-color: var(--ndw-color-secondary-400),
-      calendar-date-today-selected-state-outline-color: var(--ndw-color-secondary-400),
-      calendar-date-preview-state-outline-color: var(--ndw-color-secondary-300),
-      calendar-date-hover-state-background-color: var(--ndw-color-secondary-300),
-      calendar-date-focus-state-background-color: var(--ndw-color-secondary-300),
-    )
-  );
-
-  mat-calendar {
-    --range-preview-border: var(--ndw-border-size-sm) dashed var(--ndw-color-secondary-300);
-
-    .mat-calendar-body-label {
-      visibility: hidden;
-    }
-
-    tr:has(.mat-calendar-body-label):not(:has(.mat-calendar-body-cell)) {
-      display: none;
-    }
-
-    .ndw-date-selected > :first-child {
-      background-color: var(--ndw-color-secondary-400) !important;
-      color: var(--ndw-color-white) !important;
-    }
-
-    .ndw-date-range-start {
-      background-color: var(--ndw-color-secondary-200);
-      border-top-left-radius: 50%;
-      border-bottom-left-radius: 50%;
-    }
-
-    .ndw-date-range-end {
-      background-color: var(--ndw-color-secondary-200);
-      border-top-right-radius: 50%;
-      border-bottom-right-radius: 50%;
-    }
-
-    .ndw-date-in-range {
-      background-color: var(--ndw-color-secondary-200);
-    }
-
-    .ndw-date-range-start-preview {
-      background-color: var(--ndw-color-secondary-100);
-      border-top-left-radius: 50%;
-      border-bottom-left-radius: 50%;
-    }
-
-    .ndw-date-range-end-preview {
-      background-color: var(--ndw-color-secondary-100);
-      border-top-right-radius: 50%;
-      border-bottom-right-radius: 50%;
-    }
-
-    .ndw-date-in-range-preview {
-      background-color: var(--ndw-color-secondary-100);
-    }
-
-    // Add a dot below dates with the ndw-date-indicator class
-    .ndw-date-indicator > :first-child {
-      &::after {
-        content: '';
-        background: var(--ndw-color-primary);
-        position: absolute;
-        bottom: 2px;
-        left: calc(50% - 4px);
-        width: 8px;
-        height: 8px;
-        box-sizing: border-box;
-        border-radius: 4px;
-      }
-    }
-
-    // Disable the month view when in 'month' mode
-    &.month-picker {
-      .mat-calendar-period-button {
-        pointer-events: none;
-      }
-
-      .mat-calendar-arrow {
-        display: none;
-      }
-    }
-  }
-}
-
-ndw-calendar.show-week-numbers {
-  --week-number-size: 16px;
-
-  padding-left: 1rem;
-
-  .mat-calendar-body {
-    min-height: calc(6 * var(--mat-datepicker-calendar-date-state-layer-height, 42px));
-    vertical-align: top;
-  }
-
-  thead {
-    tr::before {
-      content: '';
-      width: var(--week-number-size);
-    }
-  }
-
-  tbody {
-    tr[data-week-number] {
-      position: relative;
-    }
-
-    // Display week numbers in the calendar
-    tr[data-week-number]::before {
-      content: attr(data-week-number);
-      position: absolute;
-      top: calc(50% - 9px);
-      left: calc(-1 * var(--week-number-size));
-      height: 8px;
-      font-size: var(--ndw-font-size-sm);
-      color: var(--ndw-color-grey-400);
-    }
-  }
-}
+@use '@angular/material' as mat;
+
+:root {
+  @include mat.datepicker-overrides(
+    (
+      toggle-icon-color: var(--ndw-color-primary),
+      calendar-container-background-color: var(--ndw-color-grey-100),
+      calendar-container-elevation-shadow: var(--ndw-elevation-content),
+      calendar-container-shape: var(--ndw-border-radius-md),
+      calendar-text-font: var(--ndw-font-family-body),
+      calendar-text-size: var(--ndw-font-size-sm),
+      calendar-header-text-size: var(--ndw-font-size-sm),
+      calendar-body-label-text-size: var(--ndw-font-size-sm),
+      calendar-period-button-text-size: var(--ndw-font-size-sm),
+      calendar-date-text-color: var(--ndw-color-text),
+      calendar-date-today-outline-color: var(--ndw-color-secondary-200),
+      calendar-date-selected-state-background-color: var(--ndw-color-secondary-400),
+      calendar-date-today-selected-state-outline-color: var(--ndw-color-secondary-400),
+      calendar-date-preview-state-outline-color: var(--ndw-color-secondary-300),
+      calendar-date-hover-state-background-color: var(--ndw-color-secondary-300),
+      calendar-date-focus-state-background-color: var(--ndw-color-secondary-300),
+    )
+  );
+
+  mat-calendar {
+    --range-preview-border: var(--ndw-border-size-sm) dashed var(--ndw-color-secondary-300);
+
+    .mat-calendar-body-label {
+      visibility: hidden;
+    }
+
+    tr:has(.mat-calendar-body-label):not(:has(.mat-calendar-body-cell)) {
+      display: none;
+    }
+
+    .ndw-date-selected > :first-child {
+      background-color: var(--ndw-color-secondary-400) !important;
+      color: var(--ndw-color-white) !important;
+    }
+
+    .ndw-date-range-start {
+      background-color: var(--ndw-color-secondary-200);
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    }
+
+    .ndw-date-range-end {
+      background-color: var(--ndw-color-secondary-200);
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+    }
+
+    .ndw-date-in-range {
+      background-color: var(--ndw-color-secondary-200);
+    }
+
+    .ndw-date-range-start-preview {
+      background-color: var(--ndw-color-secondary-100);
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    }
+
+    .ndw-date-range-end-preview {
+      background-color: var(--ndw-color-secondary-100);
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+    }
+
+    .ndw-date-in-range-preview {
+      background-color: var(--ndw-color-secondary-100);
+    }
+
+    // Add a dot below dates with the ndw-date-indicator class
+    .ndw-date-indicator > :first-child {
+      &::after {
+        content: '';
+        background: var(--ndw-color-primary);
+        position: absolute;
+        bottom: 2px;
+        left: calc(50% - 4px);
+        width: 8px;
+        height: 8px;
+        box-sizing: border-box;
+        border-radius: 4px;
+      }
+    }
+
+    // Disable the month view when in 'month' mode
+    &.month-picker {
+      .mat-calendar-period-button {
+        pointer-events: none;
+      }
+
+      .mat-calendar-arrow {
+        display: none;
+      }
+    }
+  }
+}
+
+ndw-calendar.show-week-numbers {
+  --week-number-size: 16px;
+
+  padding-left: 1rem;
+
+  .mat-calendar-body {
+    min-height: calc(6 * var(--mat-datepicker-calendar-date-state-layer-height, 42px));
+    vertical-align: top;
+  }
+
+  thead {
+    tr::before {
+      content: '';
+      width: var(--week-number-size);
+    }
+  }
+
+  tbody {
+    tr[data-week-number] {
+      position: relative;
+    }
+
+    // Display week numbers in the calendar
+    tr[data-week-number]::before {
+      content: attr(data-week-number);
+      position: absolute;
+      top: calc(50% - 9px);
+      left: calc(-1 * var(--week-number-size));
+      height: 8px;
+      font-size: var(--ndw-font-size-sm);
+      color: var(--ndw-color-grey-400);
+    }
+  }
+}

package/styles/components/_divider.scss

@@ -1,10 +1,10 @@
-hr[ndwDivider] {
-  background-color: var(--ndw-color-grey-200);
-  border: none;
-  height: var(--ndw-border-size-sm);
-  margin: var(--ndw-spacing-xs) 0;
-
-  &[noMargin] {
-    margin-block: 0;
-  }
-}
+hr[ndwDivider] {
+  background-color: var(--ndw-color-grey-200);
+  border: none;
+  height: var(--ndw-border-size-sm);
+  margin: var(--ndw-spacing-xs) 0;
+
+  &[noMargin] {
+    margin-block: 0;
+  }
+}

package/styles/components/_dropdown.scss

@@ -1,8 +1,8 @@
-@keyframes show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/styles/components/_edit-bar.scss

@@ -1,97 +1,97 @@
-@use '../../styles/base/variables';
-
-$min-width-sm: variables.$ndw-screen-sm + 0.1;
-
-.ndw-edit-bar {
-  --left-position: 0;
-
-  display: block;
-  z-index: 2;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  padding: var(--ndw-spacing-md);
-  border-block-start: 1px solid var(--ndw-color-grey-300);
-
-  background-color: var(--ndw-color-white);
-
-  &.ndw-edit-bar--fixed {
-    position: fixed;
-    left: var(--left-position);
-
-    @media screen and (min-width: $min-width-sm) {
-      [data-main-navigation-expanded='true'] & {
-        --left-position: calc(var(--main-navigation-expanded-width) + var(--ndw-border-size-sm));
-      }
-
-      [data-main-navigation-expanded='false'] & {
-        --left-position: var(--main-navigation-collapse-width);
-      }
-    }
-  }
-
-  &.ndw-edit-bar--full-width {
-    left: 0;
-    right: 0;
-  }
-
-  &.ndw-edit-bar--layout-width {
-    right: 0;
-  }
-
-  &.ndw-edit-bar--sticky {
-    position: sticky;
-  }
-
-  &.ndw-edit-bar--static {
-    position: static;
-  }
-
-  &.ndw-edit-bar--absolute {
-    position: absolute;
-  }
-
-  &.ndw-edit-bar--grid {
-    padding-inline: 0;
-  }
-
-  &__inner {
-    gap: var(--ndw-spacing-xs);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .ndw-grid {
-    box-sizing: border-box;
-  }
-}
-
-.ndw-edit-bar-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ndw-spacing-xs);
-  width: 100%;
-
-  > * {
-    flex: 1;
-    white-space: nowrap;
-  }
-
-  @media screen and (min-width: variables.$ndw-screen-xs) {
-    width: max-content;
-    margin-left: auto;
-
-    > * {
-      flex: unset;
-    }
-  }
-}
-
-.ndw-edit-bar-message {
-  display: block;
-  font-size: var(--ndw-font-size-sm);
-  color: var(--ndw-color-grey-700);
-}
+@use '../../styles/base/variables';
+
+$min-width-sm: variables.$ndw-screen-sm + 0.1;
+
+.ndw-edit-bar {
+  --left-position: 0;
+
+  display: block;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  padding: var(--ndw-spacing-md);
+  border-block-start: 1px solid var(--ndw-color-grey-300);
+
+  background-color: var(--ndw-color-white);
+
+  &.ndw-edit-bar--fixed {
+    position: fixed;
+    left: var(--left-position);
+
+    @media screen and (min-width: $min-width-sm) {
+      [data-main-navigation-expanded='true'] & {
+        --left-position: calc(var(--main-navigation-expanded-width) + var(--ndw-border-size-sm));
+      }
+
+      [data-main-navigation-expanded='false'] & {
+        --left-position: var(--main-navigation-collapse-width);
+      }
+    }
+  }
+
+  &.ndw-edit-bar--full-width {
+    left: 0;
+    right: 0;
+  }
+
+  &.ndw-edit-bar--layout-width {
+    right: 0;
+  }
+
+  &.ndw-edit-bar--sticky {
+    position: sticky;
+  }
+
+  &.ndw-edit-bar--static {
+    position: static;
+  }
+
+  &.ndw-edit-bar--absolute {
+    position: absolute;
+  }
+
+  &.ndw-edit-bar--grid {
+    padding-inline: 0;
+  }
+
+  &__inner {
+    gap: var(--ndw-spacing-xs);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .ndw-grid {
+    box-sizing: border-box;
+  }
+}
+
+.ndw-edit-bar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+  width: 100%;
+
+  > * {
+    flex: 1;
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: variables.$ndw-screen-xs) {
+    width: max-content;
+    margin-left: auto;
+
+    > * {
+      flex: unset;
+    }
+  }
+}
+
+.ndw-edit-bar-message {
+  display: block;
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-700);
+}

package/styles/components/_filter-button.scss

@@ -1,39 +1,39 @@
-[ndwButton] {
-  &[filter] {
-    background-color: var(--ndw-color-white);
-    border-color: var(--ndw-color-grey-300);
-    color: var(--ndw-color-grey-700);
-    height: var(--ndw-spacing-2xl);
-
-    ndw-icon.button-icon {
-      color: var(--ndw-color-primary);
-    }
-
-    ndw-icon.prefix-icon {
-      color: var(--ndw-color-grey-300);
-    }
-
-    &:hover {
-      border-color: var(--ndw-color-primary);
-    }
-
-    &:active,
-    &:focus,
-    &:focus-visible {
-      border-color: var(--ndw-color-info-500);
-      box-shadow: var(--ndw-elevation-info);
-      outline-color: var(--ndw-color-info-500);
-    }
-
-    &[disabled] {
-      background-color: var(--ndw-color-grey-100);
-      color: var(--ndw-color-grey-500);
-      pointer-events: none;
-      user-select: none;
-
-      ndw-icon {
-        color: var(--ndw-color-grey-500);
-      }
-    }
-  }
-}
+[ndwButton] {
+  &[filter] {
+    background-color: var(--ndw-color-white);
+    border-color: var(--ndw-color-grey-300);
+    color: var(--ndw-color-grey-700);
+    height: var(--ndw-spacing-2xl);
+
+    ndw-icon.button-icon {
+      color: var(--ndw-color-primary);
+    }
+
+    ndw-icon.prefix-icon {
+      color: var(--ndw-color-grey-300);
+    }
+
+    &:hover {
+      border-color: var(--ndw-color-primary);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      border-color: var(--ndw-color-info-500);
+      box-shadow: var(--ndw-elevation-info);
+      outline-color: var(--ndw-color-info-500);
+    }
+
+    &[disabled] {
+      background-color: var(--ndw-color-grey-100);
+      color: var(--ndw-color-grey-500);
+      pointer-events: none;
+      user-select: none;
+
+      ndw-icon {
+        color: var(--ndw-color-grey-500);
+      }
+    }
+  }
+}