ms-design-system 0.0.28 → 0.0.30

package/package.json

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

package/src/styles.scss

@@ -1595,6 +1595,9 @@ ms-button .ms-btn-default {
   .ms-checkmark {
     color: #FFFFFF;
     font-size: 13px !important;
+        display: flex;
+    align-items: center;
+    margin-top: -2px;
     // line-height: 1;
 //     width: 6.790122985839844px !important;
 // height: 5.5px;
@@ -1796,25 +1799,30 @@ ms-button .ms-btn-default {
   }
 
   &:hover:not(.disabled) .ms-toggle-track {
-    background: #1F242826; // light blue hover
+    background: #0084FF1A; // light blue hover
+    background: var(--semantics-fill-status-info-secondary-disabled, #0084FF1A);
+    
   }
-
+  
   .ms-radio-circle:focus {
     // outline: 2px solid #B7DCFF;
     box-shadow: 0px 0px 0px 0.91px var(--primitivesbrandblue-100);
     border: 0.91px solid var(--semantics-border-brand-default, #0084FF);
     outline-offset: 2px;
   }
-
+  
   &.invalid {
     .ms-toggle-track {
       border: 1px solid red;
     }
   }
-
+  
   &.disabled {
     cursor: not-allowed;
     opacity: 0.6;
+   .ms-toggle input:checked {
+  background: #0084FF; // darker blue on hover
+}
 
     .ms-label {
       color: #999;

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, ChangeDetectorRef, EnvironmentProviders } from '@angular/core';
+import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, ChangeDetectorRef, ViewContainerRef, ComponentFactoryResolver, EnvironmentProviders } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as i1 from 'ng-inline-svg';
 
@@ -52,7 +52,6 @@ declare class MsDropdown {
     text: string;
     size: string;
     variant: string;
-    radiussize: string;
     isDisabled: boolean;
     set items(value: DropdownItem[]);
     icon?: string;
@@ -63,22 +62,15 @@ declare class MsDropdown {
     btnMaxWidth: string;
     closeOnSelect: boolean;
     closeOnClickOutside: boolean;
-    autoClose: boolean;
     selectedItem?: string;
+    showSelected: boolean;
     allowMultiple: boolean;
-    showDivider: boolean;
-    dividerStyle: string;
-    dividerColor: string;
-    itemSpacing: string;
-    shadow: string;
-    backgroundColor: string;
     textColor: string;
     maxHeight: string;
     scrollable: boolean;
     loading: boolean;
     error: boolean;
     ariaLabel: string;
-    role: string;
     searchable: boolean;
     searchPlaceholder: string;
     noResultsText: string;
@@ -90,10 +82,14 @@ declare class MsDropdown {
     showFlagImage: boolean;
     multiSelectDisplay: 'count' | 'text' | 'count+text' | 'tags' | 'none';
     showTags: boolean;
-    btnHeight: string;
-    hoverColor: string;
-    hoverTextColor: string;
+    inputPlaceholder: string;
+    inputLabel: string;
+    inputErrorState: boolean;
+    inputWarningState: boolean;
+    inputFocusState: boolean;
+    required: boolean;
     selectionChange: EventEmitter<DropdownItem | DropdownItem[]>;
+    validationTouched: boolean;
     selectedValues: Set<any>;
     selectedItems: DropdownItem[];
     selectedItemObj?: DropdownItem;
@@ -103,12 +99,19 @@ declare class MsDropdown {
     isOpen: boolean;
     searchTerm: string;
     onTriggerClick(): void;
+    tagInput: ElementRef<HTMLInputElement>;
+    isFocused: boolean;
+    hasError: boolean;
+    disabled: boolean;
+    focusInput(): void;
     toggleDropdown(): void;
     private cloneItems;
     selectItem(item: DropdownItem): void;
     toggleMultiSelect(item: DropdownItem): void;
     private selectSingle;
     get filteredItems(): DropdownItem[];
+    isSelectionRequired(): boolean;
+    onBlur(): void;
     removeTag(item: DropdownItem, event: MouseEvent): void;
     onDocumentClick(event: MouseEvent): void;
     maxVisibleTags: number;
@@ -119,7 +122,7 @@ declare class MsDropdown {
     toggleHiddenTags(): void;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsDropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "items": { "alias": "items"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "btnWidth": { "alias": "btnWidth"; "required": false; }; "btnMinWidth": { "alias": "btnMinWidth"; "required": false; }; "btnMaxWidth": { "alias": "btnMaxWidth"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "autoClose": { "alias": "autoClose"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; "dividerStyle": { "alias": "dividerStyle"; "required": false; }; "dividerColor": { "alias": "dividerColor"; "required": false; }; "itemSpacing": { "alias": "itemSpacing"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "role": { "alias": "role"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "dropdownMenuClass": { "alias": "dropdownMenuClass"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "dropdownMenuWidth": { "alias": "dropdownMenuWidth"; "required": false; }; "showFlagImage": { "alias": "showFlagImage"; "required": false; }; "multiSelectDisplay": { "alias": "multiSelectDisplay"; "required": false; }; "showTags": { "alias": "showTags"; "required": false; }; "btnHeight": { "alias": "btnHeight"; "required": false; }; "hoverColor": { "alias": "hoverColor"; "required": false; }; "hoverTextColor": { "alias": "hoverTextColor"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "items": { "alias": "items"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "btnWidth": { "alias": "btnWidth"; "required": false; }; "btnMinWidth": { "alias": "btnMinWidth"; "required": false; }; "btnMaxWidth": { "alias": "btnMaxWidth"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "showSelected": { "alias": "showSelected"; "required": false; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "dropdownMenuClass": { "alias": "dropdownMenuClass"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "dropdownMenuWidth": { "alias": "dropdownMenuWidth"; "required": false; }; "showFlagImage": { "alias": "showFlagImage"; "required": false; }; "multiSelectDisplay": { "alias": "multiSelectDisplay"; "required": false; }; "showTags": { "alias": "showTags"; "required": false; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; }; "inputLabel": { "alias": "inputLabel"; "required": false; }; "inputErrorState": { "alias": "inputErrorState"; "required": false; }; "inputWarningState": { "alias": "inputWarningState"; "required": false; }; "inputFocusState": { "alias": "inputFocusState"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 declare class MsCheckbox implements ControlValueAccessor, Validator {
@@ -313,6 +316,7 @@ declare class MsTextArea {
     resize: 'none' | 'both' | 'horizontal' | 'vertical';
     scrollable: boolean;
     showResizeIcon: boolean;
+    state?: string;
     isDisabled: boolean;
     showFormatOptions: boolean;
     maxWidth: number;
@@ -367,7 +371,7 @@ declare class MsTextArea {
     closeImageDropdown(): void;
     insertImage(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsTextArea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsTextArea, "ms-text-area", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "ms_rows": { "alias": "ms_rows"; "required": false; }; "ms_cols": { "alias": "ms_cols"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "showResizeIcon": { "alias": "showResizeIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "showFormatOptions": { "alias": "showFormatOptions"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsTextArea, "ms-text-area", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "ms_rows": { "alias": "ms_rows"; "required": false; }; "ms_cols": { "alias": "ms_cols"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "showResizeIcon": { "alias": "showResizeIcon"; "required": false; }; "state": { "alias": "state"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "showFormatOptions": { "alias": "showFormatOptions"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class MsAvatar {
@@ -498,9 +502,16 @@ declare class MsSpinner {
     static ɵcmp: i0.ɵɵComponentDeclaration<MsSpinner, "ms-spinner", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
 }
 
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 declare class MsTooltip {
+    text: string;
+    position: TooltipPosition;
+    bgColor: string;
+    showArrow: boolean;
+    get title(): string;
+    get paragraphLines(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<MsTooltip, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsTooltip, "ms-tooltip", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsTooltip, "ms-tooltip", never, { "text": { "alias": "text"; "required": false; }; "position": { "alias": "position"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "showArrow": { "alias": "showArrow"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class MsFileUploader {
@@ -545,12 +556,29 @@ declare class MsFileUploader {
     static ɵcmp: i0.ɵɵComponentDeclaration<MsFileUploader, "ms-file-uploader", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+declare class MsTooltipDirective {
+    private el;
+    private vcr;
+    private cfr;
+    msTooltip: string;
+    position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    bgColor: string;
+    showArrow: boolean;
+    private tooltipRef;
+    constructor(el: ElementRef, vcr: ViewContainerRef, cfr: ComponentFactoryResolver);
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MsTooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MsTooltipDirective, "[msTooltip]", never, { "msTooltip": { "alias": "msTooltip"; "required": false; }; "position": { "alias": "position"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "showArrow": { "alias": "showArrow"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class MsDesignSystemModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MsDesignSystemModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner, typeof MsFileUploader], [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner, typeof MsFileUploader]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner, typeof MsFileUploader, typeof MsTooltipDirective], [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner, typeof MsFileUploader]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MsDesignSystemModule>;
 }
 
 declare function provideMsDesignSystem(): EnvironmentProviders;
 
-export { MS_SVG_PATH, MsAvatar, MsBadge, MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, MsFileUploader, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTextArea, MsToggle, MsTooltip, provideMsDesignSystem };
+export { MS_SVG_PATH, MsAvatar, MsBadge, MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, MsFileUploader, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTextArea, MsToggle, MsTooltip, MsTooltipDirective, provideMsDesignSystem };
+export type { TooltipPosition };