Merge changes made to master

src/components.d.ts

@@ -25,7 +25,7 @@ import { typeDate } from "./components/datepicker/datepicker";
 import { languages } from "./utils/languages";
 import { DaysList } from "./components/datepicker/datepicker-interface";
 import { stateSelect } from "./components/datepicker/datepicker-period/datepicker-period";
-import { activeMode } from "./components/dropdown/dropdown";
+import { activeMode, DropdownPostionType } from "./components/dropdown/dropdown";
 import { alignItems, breakpoint, direction, flexWrap, gap, justifyContent, margin, padding } from "./components/grid/grid-interface";
 import { IconSize, IconTheme, IconType as IconType1 } from "./components/icon/icon-interface";
 import { IllustrationType } from "./components/illustration/illustration-interface";
@@ -41,6 +41,7 @@ import { colorsVariants as colorsVariants1, loadingSize, LoadingSpinnerVariant a
 import { menuPosition } from "./components/menu/menu";
 import { avatarSize as avatarSize2 } from "./components/menu/menu-exibition/menu-exibition";
 import { sizes } from "./components/modal/modal";
+import { PaginationOptionsPositionType } from "./components/pagination/pagination";
 import { PaperElevation } from "./components/paper/paper-interface";
 import { progressBarColor, progressBarSize } from "./components/progress-bar/progress-bar";
 import { sidebarBackground, sidebarPosition, sidebarType } from "./components/sidebar/sidebar";
@@ -579,6 +580,10 @@ export namespace Components {
           * Open. Used to open/close the dropdown.
          */
         "open"?: boolean;
+        /**
+          * Used to set tooltip position
+         */
+        "position"?: DropdownPostionType;
         "toggle": () => Promise<void>;
     }
     interface BdsExpansionPanel {
@@ -843,6 +848,10 @@ export namespace Components {
           * Clear all chips
          */
         "clear": () => Promise<void>;
+        /**
+          * Passing true to display a counter of available size, it is necessary to pass another maxlength property.
+         */
+        "counterLength"?: boolean;
         /**
           * Add state danger on input, use for use feedback.
          */
@@ -895,6 +904,10 @@ export namespace Components {
           * label in input, with he the input size increases.
          */
         "label"?: string;
+        /**
+          * Set maximum length value for chips
+         */
+        "maxChipsLength"?: number;
         /**
           * Set maximum length value for the chip content
          */
@@ -1355,6 +1368,10 @@ export namespace Components {
         "active"?: boolean;
     }
     interface BdsPagination {
+        /**
+          * Set the placement of the options menu. Can be 'bottom' or 'top'.
+         */
+        "optionsPosition"?: PaginationOptionsPositionType;
         /**
           * Prop to recive the number of pages.
          */
@@ -1648,7 +1665,7 @@ export namespace Components {
         /**
           * Width, number to define sidebar width.
          */
-        "backgournd"?: sidebarBackground;
+        "background"?: sidebarBackground;
         /**
           * ; isOpen. Used to open sidebar.
          */
@@ -3284,6 +3301,10 @@ declare namespace LocalJSX {
           * Open. Used to open/close the dropdown.
          */
         "open"?: boolean;
+        /**
+          * Used to set tooltip position
+         */
+        "position"?: DropdownPostionType;
     }
     interface BdsExpansionPanel {
     }
@@ -3553,6 +3574,10 @@ declare namespace LocalJSX {
           * The chips on the component Should be passed this way: chips='["chip1", "chip2"]'
          */
         "chips"?: string[] | string;
+        /**
+          * Passing true to display a counter of available size, it is necessary to pass another maxlength property.
+         */
+        "counterLength"?: boolean;
         /**
           * Add state danger on input, use for use feedback.
          */
@@ -3597,6 +3622,10 @@ declare namespace LocalJSX {
           * label in input, with he the input size increases.
          */
         "label"?: string;
+        /**
+          * Set maximum length value for chips
+         */
+        "maxChipsLength"?: number;
         /**
           * Set maximum length value for the chip content
          */
@@ -4176,6 +4205,10 @@ declare namespace LocalJSX {
           * When de value of component change, the event are dispache.
          */
         "onBdsPaginationChange"?: (event: BdsPaginationCustomEvent<any>) => void;
+        /**
+          * Set the placement of the options menu. Can be 'bottom' or 'top'.
+         */
+        "optionsPosition"?: PaginationOptionsPositionType;
         /**
           * Prop to recive the number of pages.
          */
@@ -4509,7 +4542,7 @@ declare namespace LocalJSX {
         /**
           * Width, number to define sidebar width.
          */
-        "backgournd"?: sidebarBackground;
+        "background"?: sidebarBackground;
         /**
           * ; isOpen. Used to open sidebar.
          */

src/components/accordion/accordion.scss

@@ -1,3 +1,6 @@
+@import 'resets';
+@import 'mixins';
+
 .accordion_header {
   display: grid;
   grid-auto-flow: column;
@@ -76,9 +79,10 @@
   -webkit-transition: height 0.5s;
   -moz-transition: height 0.5s;
   transition: height 0.5s;
+  @include custom-scroll;
 
   &_isOpen {
-    overflow: visible;
+    overflow: overlay;
   }
 
   & .container {

src/components/accordion/accordion.tsx

@@ -49,6 +49,7 @@ export class AccordionGroup {
   async close() {
     this.accheaders?.close();
     this.accBodies?.close();
+    this.isOpen = false;
   }
 
   // Método interno

src/components/autocomplete/autocomplete-select-interface.ts

@@ -22,4 +22,4 @@ export interface AutocompleteSelectedChangeEventDetail {
 
 export type AutocompleteSelectType = 'text' | 'icon';
 
-export type AutocompleteOptionsPositionType = 'top' | 'bottom';
+export type AutocompleteOptionsPositionType = 'auto' | 'top' | 'bottom';

src/components/autocomplete/autocomplete.tsx

@@ -87,7 +87,7 @@ export class BdsAutocomplete {
   /**
    * Set the placement of the options menu. Can be 'bottom' or 'top'.
    */
-  @Prop() optionsPosition?: AutocompleteOptionsPositionType = 'bottom';
+  @Prop() optionsPosition?: AutocompleteOptionsPositionType = 'auto';
 
   /**
    * If true, the X icon will appear only when component is focused.
@@ -136,7 +136,12 @@ export class BdsAutocomplete {
     } else {
       this.iconDropElement.name = this.isOpen ? 'arrow-down' : 'arrow-up';
     }
-    if (isOpen) this.validatePositionDrop();
+    if (isOpen)
+      if (this.optionsPosition != 'auto') {
+        this.setDefaultPlacement(this.optionsPosition);
+      } else {
+        this.validatePositionDrop();
+      }
   }
 
   @Watch('selected')
@@ -187,7 +192,21 @@ export class BdsAutocomplete {
     }
 
     this.text = this.getText();
-    this.validatePositionDrop();
+    if (this.optionsPosition != 'auto') {
+      this.setDefaultPlacement(this.optionsPosition);
+    } else {
+      this.validatePositionDrop();
+    }
+  }
+
+  private setDefaultPlacement(value: AutocompleteOptionsPositionType) {
+    if (value == 'bottom') {
+      this.dropElement.classList.add('select__options--position-bottom');
+      this.iconDropElement.name = 'arrow-down';
+    } else {
+      this.dropElement.classList.add('select__options--position-top');
+      this.iconDropElement.name = 'arrow-up';
+    }
   }
 
   private validatePositionDrop() {

src/components/autocomplete/readme.md

@@ -16,7 +16,7 @@
 | `icon`             | `icon`                | used for add icon in input left. Uses the bds-icon component.                                                                                                                                                                                                                                 | `string`                         | `''`        |
 | `label`            | `label`               | label in input, with he the input size increases.                                                                                                                                                                                                                                             | `string`                         | `''`        |
 | `options`          | `options`             | The options of the select Should be passed this way: options='[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]' Options can also be passed as child by using bds-select-option component, but passing as a child you may have some compatibility problems with Angular. | `AutocompleteOption[] \| string` | `undefined` |
-| `optionsPosition`  | `options-position`    | Set the placement of the options menu. Can be 'bottom' or 'top'.                                                                                                                                                                                                                              | `"bottom" \| "top"`              | `'bottom'`  |
+| `optionsPosition`  | `options-position`    | Set the placement of the options menu. Can be 'bottom' or 'top'.                                                                                                                                                                                                                              | `"auto" \| "bottom" \| "top"`    | `'auto'`    |
 | `placeholder`      | `placeholder`         | Placeholder for native input element.                                                                                                                                                                                                                                                         | `string`                         | `''`        |
 | `searchOnlyTitle`  | `search-only-title`   | Search only the title property                                                                                                                                                                                                                                                                | `boolean`                        | `true`      |
 | `selected`         | --                    | the item selected.                                                                                                                                                                                                                                                                            | `HTMLBdsSelectOptionElement`     | `undefined` |

src/components/button/button.scss

@@ -69,6 +69,12 @@ $button-padding-left-right: 16px;
   -moz-transition: all 0.5s;
   transition: all 0.5s;
 
+
+  bds-loading-spinner {
+    max-height: 100%;
+    position: absolute;
+  }
+
   & * {
     pointer-events: none;
   }
@@ -84,6 +90,12 @@ $button-padding-left-right: 16px;
   &--size-standard {
     @include padding-button-top-bottom($button-size-standard, $height-standard);
 
+    bds-loading-spinner {
+      width: 32px;
+      height: 32px;
+      top: calc(50% - 16px);
+    }
+
     &--icon {
       @include padding-button-top-bottom($button-size-standard-icon, $height-standard);
     }
@@ -92,6 +104,11 @@ $button-padding-left-right: 16px;
   &--size-short {
     @include padding-button-top-bottom($button-size-short, $height-short);
 
+    bds-loading-spinner {
+      width: 16px;
+      height: 16px;
+      top: calc(50% - 8px);
+    }
     &--icon {
       @include padding-button-top-bottom($button-size-short-icon, $height-short);
     }
@@ -287,12 +304,6 @@ $button-padding-left-right: 16px;
     }
   }
 
-  bds-loading-spinner {
-    width: auto;
-    max-height: 100%;
-    position: absolute;
-  }
-
   .hide {
     cursor: not-allowed;
     opacity: 0;

src/components/button/button.tsx

@@ -78,7 +78,7 @@ export class Button {
   /**
    * 	If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost'
    */
-  @Prop() bdsLoadingColor?: colorsVariants = 'light';
+  @Prop() bdsLoadingColor?: colorsVariants = 'main';
 
   /**
    * Data test is the prop to specifically test the component action object.
@@ -132,10 +132,11 @@ export class Button {
   }
 
   renderLoadingSpinner(): HTMLBdsLoadingSpinnerElement {
+    const loadingColor = this.variant == 'primary' || this.variant == 'delete' ? 'light' : 'main';
     if (this.size === 'short') {
-      return <bds-loading-spinner size="extra-small" color={this.bdsLoadingColor}></bds-loading-spinner>;
+      return <bds-loading-spinner size="extra-small" color={loadingColor}></bds-loading-spinner>;
     } else {
-      return <bds-loading-spinner size="small" color={this.bdsLoadingColor}></bds-loading-spinner>;
+      return <bds-loading-spinner size="small" color={loadingColor}></bds-loading-spinner>;
     }
   }
 

src/components/button/readme.md

@@ -11,7 +11,7 @@
 | ------------------- | --------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------ |
 | `arrow`             | `arrow`               | The arrow button                                                                                  | `boolean`                                                                                                       | `false`      |
 | `bdsLoading`        | `bds-loading`         | If true, shows the loading spinner                                                                | `boolean`                                                                                                       | `false`      |
-| `bdsLoadingColor`   | `bds-loading-color`   | If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost'              | `"light" \| "main"`                                                                                             | `'light'`    |
+| `bdsLoadingColor`   | `bds-loading-color`   | If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost'              | `"light" \| "main"`                                                                                             | `'main'`     |
 | `bdsLoadingVariant` | `bds-loading-variant` | If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost'              | `"delete" \| "ghost" \| "primary" \| "secondary" \| "tertiary"`                                                 | `'primary'`  |
 | `dataTest`          | `data-test`           | Data test is the prop to specifically test the component action object.                           | `string`                                                                                                        | `null`       |
 | `disabled`          | `disabled`            | If true, the base button will be disabled.                                                        | `boolean`                                                                                                       | `false`      |

src/components/counter-text/readme.md

@@ -21,6 +21,7 @@
 ### Used by
 
  - [bds-input](../input)
+ - [bds-input-chips](../input-chips)
 
 ### Depends on
 
@@ -31,6 +32,7 @@
 graph TD;
   bds-counter-text --> bds-typo
   bds-input --> bds-counter-text
+  bds-input-chips --> bds-counter-text
   style bds-counter-text fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/dropdown/dropdown.scss

@@ -42,6 +42,10 @@
       left: 0;
     }
 
+    &__center {
+      left: calc(50% - 122px);
+    }
+
     &__right {
       right: 0;
     }

src/components/dropdown/dropdown.tsx

@@ -14,9 +14,19 @@ import {
 import { getScrollParent, positionAbsoluteElement } from '../../utils/position-element';
 
 export type activeMode = 'hover' | 'click';
-export type dropdownPosition = 'bottom' | 'right';
+export type dropVerticalPosition = 'bottom' | 'top';
+export type dropHorizontalPosition = 'left' | 'center' | 'right';
 export type subMenuState = 'close' | 'pending' | 'open';
 
+export type DropdownPostionType =
+  | 'auto'
+  | 'top-center'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'bottom-left';
+
 @Component({
   tag: 'bds-dropdown',
   styleUrl: 'dropdown.scss',
@@ -46,6 +56,11 @@ export class BdsDropdown implements ComponentInterface {
    */
   @Prop({ mutable: true, reflect: true }) public open?: boolean = false;
 
+  /**
+   * Used to set tooltip position
+   */
+  @Prop() position?: DropdownPostionType = 'auto';
+
   /**
    * bdsToggle. Event to return selected date value.
    */
@@ -65,7 +80,17 @@ export class BdsDropdown implements ComponentInterface {
   }
 
   componentDidLoad() {
-    this.validatePositionDrop();
+    if (this.position != 'auto') {
+      this.setDefaultPlacement(this.position);
+    } else {
+      this.validatePositionDrop();
+    }
+  }
+
+  private setDefaultPlacement(value: DropdownPostionType) {
+    const arrayPosition = value.split('-');
+    this.dropElement.classList.add(`dropdown__basic__${arrayPosition[0]}`);
+    this.dropElement.classList.add(`dropdown__basic__${arrayPosition[1]}`);
   }
 
   private validatePositionDrop() {
@@ -85,7 +110,12 @@ export class BdsDropdown implements ComponentInterface {
 
   @Watch('open')
   protected isOpenChanged(open: boolean): void {
-    if (open) this.validatePositionDrop();
+    if (open)
+      if (this.position != 'auto') {
+        this.setDefaultPlacement(this.position);
+      } else {
+        this.validatePositionDrop();
+      }
   }
 
   @Method()