mis-crystal-design-system 18.0.21-test-1 → 18.0.22-test-dynamic-theme

package/input/mis-input.component.scss

@@ -0,0 +1,180 @@
+@import "../styles/mis-color-constants.scss";
+
+.input-container {
+  position: relative;
+  padding-bottom: 24px;
+  &.mis-disabled {
+    .input-wrapper {
+      pointer-events: none !important;
+    }
+  }
+  .input-wrapper {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    transition: all ease-in 60ms;
+    background-color: var(--bg-primary);
+    padding: 3px 16px; // DONE CHANGE
+    gap: 16px;
+    .mis-input {
+      flex: 1 1 auto;
+      z-index: 0;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    input {
+      flex: 1 1 auto;
+      border: none;
+      outline: none;
+      height: 100%;
+      padding: 0;
+      font-family: Lato;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      height: 24px;
+      color: var(--text-primary);
+      background-color: transparent;
+      width: 100%;
+      vertical-align: middle;
+      &::placeholder {
+        transition: all ease-in 100ms;
+        opacity: 0;
+        transform-origin: left center;
+        color: transparent;
+      }
+    }
+    .mis-placeholder {
+      position: absolute;
+      font-family: Lato;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--text-secondary);
+      z-index: -1;
+      transition: all ease-in 150ms;
+    }
+
+    &:focus-within {
+      background-color: var(--bg-tertiary);
+    }
+    &:focus-within {
+      border: 1px solid $pmry_500;
+    }
+    [mis-input-act],
+    [mis-input-icon] {
+      width: 18px;
+      height: 18px;
+      color: var(--text-secondary);
+      font-size: 24px;
+      line-height: 18px;
+    }
+    [mis-input-act] {
+      cursor: pointer;
+    }
+  }
+  &.no-hint {
+    padding-bottom: 0px;
+  }
+  &.rounded {
+    input {
+      box-sizing: initial;
+    }
+    &.sm {
+      input {
+        padding: 3px 16px;
+      }
+    }
+    &.md {
+      input {
+        padding: 9px 16px;
+      }
+    }
+    &.lg {
+      input {
+        padding: 15px 16px;
+      }
+    }
+    .input-wrapper {
+      border-radius: 4px;
+      border: 1px solid var(--border-primary);
+      padding: 0;
+      // input:not(:disabled) {
+      //   &:hover,
+      //   &:focus {
+      //     background-color: #f5f5f5;
+      //   }
+      // }
+      &:hover {
+        background-color: var(--bg-tertiary);
+      }
+      &:focus-within {
+        border: 1px solid var(--brand-primary);
+      }
+      input:not(:placeholder-shown) + .mis-placeholder {
+        color: transparent !important;
+      }
+      .mis-placeholder {
+        margin-left: 16px;
+        transition-duration: 50ms;
+      }
+    }
+    &.has-error {
+      .input-wrapper {
+        border: 1px solid var(--brand-error) !important;
+      }
+    }
+  }
+  &.floating {
+    .input-wrapper {
+      padding-top: 24px;
+      padding-bottom: 7px; // DONE CHANGE
+      border-bottom: 1px solid var(--border-primary);
+      input:focus + .mis-placeholder {
+        color: var(--brand-primary) !important;
+      }
+      input:not(:placeholder-shown) + .mis-placeholder,
+      input:focus + .mis-placeholder {
+        transform: translateY(calc(-100% + 6px)) !important;
+        font-size: 12px !important;
+        letter-spacing: 0.2px !important;
+      }
+      &:focus-within {
+        border: none;
+        border-bottom: 1px solid var(--brand-primary);
+        input::placeholder {
+          color: var(--text-secondary);
+          opacity: 1;
+          font-size: 16px;
+        }
+      }
+    }
+    &.has-error {
+      .input-wrapper {
+        border-bottom: 1px solid var(--brand-error) !important;
+        .mis-placeholder {
+          color: var(--brand-error) !important;
+        }
+      }
+    }
+  }
+  [mis-input-hint],
+  [mis-input-error] {
+    position: absolute;
+    left: 0;
+    right: 0px;
+    bottom: 0px;
+    line-height: 24px;
+    height: 24px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    letter-spacing: 0.2px;
+  }
+  [mis-input-error] {
+    color: var(--brand-error);
+  }
+}

package/modal/modal.scss

@@ -0,0 +1,9 @@
+.mis-modal {
+  display: block;
+  overflow: auto;
+  padding: 8px;
+  // transition: all 300ms ease-out;
+}
+.mis-modal-overlay {
+  background: var(--bg-overlay);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "18.0.21-test-1",
+  "version": "18.0.22-test-dynamic-theme",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",
@@ -34,36 +34,36 @@
       "esm": "./esm2022/analytics/mis-crystal-design-system-analytics.mjs",
       "default": "./fesm2022/mis-crystal-design-system-analytics.mjs"
     },
-    "./async-search-dropdown": {
-      "types": "./async-search-dropdown/index.d.ts",
-      "esm2022": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
-      "esm": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
-      "default": "./fesm2022/mis-crystal-design-system-async-search-dropdown.mjs"
-    },
     "./button": {
       "types": "./button/index.d.ts",
       "esm2022": "./esm2022/button/mis-crystal-design-system-button.mjs",
       "esm": "./esm2022/button/mis-crystal-design-system-button.mjs",
       "default": "./fesm2022/mis-crystal-design-system-button.mjs"
     },
+    "./async-search-dropdown": {
+      "types": "./async-search-dropdown/index.d.ts",
+      "esm2022": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
+      "esm": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
+      "default": "./fesm2022/mis-crystal-design-system-async-search-dropdown.mjs"
+    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "esm2022": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
       "esm": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
       "default": "./fesm2022/mis-crystal-design-system-checkbox.mjs"
     },
-    "./datepicker_v2": {
-      "types": "./datepicker_v2/index.d.ts",
-      "esm2022": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
-      "esm": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
-      "default": "./fesm2022/mis-crystal-design-system-datepicker_v2.mjs"
-    },
     "./chip": {
       "types": "./chip/index.d.ts",
       "esm2022": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
       "esm": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
       "default": "./fesm2022/mis-crystal-design-system-chip.mjs"
     },
+    "./datepicker_v2": {
+      "types": "./datepicker_v2/index.d.ts",
+      "esm2022": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
+      "esm": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
+      "default": "./fesm2022/mis-crystal-design-system-datepicker_v2.mjs"
+    },
     "./daterangepicker_v2": {
       "types": "./daterangepicker_v2/index.d.ts",
       "esm2022": "./esm2022/daterangepicker_v2/mis-crystal-design-system-daterangepicker_v2.mjs",
@@ -88,6 +88,12 @@
       "esm": "./esm2022/dynamic-form/mis-crystal-design-system-dynamic-form.mjs",
       "default": "./fesm2022/mis-crystal-design-system-dynamic-form.mjs"
     },
+    "./dynamic-theme": {
+      "types": "./dynamic-theme/index.d.ts",
+      "esm2022": "./esm2022/dynamic-theme/mis-crystal-design-system-dynamic-theme.mjs",
+      "esm": "./esm2022/dynamic-theme/mis-crystal-design-system-dynamic-theme.mjs",
+      "default": "./fesm2022/mis-crystal-design-system-dynamic-theme.mjs"
+    },
     "./fab": {
       "types": "./fab/index.d.ts",
       "esm2022": "./esm2022/fab/mis-crystal-design-system-fab.mjs",