mis-crystal-design-system 18.1.10-test → 18.1.10-test-2

package/filter/filter-panel/filter-panel.component.d.ts

@@ -54,6 +54,7 @@ export declare class FilterPanelComponent implements OnInit, OnDestroy {
     private hasConfigChanged;
     closePanel(): void;
     applyFilters(): void;
+    private mapValuesForEmission;
     resetFilters(): void;
     handleSelect(event: any, filterKey: string, filter: FilterPanelConfig): void;
     handleCheckbox(event: any, filterKey: string, checkboxValue: string, filter: FilterPanelConfig): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "18.1.10-test",
+  "version": "18.1.10-test-2",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",
@@ -34,18 +34,18 @@
       "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",

package/table/table.component.d.ts

@@ -30,6 +30,19 @@ export declare class TableComponent implements OnInit, AfterViewInit, OnChanges
     tableLength: import("@angular/core").WritableSignal<number>;
     selectedPage: import("@angular/core").WritableSignal<number>;
     private isInternalPageUpdate;
+    /**
+     * LEGACY CODE WORKAROUND: Track user-initiated page selections to prevent config overwrites.
+     *
+     * Some legacy parent components don't update tableConfig.paginationConfig.selectedPage when
+     * the page changes. This causes the effect to overwrite user selections with stale config values.
+     *
+     * IDEAL SOLUTION: Parent components should always update config.selectedPage in their
+     * pageSelected event handler. This workaround protects user actions until legacy code
+     * can be updated.
+     *
+     * TODO: Remove this workaround once all parent components properly update config.selectedPage
+     */
+    private userSelectedPage;
     pageSelected: import("@angular/core").OutputEmitterRef<number>;
     pageSizeChanged: import("@angular/core").OutputEmitterRef<number>;
     pageSizeOptions: import("@angular/core").Signal<{

package/button/button.directive.scss

@@ -1,71 +0,0 @@
-@import '../styles/mis-color-constants.scss';
-
-.mis-btn {
-  background: none;
-  outline: none;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-  vertical-align: middle;
-  text-align: center;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  justify-content: center;
-
-  span,
-  img {
-    margin-right: 8px;
-  }
-
-  padding: 10px 16px;
-  font-size: 16px;
-  line-height: 24px;
-  &.mis-btn-lg {
-    padding: 16px;
-    font-weight: bold;
-  }
-  &.mis-btn-sm {
-    padding: 6px 12px;
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  background-color: transparent;
-  color: var(--brand-primary, $pmry_500);
-  &:hover {
-    background-color: var(--brand-primary-hover, $tr_hover);
-  }
-  &:focus {
-    background-color: var(--brand-primary-active, $tr_pressed);
-  }
-  &:disabled {
-    color: var(--text-tertiary, $text-disabled);
-    pointer-events: none;
-  }
-
-  &.mis-outline {
-    border: 1px solid var(--brand-primary, $pmry_500);
-
-    &:disabled {
-      color: var(--text-tertiary, $text-disabled);
-      border-color: var(--text-tertiary, $text-disabled);
-    }
-  }
-
-  &.mis-primary {
-    background-color: var(--brand-primary, $pmry_500);
-    color: var(--bg-primary, $text_white);
-    &:hover {
-      background-color: var(--brand-primary-dark, $pmry_600);
-    }
-    &:focus {
-      background-color: var(--brand-primary-darker, $pmry_700);
-    }
-    &:disabled {
-      background-color: var(--border-primary, $grey_seperators);
-      color: var(--text-tertiary, $text-disabled);
-    }
-  }
-}

package/drawer/drawer.scss

@@ -1,20 +0,0 @@
-.mis-drawer {
-  display: block;
-  transition: all 300ms ease-out;
-}
-.mis-drawer-overlay {
-  background: var(--bg-overlay-light, rgba(0, 0, 0, 0.12));
-}
-mis-datepicker-container {
-  z-index: 2100;
-}
-
-mis-loader {
-  z-index: 3000;
-}
-
-@keyframes slideOut {
-  to {
-    transform: translateX(100%);
-  }
-}

package/input/mis-input.component.scss

@@ -1,195 +0,0 @@
-@import "../styles/mis-color-constants.scss";
-
-.input-container {
-  position: relative;
-  padding-bottom: 24px;
-  &.mis-disabled {
-    .input-wrapper {
-      pointer-events: none !important;
-    }
-  }
-  // Only hide native placeholder when we're using a custom one
-  &.has-custom-placeholder .input-wrapper input::placeholder {
-    transition: all ease-in 100ms;
-    opacity: 0;
-    transform-origin: left center;
-    color: transparent;
-  }
-  .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, $text_white);
-    padding: 3px 16px; // DONE CHANGE
-    gap: 16px;
-    .mis-input {
-      flex: 1 1 auto;
-      z-index: 0; // Ensures a new stacking context
-      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, $text_black);
-      background-color: transparent;
-      width: 100%;
-      vertical-align: middle;
-      position: relative;
-    }
-    .mis-placeholder {
-      position: absolute;
-      font-family: Lato;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: var(--text-secondary, $text_muted);
-      transition: all ease-in 150ms;
-      pointer-events: none;
-    }
-
-    &:focus-within {
-      background-color: var(--bg-tertiary, $grey_bg);
-    }
-    &:focus-within {
-      border: 1px solid $pmry_500;
-    }
-    [mis-input-act],
-    [mis-input-icon] {
-      width: 18px;
-      height: 18px;
-      color: var(--text-secondary, $text_muted);
-      font-size: 24px;
-      line-height: 18px;
-    }
-    [mis-input-act] {
-      cursor: pointer;
-    }
-  }
-  &.no-hint {
-    padding-bottom: 0px;
-  }
-  // Hide custom placeholder when input has value (using CSS :placeholder-shown)
-  // This works without JavaScript listeners - pure CSS solution
-  &.has-custom-placeholder {
-    input:not(:placeholder-shown) + .mis-placeholder {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-  
-  // For inputs with FormControl, also use has-value class as fallback
-  &.has-value {
-    .mis-input .mis-placeholder {
-      color: transparent !important;
-    }
-  }
-
-  &.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, $grey_seperators);
-      padding: 0;
-      // input:not(:disabled) {
-      //   &:hover,
-      //   &:focus {
-      //     background-color: $grey_bg;
-      //   }
-      // }
-      &:hover {
-        background-color: var(--bg-tertiary, $grey_bg);
-      }
-      &:focus-within {
-        border: 1px solid var(--brand-primary, $pmry_500);
-      }
-      .mis-placeholder {
-        margin-left: 16px;
-        transition-duration: 50ms;
-      }
-    }
-    &.has-error {
-      .input-wrapper {
-        border: 1px solid var(--brand-error, $sem_error) !important;
-      }
-    }
-  }
-  &.floating {
-    .input-wrapper {
-      padding-top: 24px;
-      padding-bottom: 7px; // DONE CHANGE
-      border-bottom: 1px solid var(--border-primary, $grey_seperators);
-      input:focus + .mis-placeholder {
-        color: var(--brand-primary, $pmry_500) !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, $pmry_500);
-        input::placeholder {
-          color: var(--text-secondary, $text_muted);
-          opacity: 1;
-          font-size: 16px;
-        }
-      }
-    }
-    &.has-error {
-      .input-wrapper {
-        border-bottom: 1px solid var(--brand-error, $sem_error) !important;
-        .mis-placeholder {
-          color: var(--brand-error, $sem_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, $text_muted);
-    letter-spacing: 0.2px;
-  }
-  [mis-input-error] {
-    color: var(--brand-error, $sem_error);
-  }
-}

package/modal/modal.scss

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