ms-design-system 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ms-design-system",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "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;

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

@@ -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 {