diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts index 44efad07..a5714f91 100644 --- a/packages/core-components/src/components.d.ts +++ b/packages/core-components/src/components.d.ts @@ -683,7 +683,7 @@ export namespace Components { /** * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */ - "optionsList": string[]; + "optionsList": string | string[]; /** * The placeholder shown in the input field. */ @@ -699,7 +699,7 @@ export namespace Components { /** * The initial values to be selected in the dropdown. */ - "selectedValues": string[]; + "selectedValues": string | string[]; } interface B2bMultiselectOption { "indeterminate"?: boolean; @@ -3019,7 +3019,7 @@ declare namespace LocalJSX { /** * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */ - "optionsList"?: string[]; + "optionsList"?: string | string[]; /** * The placeholder shown in the input field. */ @@ -3035,7 +3035,7 @@ declare namespace LocalJSX { /** * The initial values to be selected in the dropdown. */ - "selectedValues"?: string[]; + "selectedValues"?: string | string[]; } interface B2bMultiselectOption { "indeterminate"?: boolean; diff --git a/packages/core-components/src/components/date-picker/date-picker-days.scss b/packages/core-components/src/components/date-picker/date-picker-days.scss index ab2a932d..b6db1a1c 100644 --- a/packages/core-components/src/components/date-picker/date-picker-days.scss +++ b/packages/core-components/src/components/date-picker/date-picker-days.scss @@ -44,7 +44,6 @@ color: var(--b2b-color-white-100); pointer-events: none; width: 100%; - height: 100%; } &--focussed { diff --git a/packages/core-components/src/components/date-picker/date-picker.scss b/packages/core-components/src/components/date-picker/date-picker.scss index 115d111c..42f9f230 100644 --- a/packages/core-components/src/components/date-picker/date-picker.scss +++ b/packages/core-components/src/components/date-picker/date-picker.scss @@ -55,7 +55,7 @@ margin-left: 0; padding-left: 0; height: 100%; - width: 15%; + width: 100%; color: var(--b2b-color-black-100); font-size: var(--b2b-size-35); line-height: var(--b2b-size-copy-line-height-100); diff --git a/packages/core-components/src/components/date-picker/date-picker.tsx b/packages/core-components/src/components/date-picker/date-picker.tsx index e63440b1..0e6060b5 100644 --- a/packages/core-components/src/components/date-picker/date-picker.tsx +++ b/packages/core-components/src/components/date-picker/date-picker.tsx @@ -100,6 +100,7 @@ export class B2bDatePicker { @Listen('b2b-date-picker-previous-month') getPreviousMonth() { + this.invalid = false; if (this.selectedMonth === 0) { this.setCurrentMonth(11); this.setCurrentYear(this.selectedYear - 1); @@ -116,7 +117,6 @@ export class B2bDatePicker { } if (!regex.test(dateString)) { this.invalid = true; - this.showDatePicker = false; this.errorMessage = this.FORMATTING_ERROR_MESSAGE; return; } @@ -144,9 +144,15 @@ export class B2bDatePicker { private isValidDate(day: number, month: number, year: number): boolean { const date = new Date(year, month - 1, day); - const isValidDay = day > 0 && day <= 31; - const isValidMonth = month > 0 && month <= 12; - const isValidYear = year > 0; + const isValidDay = date.getDate() === day; + const isValidMonth = date.getMonth() + 1 === month; + const isValidYear = + date.getFullYear() === year && year >= 1900 && year <= 2100; + + if (!isValidDay || !isValidMonth || !isValidYear) { + this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE; + return false; + } let isValidRange = true; if (this.disablePastDates && date < this.todayWithoutTime) { @@ -161,7 +167,8 @@ export class B2bDatePicker { this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE; isValidRange = false; } - return isValidDay && isValidMonth && isValidYear && isValidRange; + + return isValidRange; } private emitSelectedDate() { @@ -187,6 +194,9 @@ export class B2bDatePicker { if (value.length === 10) { this.parseDateInput(value); + if (this.invalid) { + this.showDatePicker = false; + } } }; @@ -246,6 +256,7 @@ export class B2bDatePicker { @Listen('b2b-date-picker-next-month') getNextMonth() { + this.invalid = false; if (this.selectedMonth === 11) { this.setCurrentMonth(0); this.setCurrentYear(this.selectedYear + 1); @@ -334,6 +345,13 @@ export class B2bDatePicker { } } + private handleFocusOut() { + if (this.userInputDate === '' || this.invalid) { + return; + } + this.parseDateInput(this.userInputDate); + } + private handleBackdropDismiss = () => { this.showDatePicker = false; }; @@ -387,6 +405,7 @@ export class B2bDatePicker { onFocus={this.handleInputFocus} onBlur={() => { this.focused = false; + this.handleFocusOut(); }} /> diff --git a/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.docs.mdx b/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.docs.mdx index 46205c52..2ec73e74 100644 --- a/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.docs.mdx +++ b/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.docs.mdx @@ -37,11 +37,11 @@ The placeholder for the search input. Must be a string. ### OptionsList -The list of items displayed as options in the multiselect. Must be a list of strings. +The list of items displayed as options in the multiselect. Must be a list of strings or string in this format '["apple", "banana"]'. ### SelectedValues -The initial values to be selected in the dropdown. Must be a list of strings. +The initial values to be selected in the dropdown. Must be a list of strings or a string in this format '["apple", "banana"]'. ### MaxOptionsVisible diff --git a/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.tsx b/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.tsx index da2a7070..d55d72ae 100644 --- a/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.tsx +++ b/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.tsx @@ -25,10 +25,10 @@ export class B2bMultiSelectDropdown { @Prop({ reflect: true }) placeholder: string; /** The initial values to be selected in the dropdown. */ - @Prop() selectedValues: string[] = []; + @Prop() selectedValues: string | string[] = []; /** The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */ - @Prop() optionsList: string[] = []; + @Prop() optionsList: string | string[] = []; /** The placeholder shown in the search bar. */ @Prop() searchPlaceholder: string; @@ -50,8 +50,9 @@ export class B2bMultiSelectDropdown { @State() hasOptionList = this.optionsList.length > 0; componentWillLoad() { - this.currentSelectedValues = this.selectedValues.filter(value => - this.optionsList.includes(value), + this.parseSelectedValuesAndOptionsList(); + this.currentSelectedValues = (this.selectedValues as string[]).filter( + value => this.optionsList.includes(value), ); } @@ -69,6 +70,19 @@ export class B2bMultiSelectDropdown { this.b2bChange.emit(newValues); } + private parseSelectedValuesAndOptionsList() { + if (typeof this.selectedValues === 'string') { + this.selectedValues = this.parseStringToArray(this.selectedValues); + } + if (typeof this.optionsList === 'string') { + this.optionsList = this.parseStringToArray(this.optionsList); + } + } + + private parseStringToArray(value: string): string[] { + return JSON.parse(value.replace(/'/g, '"')); + } + componentDidUpdate() { const options = this.getOptions(); this.updateAllOptions(options); @@ -78,7 +92,7 @@ export class B2bMultiSelectDropdown { private handleInput = event => { this.value = event.target.value.toLowerCase(); if (this.value !== '') { - const filteredList = this.optionsList.filter( + const filteredList = (this.optionsList as string[]).filter( option => option.toLowerCase().indexOf(this.value) > -1, ); this.currentList = filteredList; @@ -275,7 +289,7 @@ export class B2bMultiSelectDropdown { this.handleSelectAll }> {this.hasOptionList && - this.currentList.map(option => ( + (this.currentList as string[]).map(option => ( diff --git a/packages/core-components/src/html/form.html b/packages/core-components/src/html/form.html index d7d2a4fa..e555fdb2 100644 --- a/packages/core-components/src/html/form.html +++ b/packages/core-components/src/html/form.html @@ -33,9 +33,12 @@ placeholder="Please select..." search-placeholder="Search" select-all-label="Select All" - label="Hylian fruits and vegetables"> + label="Hylian fruits and vegetables" + options-list="['Swift Carrot','Hydromelon','Skyshroom','Fortified Pumpkin','Hyrule Herb','Hylian Shroom','Mighty Banana','Endura Carrot','Golden Apple']" + selected-values="['Hydromelon', 'Skyshroom']"> +
Input list
@@ -60,19 +63,6 @@ 'result4', 'result4', ]; - const el = document.getElementById('multiselect'); - el.optionsList = [ - 'Swift Carrot', - 'Hydromelon', - 'Skyshroom', - 'Fortified Pumpkin', - 'Hyrule Herb', - 'Hylian Shroom', - 'Mighty Banana', - 'Endura Carrot', - 'Golden Apple', - ]; - el.selectedValues = ['Hydromelon', 'Skyshroom'];