@wlcm/angular 0.0.0

package/styles/components/forms/_select.scss

@@ -0,0 +1,74 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .mat-mdc-autocomplete-panel,
+  .mat-mdc-select-panel {
+    padding: 0 !important;
+    border: 1px solid map-get($theme, focus-field-outline-color);
+    border-radius: 4px !important;
+  }
+
+  // Select
+  .mat-mdc-select-panel {
+    margin-left: -1px !important;
+    box-shadow: none !important;
+  }
+
+  mat-select {
+    border: 1px solid map-get($theme, field-outline-color);
+    box-sizing: border-box;
+    border-radius: 4px;
+
+    &:hover {
+      border-color: map-get($theme, hover-field-outline-color);
+    }
+
+    &.focused {
+      border-color: map-get($theme, focus-field-outline-color);
+    }
+
+    &.ng-invalid.ng-touched {
+      border-color: map-get($theme, warn-color);
+    }
+
+    .mat-mdc-select-trigger {
+      height: 30px !important;
+      padding: 0 8px !important;
+
+      .mat-mdc-select-min-line {
+        font-size: 14px;
+        -webkit-font-smoothing: initial !important;
+        letter-spacing: 0.41px;
+
+        &.mat-mdc-select-placeholder {
+          color: map-get($theme, placeholder-color);
+        }
+      }
+    }
+  }
+
+  // Option
+  .mat-mdc-option {
+    height: 32px;
+    min-height: 32px !important;
+    padding: 0 8px !important;
+
+    &.mdc-list-item--selected {
+      background-color: map-get($theme, selected-option-color) !important;
+    }
+
+    .mdc-list-item__primary-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap !important;
+      font-family: map-get($theme, regular-font-family) !important;
+      -webkit-font-smoothing: initial !important;
+      font-size: 14px !important;
+      letter-spacing: 0.41px;
+      line-height: 24px;
+    }
+  }
+}

package/styles/components/forms/index.scss

@@ -0,0 +1,13 @@
+@use './error' as error;
+@use './label' as label;
+@use './select' as select;
+@use './checkbox' as checkbox;
+@use './form-field' as formField;
+
+@mixin theme($theme-config) {
+  @include label.theme($theme-config);
+  @include error.theme($theme-config);
+  @include select.theme($theme-config);
+  @include checkbox.theme($theme-config);
+  @include formField.theme($theme-config);
+}

package/styles/components/search-field/index.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-search-field {
+    height: 32px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    border: 1px solid map-get($theme, field-outline-color);
+    box-sizing: border-box;
+    border-radius: 4px;
+
+    &__input {
+      flex: 1;
+      border: none;
+      outline: none;
+      margin-left: 8px;
+      font-size: 14px;
+      color: #242424;
+      font-family: map-get($theme, regular-font-family);
+      letter-spacing: 0.41px;
+
+      &::placeholder {
+        color: map-get($theme, placeholder-color);
+      }
+    }
+  }
+}

package/styles/core/_all-theme.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use 'utils' as utils;
+@use '../components/common/index' as common;
+@use '../components/forms/index' as forms;
+@use '../components/filters/index' as filters;
+@use '../components/button/index' as button;
+@use '../components/search-field/index' as searchField;
+
+@mixin all-component-themes($theme-config) {
+  @include common.theme($theme-config);
+  @include forms.theme($theme-config);
+  @include filters.theme($theme-config);
+  @include button.theme($theme-config);
+  @include searchField.theme($theme-config);
+}

package/styles/core/_core.scss

@@ -0,0 +1,10 @@
+@mixin core() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+}

package/styles/core/_utils.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+
+@function get-color-config($theme-config) {
+  @return map-get($theme_config, color);
+}
+
+@function get-specific-color-config($theme-config) {
+  @return map-get($theme_config, specific-color);
+}
+
+@function get-typography-config($theme-config) {
+  @return map-get($theme_config, typography);
+}
+
+@function get-bold-typography($typography-config) {
+  @return map-get($typography-config, bold);
+}
+
+@function get-medium-typography($typography-config) {
+  @return map-get($typography-config, medium);
+}
+
+@function get-regular-typography($typography-config) {
+  @return map-get($typography-config, regular);
+}
+
+@function using-theme($theme-config) {
+  $color-config: get-color-config($theme_config);
+
+  $specific-color-config: get-specific-color-config($theme_config);
+
+  $typography-config: get-typography-config($theme_config);
+
+  @return (
+    // Color
+    primary-color: map-get($color-config, primary),
+    accent-color: map-get($color-config, accent),
+    warn-color: map-get($color-config, warn),
+    // Specific 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),
+    hover-field-outline-color:
+      map-get($specific-color-config, hover-field-outline-color),
+    selected-option-color:
+      map-get($specific-color-config, selected-option-color),
+    placeholder-color: map-get($specific-color-config, placeholder-color),
+    // Typography
+    bold-font-family: get-bold-typography($typography-config),
+    medium-font-family: get-medium-typography($typography-config),
+    regular-font-family: get-regular-typography($typography-config)
+  );
+}

package/styles/wlcm.scss

@@ -0,0 +1,3 @@
+@forward './core/core' show core;
+
+@forward './core/all-theme' show all-component-themes;