diff --git a/src/components.d.ts b/src/components.d.ts index ac685b97..cc3eafd4 100644 --- a/src/components.d.ts +++ b/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"; @@ -580,6 +580,10 @@ export namespace Components { * Open. Used to open/close the dropdown. */ "open"?: boolean; + /** + * Used to set tooltip position + */ + "position"?: DropdownPostionType; "toggle": () => Promise; } interface BdsExpansionPanel { @@ -3273,6 +3277,10 @@ declare namespace LocalJSX { * Open. Used to open/close the dropdown. */ "open"?: boolean; + /** + * Used to set tooltip position + */ + "position"?: DropdownPostionType; } interface BdsExpansionPanel { } diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 605f930a..1b569dc5 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -42,6 +42,10 @@ left: 0; } + &__center { + left: calc(50% - 122px); + } + &__right { right: 0; } diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index dd2ee452..9a1be823 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/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() diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md index 0b2d618d..625e6aab 100644 --- a/src/components/dropdown/readme.md +++ b/src/components/dropdown/readme.md @@ -7,10 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------ | ------------- | -------------------------------------- | -------------------- | --------- | -| `activeMode` | `active-mode` | Open. Used to open/close the dropdown. | `"click" \| "hover"` | `'click'` | -| `open` | `open` | Open. Used to open/close the dropdown. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------- | --------- | +| `activeMode` | `active-mode` | Open. Used to open/close the dropdown. | `"click" \| "hover"` | `'click'` | +| `open` | `open` | Open. Used to open/close the dropdown. | `boolean` | `false` | +| `position` | `position` | Used to set tooltip position | `"auto" \| "bottom-center" \| "bottom-left" \| "bottom-right" \| "top-center" \| "top-left" \| "top-right"` | `'auto'` | ## Events