ms-design-system 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ms-design-system",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "style": "src/styles.scss",
   "dependencies": {
     "ng-inline-svg": "^13.1.1",

package/src/styles.scss

@@ -1582,9 +1582,9 @@ ms-button .ms-btn-default {
   }
 
   .ms-checkbox-box {
-    width: 14px;
-    height: 14px;
-    border: 2px solid #cbd5e1;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #CCCCCC;
     border-radius: 4px;
     display: grid;
     place-items: center;
@@ -1597,7 +1597,7 @@ ms-button .ms-btn-default {
     font-size: 13px !important;
         display: flex;
     align-items: center;
-    margin-top: -2px;
+    margin-top: -3px;
     // line-height: 1;
 //     width: 6.790122985839844px !important;
 // height: 5.5px;
@@ -1799,8 +1799,10 @@ ms-button .ms-btn-default {
   }
 
   &:hover:not(.disabled) .ms-toggle-track {
-    background: #0084FF1A; // light blue hover
-    background: var(--semantics-fill-status-info-secondary-disabled, #0084FF1A);
+    // background: #0084FF1A; // light blue hover
+    // background: var(--semantics-fill-status-info-secondary-disabled, #0084FF1A);
+    border: 0.91px solid var(--semantics-border-brand-default, #0084FF);
+
     
   }
   
@@ -1821,7 +1823,8 @@ ms-button .ms-btn-default {
     cursor: not-allowed;
     opacity: 0.6;
    .ms-toggle input:checked {
-  background: #0084FF; // darker blue on hover
+  // background: #0084FF; // darker blue on hover
+  background: var(--semantics-fill-status-info-secondary-disabled, #0084FF1A);
 }
 
     .ms-label {
@@ -1853,7 +1856,9 @@ ms-button .ms-btn-default {
 }
 
 .ms-toggle input:checked+.ms-toggle-track:hover {
-  background: #006fd6; // darker blue on hover
+  // background: #006fd6; // darker blue on hover
+    border: 0.91px solid var(--semantics-border-brand-default, #0084FF);
+
 }
 
 /* Focus State */
@@ -2007,7 +2012,7 @@ ms-button .ms-btn-default {
   }
    &.ms-error {
     border-color: #DA3E37;
-    background-color: #fbeaea;
+    // background-color: #fbeaea;
     box-shadow: 0px 0px 0px 1px #DA3E3740;
   }
 
@@ -2401,12 +2406,14 @@ font-size: 8px !important;
     white-space: nowrap;
     text-decoration: ellipsis;
     color: #292a2e;
+    font-weight: 500 !important;
     
 }
 .ms-label-secondory{
     white-space: nowrap;
     text-decoration: ellipsis;
     color: #6b6e76;
+    font-size: 12px !important;
 
 }
 
@@ -2551,7 +2558,7 @@ border-top-color: #F5F5F5;
   // Error state
   &.ms-error {
     border-color: #d9534f;
-    background-color: #fbeaea;
+    // background-color: #fbeaea;
     box-shadow: 0px 0px 0px 1px #DA3E3740;
   }
 

package/types/ms-design-system.d.ts

@@ -271,13 +271,17 @@ declare class MsInputField implements ControlValueAccessor {
     max?: number;
     maxlength?: number;
     minlength?: number;
-    step?: number | string;
+    step?: any | string;
     pattern?: string;
     inputmode?: 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';
     loading: boolean;
-    value: i0.WritableSignal<string>;
     hasError: i0.WritableSignal<boolean>;
     isSuccess: i0.WritableSignal<boolean>;
+    fieldType: any;
+    value: string;
+    minValue: any;
+    maxValue: any;
+    prefix: string;
     change: EventEmitter<Event>;
     focus: EventEmitter<Event>;
     blur: EventEmitter<Event>;
@@ -287,6 +291,10 @@ declare class MsInputField implements ControlValueAccessor {
     private onTouched;
     constructor(el: ElementRef);
     ngOnInit(): void;
+    increment(): void;
+    decrement(): void;
+    onInputChange(event: any): void;
+    getNumValue(): number;
     writeValue(val: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -294,7 +302,7 @@ declare class MsInputField implements ControlValueAccessor {
     handleInput(event: Event): void;
     handleBlur(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsInputField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsInputField, "ms-input-field", never, { "type": { "alias": "type"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "state": { "alias": "state"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "step": { "alias": "step"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsInputField, "ms-input-field", never, { "type": { "alias": "type"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "state": { "alias": "state"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "step": { "alias": "step"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fieldType": { "alias": "fieldType"; "required": false; }; "value": { "alias": "value"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class MsTextArea {
@@ -445,21 +453,20 @@ declare class MsPagination {
 interface SidebarItem {
     id: string;
     label: string;
-    count?: number;
-}
-interface SidebarSection {
-    title: string;
-    id: string;
-    icon: string;
-    items: SidebarItem[];
-    count?: number;
+    router: string;
 }
 declare const MS_SVG_PATH = "assets/ui-library/svg/";
 declare class MsSidebar {
+    id?: string;
+    search: boolean;
+    setting: boolean;
+    userDetail: boolean;
+    badge: boolean;
+    details: any;
+    select: EventEmitter<Event>;
+    searchText: string;
+    filteredMenuData: any[];
     isCollapsed: boolean;
-    openSections: {
-        [key: string]: boolean;
-    };
     flyoutSectionId: string | null;
     flyoutItems: SidebarItem[];
     flyoutTop: number;
@@ -475,17 +482,26 @@ declare class MsSidebar {
     private prevScrollTop;
     get userInitials(): string;
     getInitials(name: string): string;
-    menuData: SidebarSection[];
+    selectedSectionId: any;
+    ngOnInit(): void;
     toggleSidebar(): void;
-    toggleSection(id: string, event?: any): void;
-    selectItem(id: string): void;
+    toggleSection(item: any, event?: any): void;
+    selectItem(item: any, detail: any): void;
     toggleProfileFlyout(): void;
     viewProfile(): void;
     accountSettings(): void;
     documentation(): void;
     selectAccount(index: number): void;
+    filterMenu(): void;
+    rotate: {
+        [id: string]: boolean;
+    };
+    openSections: {
+        [id: string]: boolean;
+    };
+    rotating(data: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsSidebar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsSidebar, "ms-sidebar", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsSidebar, "ms-sidebar", never, { "id": { "alias": "id"; "required": false; }; "search": { "alias": "search"; "required": false; }; "setting": { "alias": "setting"; "required": false; }; "userDetail": { "alias": "userDetail"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "details": { "alias": "details"; "required": false; }; }, { "select": "select"; }, never, never, true, never>;
 }
 
 declare class MsSpinner {