✨ limiting number of selections

gabriel-gn · Dec 27, 2021 · fd62a79 · fd62a79 · vercel · Dec 27, 2021
1 parent fbb3220
commit fd62a79
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/design-system/projects/lib/package.json b/design-system/projects/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mprisma/components",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "repository": {
     "type": "git",
     "url": "https://github.com/gabriel-gn/prisma-components.git"

diff --git a/design-system/projects/lib/src/components/inputs/multi-select/multi-select.component.html b/design-system/projects/lib/src/components/inputs/multi-select/multi-select.component.html
@@ -12,7 +12,7 @@
     <form>
       <input #inputBox
              #trigger="matAutocompleteTrigger"
-             [hidden]="_selectedOptions.length === options.length"
+             [hidden]="_selectedOptions.length === options.length || (!!limit && _selectedOptions.length >= limit)"
              matInput
              class="form-control h-100 border-0"
              type="text"

diff --git a/design-system/projects/lib/src/components/inputs/multi-select/multi-select.component.ts b/design-system/projects/lib/src/components/inputs/multi-select/multi-select.component.ts
@@ -40,11 +40,27 @@ export class MultiSelectComponent implements OnInit, AfterViewInit {
 
   @ViewChild('inputBox') inputBoxEl: ElementRef;
   @ViewChild('trigger') trigger: MatAutocompleteTrigger;
+  /**
+   * Ao ser selecionada uma opção nova, emite
+   */
   @Output() selectedOptions = new EventEmitter<MultiSelectOption[]>();
+  /**
+   * Texto a ser exibido no input
+   */
   @Input() placeholder: string = '';
+  /**
+   * opções a serem exibidas no input
+   */
   @Input() options: MultiSelectOption[] = [];
   @Input() borderRadius: Sizes = Sizes.md;
+  /**
+   * se as thumbnails serão arredondadas
+   */
   @Input() roundedThumbnail: boolean = true;
+  /**
+   * limite máximo de seleções de itens
+   */
+  @Input() limit: number = 0;
   myControl = new FormControl();
   _selectedOptions: MultiSelectOption[] = [];
   filteredOptions: Observable<MultiSelectOption[]>;

diff --git a/design-system/projects/lib/src/components/inputs/multi-select/multi-select.stories.ts b/design-system/projects/lib/src/components/inputs/multi-select/multi-select.stories.ts
@@ -16,6 +16,7 @@ export const Template: Story<MultiSelectComponent> = (args) => ({
         [placeholder]="placeholder"
         [borderRadius]="borderRadius"
         [roundedThumbnail]="roundedThumbnail"
+        [limit]="limit"
     >
     </pm-multi-select>
   `
@@ -25,7 +26,8 @@ export const defaultArgs = {
   options: [],
   placeholder: '',
   borderRadius: Sizes.md,
-  roundedThumbnail: true
+  roundedThumbnail: true,
+  limit: 0
 };
 
 export const DefaultMultiSelect = Template.bind({});