@wlcm/angular 1.1.2 → 17.1.0

package/styles/components/date-range-picker/_date-range-picker-body.scss

@@ -0,0 +1,117 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-date-range-picker-body {
+    display: grid;
+    align-items: flex-start;
+    grid-auto-flow: column;
+    grid-gap: 32px;
+
+    .mat-calendar {
+      width: 224px;
+      font-size: 16px;
+
+      &.wlcm-calendar-disabled {
+        opacity: 0.5;
+        position: relative;
+        pointer-events: none;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+
+    mat-year-view {
+      .mat-calendar-body-label {
+        display: none;
+      }
+    }
+
+    .mat-calendar-body-label {
+      opacity: 0;
+
+      &[colspan='7'] {
+        display: none;
+      }
+    }
+
+    .mat-calendar-content {
+      padding: 0 !important;
+      min-height: 220px;
+    }
+
+    .mat-calendar-table-header-divider {
+      display: none;
+    }
+
+    .mat-calendar-table-header th {
+      color: #a4a3a3;
+      font-size: 16px;
+    }
+
+    .mat-calendar-body-cell-content {
+      font-size: 16px;
+      border-radius: 8px;
+      color: map-get($theme, text-black-color);
+    }
+
+    .mat-calendar-body-selected {
+      background-color: map-get($theme, selected-option-color);
+    }
+
+    .mat-calendar-body-today {
+      border: none;
+      color: map-get($theme, primary-color);
+      font-family: map-get($theme, bold-font-family);
+    }
+
+    .mat-calendar-body-in-range {
+      &::before {
+        background: map-get($theme, selected-option-color);
+      }
+
+      .mat-calendar-body-cell-content {
+        color: map-get($theme, primary-color);
+      }
+    }
+
+    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
+      > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
+        .mat-calendar-body-comparison-identical
+      ) {
+      background: map-get($theme, selected-option-color);
+    }
+
+    .mat-calendar-body-in-preview {
+      .mat-calendar-body-cell-preview {
+        border: none;
+        background: map-get($theme, selected-option-color);
+      }
+    }
+
+    .mat-calendar-body-selected.mat-calendar-body-today {
+      box-shadow: none;
+    }
+  }
+
+  .wlcm-date-range-picker-body {
+    .cdk-program-focused
+      .mat-calendar-body-active
+      > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
+        .mat-calendar-body-comparison-identical
+      ) {
+      background-color: transparent;
+      border: 1px solid map-get($theme, primary-color);
+    }
+  }
+}

package/styles/components/date-range-picker/_date-range-picker-header.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 12px;
+
+    .wlcm-calendar-header-change-view-button {
+      display: grid;
+      align-items: center;
+      grid-auto-flow: column;
+      cursor: pointer;
+      background: none;
+      outline: none;
+      grid-gap: 8px;
+      border: none;
+      padding: 0;
+    }
+
+    .wlcm-calendar-header-period-label {
+      font-size: 16px;
+      line-height: 24px;
+      font-family: map-get($theme, bold-font-family);
+      color: map-get($theme, text-black-color);
+    }
+
+    .wlcm-calendar-header-button-container {
+      width: 24px;
+      height: 24px;
+    }
+
+    .wlcm-calendar-header-button {
+      width: 24px;
+      height: 24px;
+      border: none;
+      outline: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: map-get($theme, selected-option-color);
+      border-radius: 8px;
+      cursor: pointer;
+      padding: 0;
+
+      &-left {
+        transform: rotate(90deg);
+      }
+
+      &-right {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}

package/styles/components/date-range-picker/_date-range-picker-input.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-date-range-picker-input-field-wrapper {
+    position: relative;
+  }
+
+  .wlcm-date-range-picker-input-field {
+    width: 98px;
+    border: none;
+    outline: none;
+    height: 18px;
+    padding: 0;
+    font-family: map-get($theme, regular-font-family);
+    color: map-get($theme, field-text-color);
+    max-width: 120px;
+
+    &::placeholder {
+      color: map-get($theme, placeholder-color);
+    }
+  }
+
+  .wlcm-date-range-picker-input-field-mirror {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .wlcm-date-range-picker-input-dash {
+    width: 12px;
+    height: 1px;
+    margin: 0 4px;
+    background: map-get($theme, field-text-color);
+  }
+}

package/styles/components/date-range-picker/_date-range-picker-panel.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-date-range-picker-panel {
+    background: #ffffff;
+    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 12px;
+    padding: 16px;
+  }
+
+  .wlcm-date-range-picker-bottom-panel {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: flex-end;
+    align-items: center;
+    grid-gap: 24px;
+  }
+}

package/styles/components/date-range-picker/index.scss

@@ -0,0 +1,11 @@
+@use 'date-range-picker-input' as input;
+@use 'date-range-picker-panel' as panel;
+@use 'date-range-picker-header' as header;
+@use 'date-range-picker-body' as body;
+
+@mixin theme($theme-config) {
+  @include input.theme($theme-config);
+  @include panel.theme($theme-config);
+  @include header.theme($theme-config);
+  @include body.theme($theme-config);
+}

package/styles/components/forms/_form-field.scss

@@ -4,6 +4,10 @@
 @mixin theme($theme-config) {
   $theme: utils.using-theme($theme_config);
 
+  input {
+    color: map-get($theme, field-text-color);
+  }
+
   .wlcm-form-field {
     display: block;
 

package/styles/core/_all-theme.scss

@@ -5,6 +5,7 @@
 @use '../components/filters/index' as filters;
 @use '../components/button/index' as button;
 @use '../components/search-field/index' as searchField;
+@use '../components/date-range-picker/index' as dateRangePicker;
 
 @mixin all-component-themes($theme-config) {
   @include common.theme($theme-config);
@@ -12,4 +13,5 @@
   @include filters.theme($theme-config);
   @include button.theme($theme-config);
   @include searchField.theme($theme-config);
+  @include dateRangePicker.theme($theme-config);
 }

package/styles/core/_utils.scss

@@ -37,6 +37,7 @@
     accent-color: map-get($color-config, accent),
     warn-color: map-get($color-config, warn),
     // Specific Color
+    text-black-color: map-get($specific-color-config, text-black-color),
     field-outline-color: map-get($specific-color-config, field-outline-color),
     focus-field-outline-color:
       map-get($specific-color-config, focus-field-outline-color),
@@ -44,6 +45,7 @@
       map-get($specific-color-config, hover-field-outline-color),
     selected-option-color:
       map-get($specific-color-config, selected-option-color),
+    field-text-color: map-get($specific-color-config, field-text-color),
     placeholder-color: map-get($specific-color-config, placeholder-color),
     // Typography
     bold-font-family: get-bold-typography($typography-config),