From 602f689975555e632d3cf37340614708b0dff175 Mon Sep 17 00:00:00 2001 From: lzeiml Date: Wed, 27 Sep 2023 15:35:42 +0200 Subject: [PATCH 01/26] fix(ix-dropdown): fix nested dropdown dispose --- packages/core/src/components/dropdown/dropdown.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx index ab06fa42d25..b1d4c40168a 100644 --- a/packages/core/src/components/dropdown/dropdown.tsx +++ b/packages/core/src/components/dropdown/dropdown.tsx @@ -253,7 +253,11 @@ export class Dropdown { if (newShow) { dropdownDisposer.forEach((dispose, id) => { - if (id !== this.localUId && !this.isAnchorSubmenu()) { + if ( + id !== this.localUId && + !this.isAnchorSubmenu() && + !this.isNestedDropdown(this.hostElement) + ) { dispose(); } }); From 23441df19c3a191ed87d049e2bc0958804baa7b6 Mon Sep 17 00:00:00 2001 From: lzeiml Date: Thu, 28 Sep 2023 10:08:45 +0200 Subject: [PATCH 02/26] test(ix-dropdown): add nested dropdown test --- .../components/dropdown/test/dropdown.ct.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/core/src/components/dropdown/test/dropdown.ct.ts b/packages/core/src/components/dropdown/test/dropdown.ct.ts index 0d7e53c3177..a157520e3e5 100644 --- a/packages/core/src/components/dropdown/test/dropdown.ct.ts +++ b/packages/core/src/components/dropdown/test/dropdown.ct.ts @@ -99,3 +99,28 @@ function expectToBeVisible(elements: Locator[], index: number) { }) ); } + +test.describe('nested dropdown tests', () => { + const button1Text = 'Triggerbutton1'; + const button2Text = 'Triggerbutton2'; + + test.beforeEach(async ({ mount }) => { + await mount( + ` + + + + + + ` + ); + }); + + test('can open nested dropdown', async ({ page }) => { + await page.getByText(button1Text).click(); + await page.getByText(button2Text).click(); + const nestedDropdownItem = page.locator('ix-dropdown-item'); + + await expect(nestedDropdownItem).toHaveClass(/hydrated/); + }); +}); From d682c4223df1d44889326a3875efeeac1b11823d Mon Sep 17 00:00:00 2001 From: lzeiml Date: Thu, 28 Sep 2023 13:17:24 +0200 Subject: [PATCH 03/26] fix(core/dropdown): fix nested dropdown dispose --- .../core/src/components/dropdown/dropdown.tsx | 18 +++++++++++++----- .../components/dropdown/test/dropdown.ct.ts | 8 ++++---- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx index b1d4c40168a..d42b65f5db1 100644 --- a/packages/core/src/components/dropdown/dropdown.tsx +++ b/packages/core/src/components/dropdown/dropdown.tsx @@ -28,6 +28,7 @@ import { Prop, Watch, } from '@stencil/core'; +import { HTMLStencilElement } from '@stencil/core/internal'; import { AlignedPlacement } from './placement'; /** @@ -36,7 +37,11 @@ import { AlignedPlacement } from './placement'; export type DropdownTriggerEvent = 'click' | 'hover' | 'focus'; type DisposeDropdown = () => void; -const dropdownDisposer = new Map(); +type DropdownDisposerEntry = { + element: HTMLStencilElement; + dispose: DisposeDropdown; +}; +const dropdownDisposer = new Map(); let sequenceId = 0; @Component({ @@ -140,7 +145,10 @@ export class Dropdown { console.warn('Dropdown with duplicated id detected'); } - dropdownDisposer.set(this.localUId, this.close.bind(this)); + dropdownDisposer.set(this.localUId, { + dispose: this.close.bind(this), + element: this.hostElement, + }); } get dropdownItems() { @@ -252,13 +260,13 @@ export class Dropdown { } if (newShow) { - dropdownDisposer.forEach((dispose, id) => { + dropdownDisposer.forEach((entry, id) => { if ( id !== this.localUId && !this.isAnchorSubmenu() && - !this.isNestedDropdown(this.hostElement) + !entry.element.contains(this.hostElement) ) { - dispose(); + entry.dispose(); } }); } diff --git a/packages/core/src/components/dropdown/test/dropdown.ct.ts b/packages/core/src/components/dropdown/test/dropdown.ct.ts index a157520e3e5..2c784fa1950 100644 --- a/packages/core/src/components/dropdown/test/dropdown.ct.ts +++ b/packages/core/src/components/dropdown/test/dropdown.ct.ts @@ -105,15 +105,15 @@ test.describe('nested dropdown tests', () => { const button2Text = 'Triggerbutton2'; test.beforeEach(async ({ mount }) => { - await mount( - ` + await mount(` + - ` - ); + + `); }); test('can open nested dropdown', async ({ page }) => { From be4eb84da6ce743def6f5b423bb5619fdddb6243 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Tue, 3 Oct 2023 13:03:55 +0200 Subject: [PATCH 04/26] feat(core/date-dropdown): initial commit --- packages/core/src/components.d.ts | 86 +++++- .../date-dropdown/date-dropdown.scss | 38 +++ .../date-dropdown/date-dropdown.tsx | 244 ++++++++++++++++++ .../date-dropdown/test/date-dropdown.e2e.ts | 11 + .../date-dropdown/test/date-dropdown.spec.tsx | 18 ++ 5 files changed, 392 insertions(+), 5 deletions(-) create mode 100644 packages/core/src/components/date-dropdown/date-dropdown.scss create mode 100644 packages/core/src/components/date-dropdown/date-dropdown.tsx create mode 100644 packages/core/src/components/date-dropdown/test/date-dropdown.e2e.ts create mode 100644 packages/core/src/components/date-dropdown/test/date-dropdown.spec.tsx diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index b3d0caebf53..c2baa629676 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -17,8 +17,9 @@ import { InputState } from "./components/category-filter/input-state"; import { ColumnSize } from "./components/col/col"; import { ContentHeaderVariant } from "./components/content-header/content-header"; import { CssGridTemplateType } from "./components/css-grid/css-grid"; +import { DateChangeEvent } from "./components/date-dropdown/date-dropdown"; import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; -import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; +import { DateChangeEvent as DateChangeEvent1, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; import { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker"; import { AlignedPlacement, Side } from "./components/dropdown/placement"; @@ -52,8 +53,9 @@ export { InputState } from "./components/category-filter/input-state"; export { ColumnSize } from "./components/col/col"; export { ContentHeaderVariant } from "./components/content-header/content-header"; export { CssGridTemplateType } from "./components/css-grid/css-grid"; +export { DateChangeEvent } from "./components/date-dropdown/date-dropdown"; export { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; -export { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; +export { DateChangeEvent as DateChangeEvent1, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; export { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker"; export { AlignedPlacement, Side } from "./components/dropdown/placement"; @@ -472,6 +474,36 @@ export namespace Components { */ "itemName": string; } + interface IxDateDropdown { + /** + * Date format string. See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. + */ + "format": string; + /** + * Picker date. If the picker is in range mode this property is the start date. If set to `null` no default start date will be pre-selected. Format is based on `format` + * @since 1.1.0 + */ + "from": string | null; + /** + * The latest date that can be selected by the date picker. If not set there will be no restriction. + * @since 1.1.0 + */ + "maxDate": string; + /** + * The earliest date that can be selected by the date picker. If not set there will be no restriction. + * @since 1.1.0 + */ + "minDate": string; + /** + * If true a range of dates can be selected. + */ + "range": boolean; + /** + * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null` Format is based on `format` + * @since 1.1.0 + */ + "to": string | null; + } interface IxDatePicker { /** * Corner style @@ -2170,6 +2202,10 @@ export interface IxContentHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLIxContentHeaderElement; } +export interface IxDateDropdownCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxDateDropdownElement; +} export interface IxDatePickerCustomEvent extends CustomEvent { detail: T; target: HTMLIxDatePickerElement; @@ -2493,6 +2529,12 @@ declare global { prototype: HTMLIxCssGridItemElement; new (): HTMLIxCssGridItemElement; }; + interface HTMLIxDateDropdownElement extends Components.IxDateDropdown, HTMLStencilElement { + } + var HTMLIxDateDropdownElement: { + prototype: HTMLIxDateDropdownElement; + new (): HTMLIxDateDropdownElement; + }; interface HTMLIxDatePickerElement extends Components.IxDatePicker, HTMLStencilElement { } var HTMLIxDatePickerElement: { @@ -3033,6 +3075,7 @@ declare global { "ix-content-header": HTMLIxContentHeaderElement; "ix-css-grid": HTMLIxCssGridElement; "ix-css-grid-item": HTMLIxCssGridItemElement; + "ix-date-dropdown": HTMLIxDateDropdownElement; "ix-date-picker": HTMLIxDatePickerElement; "ix-date-time-card": HTMLIxDateTimeCardElement; "ix-datetime-picker": HTMLIxDatetimePickerElement; @@ -3558,6 +3601,37 @@ declare namespace LocalJSX { */ "itemName"?: string; } + interface IxDateDropdown { + /** + * Date format string. See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. + */ + "format"?: string; + /** + * Picker date. If the picker is in range mode this property is the start date. If set to `null` no default start date will be pre-selected. Format is based on `format` + * @since 1.1.0 + */ + "from"?: string | null; + /** + * The latest date that can be selected by the date picker. If not set there will be no restriction. + * @since 1.1.0 + */ + "maxDate"?: string; + /** + * The earliest date that can be selected by the date picker. If not set there will be no restriction. + * @since 1.1.0 + */ + "minDate"?: string; + "onDateRangeChange"?: (event: IxDateDropdownCustomEvent) => void; + /** + * If true a range of dates can be selected. + */ + "range"?: boolean; + /** + * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null` Format is based on `format` + * @since 1.1.0 + */ + "to"?: string | null; + } interface IxDatePicker { /** * Corner style @@ -3595,17 +3669,17 @@ declare namespace LocalJSX { * Date change event If datepicker is in range mode the event detail will be sperated with a `-` e.g. `2022/10/22 - 2022/10/24` (start and end). If range mode is chosen consider to use `dateRangeChange`. * @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string */ - "onDateChange"?: (event: IxDatePickerCustomEvent) => void; + "onDateChange"?: (event: IxDatePickerCustomEvent) => void; /** * Date range change. Only triggered if datepicker is in range mode * @since 1.1.0 */ - "onDateRangeChange"?: (event: IxDatePickerCustomEvent) => void; + "onDateRangeChange"?: (event: IxDatePickerCustomEvent) => void; /** * Date selection confirmed via button action * @since 1.1.0 */ - "onDateSelect"?: (event: IxDatePickerCustomEvent) => void; + "onDateSelect"?: (event: IxDatePickerCustomEvent) => void; /** * Date selection confirmed via button action * @deprecated Will be removed in 2.0.0. Use `dateSelect` @@ -5417,6 +5491,7 @@ declare namespace LocalJSX { "ix-content-header": IxContentHeader; "ix-css-grid": IxCssGrid; "ix-css-grid-item": IxCssGridItem; + "ix-date-dropdown": IxDateDropdown; "ix-date-picker": IxDatePicker; "ix-date-time-card": IxDateTimeCard; "ix-datetime-picker": IxDatetimePicker; @@ -5545,6 +5620,7 @@ declare module "@stencil/core" { "ix-content-header": LocalJSX.IxContentHeader & JSXBase.HTMLAttributes; "ix-css-grid": LocalJSX.IxCssGrid & JSXBase.HTMLAttributes; "ix-css-grid-item": LocalJSX.IxCssGridItem & JSXBase.HTMLAttributes; + "ix-date-dropdown": LocalJSX.IxDateDropdown & JSXBase.HTMLAttributes; "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes; "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes; "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/date-dropdown/date-dropdown.scss b/packages/core/src/components/date-dropdown/date-dropdown.scss new file mode 100644 index 00000000000..f283b11013d --- /dev/null +++ b/packages/core/src/components/date-dropdown/date-dropdown.scss @@ -0,0 +1,38 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'common-variables'; +@import 'mixins/shadow-dom/component'; + +:host { + @include ix-component; + display: block; + + @media screen and (max-width: 500px) { + .min-width { + max-height: max-content; + width: min-content; + } + } + + @media screen and (min-width: 500px) { + .border-right { + border-right: var(--theme-x-weak-bdr-2); + } + } + + .no-margin { + margin: 0; + padding: 0; + } + + .pull-right { + float: right; + padding: $tiny-space $default-space; + } +} diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx new file mode 100644 index 00000000000..7a9afa8c4ae --- /dev/null +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -0,0 +1,244 @@ +import { + Component, + Event, + EventEmitter, + h, + Host, + Prop, + State, + Watch, +} from '@stencil/core'; + +import dayjs from 'dayjs'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; +import { DateTime } from 'luxon'; + +dayjs.extend(customParseFormat); + +let timeIntervalOptions = [ + { + id: 'no-time-limit', + text: 'No time limit', + duration: undefined, + }, + { + id: 'today', + text: 'Today', + duration: 0, + }, + { + id: 'last-7-days', + text: 'Last 7 days', + duration: 7, + }, + { + id: 'last-14-days', + text: 'Last 14 days', + duration: 14, + }, + { + id: 'last-month', + text: 'Last month', + duration: 30, + }, + { + id: 'custom', + text: 'Custom...', + duration: undefined, + }, +]; + +export type DateChangeEvent = { + from: string; + to: string; +}; + +@Component({ + tag: 'ix-date-dropdown', + styleUrl: 'date-dropdown.scss', + shadow: true, +}) +export class DateDropdown { + /** + * Date format string. + * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. + */ + @Prop() public format = 'YYYY-MM-dd'; + + /** + * If true a range of dates can be selected. + */ + @Prop() range: boolean = true; + + /** + * Picker date. If the picker is in range mode this property is the start date. + * If set to `null` no default start date will be pre-selected. + * + * Format is based on `format` + * + * @since 1.1.0 + */ + @Prop() from: string | null = DateTime.now().toFormat(this.format); + + /** + * Picker date. If the picker is in range mode this property is the end date. + * If the picker is not in range mode leave this value `null` + * + * Format is based on `format` + * + * @since 1.1.0 + */ + @Prop() to: string | null = null; + + /** + * The earliest date that can be selected by the date picker. + * If not set there will be no restriction. + * + * @since 1.1.0 + */ + @Prop() minDate: string; + + /** + * The latest date that can be selected by the date picker. + * If not set there will be no restriction. + * + * @since 1.1.0 + */ + @Prop() maxDate: string; + + @State() private hideDatePicker: boolean = true; + + @State() private selectedIntervalId: string; + @State() private selectedIntervalDuration: number; + @State() private selectedIntervalButtonText: string; + + @State() private selectedDateRange: DateChangeEvent; + @State() private selectedDatePickerRange: DateChangeEvent; + + @State() private triggerRef: HTMLElement; + + @Event() dateRangeChange: EventEmitter; + + constructor() { + const initialSelectedValue = timeIntervalOptions[2]; + this.selectedIntervalButtonText = initialSelectedValue.text; + this.selectedIntervalDuration = initialSelectedValue.duration; + this.selectedIntervalId = initialSelectedValue.id; + } + + private selectTimeInterval( + intervalId: string, + intervalDuration: number, + intervalText: string + ) { + this.selectedIntervalButtonText = intervalText; + this.selectedIntervalDuration = intervalDuration; + this.selectedIntervalId = intervalId; + } + + @Watch('selectedIntervalId') + private handleTimeIntervalOptionChange() { + this.hideDatePicker = true; + const _from: dayjs.Dayjs = dayjs(); + const _to: dayjs.Dayjs = dayjs().add(this.selectedIntervalDuration, 'day'); + + if (this.selectedIntervalId === 'no-time-limit') { + //what to return here? + return; + } else if (this.selectedIntervalId === 'custom') { + //open the dialog + this.hideDatePicker = false; + } else { + const newDateRange: DateChangeEvent = { + from: _from.format(this.format).toString(), + to: _to.format(this.format).toString(), + }; + + this.setDateRange(newDateRange); + } + } + + @Watch('selectedDateRange') + private emitTimeIntervalChange() { + console.log(this.selectedDateRange); + this.dateRangeChange.emit(this.selectedDateRange); + } + + private setDateRange(newDateRange: DateChangeEvent) { + this.selectedDateRange = newDateRange; + + if (this.selectedIntervalId === 'custom') { + this.selectedIntervalButtonText = + this.selectedDateRange.from + ' — ' + this.selectedDateRange.to; + } + } + + private setSelectedDatePickerRange(newDatePickerRange: DateChangeEvent) { + this.selectedDatePickerRange = newDatePickerRange; + } + + render() { + return ( + + (this.triggerRef = ref)} + > + + + + + {timeIntervalOptions.map((intervalOption) => ( + + this.selectTimeInterval( + intervalOption.id, + intervalOption.duration, + intervalOption.text + ) + } + checked={this.selectedIntervalId === intervalOption.id} + > + ))} + + + + + + + ); + } +} diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.e2e.ts b/packages/core/src/components/date-dropdown/test/date-dropdown.e2e.ts new file mode 100644 index 00000000000..76eaa40287b --- /dev/null +++ b/packages/core/src/components/date-dropdown/test/date-dropdown.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('date-dropdown', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('date-dropdown'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.spec.tsx b/packages/core/src/components/date-dropdown/test/date-dropdown.spec.tsx new file mode 100644 index 00000000000..37cef67b469 --- /dev/null +++ b/packages/core/src/components/date-dropdown/test/date-dropdown.spec.tsx @@ -0,0 +1,18 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DateDropdown } from '../date-dropdown'; + +describe('date-dropdown', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DateDropdown], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + `); + }); +}); From 7f65c2f771ed1138308d4e305fae0e7ce15916fe Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:16:33 +0200 Subject: [PATCH 05/26] feat(core/date-dropdown): initial commit --- packages/angular/src/components.ts | 34 ++ packages/angular/src/declare-components.ts | 1 + packages/core/component-doc.json | 344 +++++++++++++++++- packages/core/src/components.d.ts | 42 ++- .../date-dropdown/date-dropdown.scss | 6 +- .../date-dropdown/date-dropdown.tsx | 247 +++++++------ .../date-dropdown/test/date-dropdown.ct.ts | 172 +++++++++ .../date-dropdown/test/date-dropdown.e2e.ts | 11 - .../date-dropdown/test/date-dropdown.spec.tsx | 18 - packages/core/src/index.html | 28 +- packages/core/src/tests/utils/ct/index.html | 1 + packages/react/src/components.ts | 2 + packages/vue/src/components.ts | 16 + 13 files changed, 767 insertions(+), 155 deletions(-) create mode 100644 packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts delete mode 100644 packages/core/src/components/date-dropdown/test/date-dropdown.e2e.ts delete mode 100644 packages/core/src/components/date-dropdown/test/date-dropdown.spec.tsx diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 2e12804ae63..c53a579cb08 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -437,6 +437,40 @@ export declare interface IxContentHeader extends Components.IxContentHeader { } +@ProxyCmp({ + inputs: ['customRangeAllowed', 'dateRangeOptions', 'format', 'from', 'initialSelectedDateRangeName', 'maxDate', 'minDate', 'range', 'to', 'tst1'], + methods: ['getDateRange'] +}) +@Component({ + selector: 'ix-date-dropdown', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['customRangeAllowed', 'dateRangeOptions', 'format', 'from', 'initialSelectedDateRangeName', 'maxDate', 'minDate', 'range', 'to', 'tst1'], +}) +export class IxDateDropdown { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['dateRangeChange']); + } +} + + +import type { DateChangeEvent as IIxDateDropdownDateChangeEvent } from '@siemens/ix'; + +export declare interface IxDateDropdown extends Components.IxDateDropdown { + /** + * EventEmitter for date range change events. + +This event is emitted when the date range changes within the component. +The event payload contains information about the selected date range. @event undefined,@private undefined + */ + dateRangeChange: EventEmitter>; +} + + @ProxyCmp({ inputs: ['corners', 'eventDelimiter', 'format', 'from', 'individual', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to'], methods: ['getCurrentDate'] diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index a6dfb8ea860..1c043c976f9 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -19,6 +19,7 @@ export const DIRECTIVES = [ d.IxChip, d.IxCol, d.IxContentHeader, + d.IxDateDropdown, d.IxDatePicker, d.IxDatetimePicker, d.IxDivider, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 4ab5ca4a7c1..283158446ad 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -794,6 +794,7 @@ "encapsulation": "shadow", "dependents": [ "ix-card-list", + "ix-date-dropdown", "ix-date-picker", "ix-datetime-picker", "ix-dropdown-button", @@ -814,6 +815,9 @@ "ix-card-list": [ "ix-button" ], + "ix-date-dropdown": [ + "ix-button" + ], "ix-date-picker": [ "ix-button" ], @@ -1877,9 +1881,15 @@ } ], "encapsulation": "shadow", - "dependents": [], + "dependents": [ + "ix-date-dropdown" + ], "dependencies": [], - "dependencyGraph": {}, + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-col" + ] + }, "props": [ { "name": "size", @@ -2273,6 +2283,297 @@ "parts": [], "listeners": [] }, + { + "dirPath": "./src/components/date-dropdown", + "filePath": "./src/components/date-dropdown/date-dropdown.tsx", + "fileName": "date-dropdown.tsx", + "readmePath": "./src/components/date-dropdown/readme.md", + "usagesDir": "./src/components/date-dropdown/usage", + "tag": "ix-date-dropdown", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-dropdown-button", + "ix-dropdown", + "ix-layout-grid", + "ix-row", + "ix-col", + "ix-dropdown-item", + "ix-date-picker", + "ix-button" + ], + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-dropdown-button", + "ix-dropdown", + "ix-layout-grid", + "ix-row", + "ix-col", + "ix-dropdown-item", + "ix-date-picker", + "ix-button" + ], + "ix-dropdown-button": [ + "ix-button", + "ix-icon-button", + "ix-dropdown" + ], + "ix-button": [ + "ix-spinner" + ], + "ix-icon-button": [ + "ix-spinner" + ], + "ix-date-picker": [ + "ix-date-time-card", + "ix-icon-button", + "ix-button", + "ix-dropdown" + ] + }, + "props": [ + { + "name": "customRangeAllowed", + "type": "boolean", + "mutable": false, + "attr": "custom-range-allowed", + "reflectToAttr": false, + "docs": "Controls whether the user is allowed to pick custom date ranges in the component.\nWhen set to 'true', the user can select a custom date range using the date picker.\nWhen set to 'false', only predefined time date range are available for selection.", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "dateRangeOptions", + "type": "DateDropdownOption[]", + "mutable": false, + "reflectToAttr": false, + "docs": "dasd", + "docsTags": [], + "default": "[]", + "values": [ + { + "type": "DateDropdownOption[]" + } + ], + "optional": false, + "required": false + }, + { + "name": "format", + "type": "string", + "mutable": false, + "attr": "format", + "reflectToAttr": false, + "docs": "Date format string.\nSee @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.", + "docsTags": [], + "default": "'YYYY-MM-DD'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "from", + "type": "string", + "mutable": false, + "attr": "from", + "reflectToAttr": false, + "docs": "Picker date. If the picker is in range mode this property is the start date.\nIf set to `null` no default start date will be pre-selected.\n\nFormat is based on `format`", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], + "default": "null", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "initialSelectedDateRangeName", + "type": "string", + "mutable": false, + "attr": "initial-selected-date-range-name", + "reflectToAttr": false, + "docs": "Used to set the initial select date range as well as the button name,\nif not set or no according date range label is found, nothing will be selected", + "docsTags": [ + { + "name": "default", + "text": "''" + } + ], + "default": "''", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "maxDate", + "type": "string", + "mutable": false, + "attr": "max-date", + "reflectToAttr": false, + "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "minDate", + "type": "string", + "mutable": false, + "attr": "min-date", + "reflectToAttr": false, + "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "range", + "type": "boolean", + "mutable": false, + "attr": "range", + "reflectToAttr": false, + "docs": "If true a range of dates can be selected.", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "to", + "type": "string", + "mutable": false, + "attr": "to", + "reflectToAttr": false, + "docs": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`", + "docsTags": [ + { + "name": "since", + "text": "1.1.0" + } + ], + "default": "null", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "tst1", + "type": "DateDropdownOption[]", + "mutable": false, + "reflectToAttr": false, + "docs": "", + "docsTags": [], + "default": "[]", + "values": [ + { + "type": "DateDropdownOption[]" + } + ], + "optional": false, + "required": false + } + ], + "methods": [ + { + "name": "getDateRange", + "returns": { + "type": "Promise", + "docs": "The selected date range." + }, + "signature": "getDateRange() => Promise", + "parameters": [], + "docs": "Retrieves the currently selected date range from the component.\nThis method returns the selected date range as a `DateChangeEvent` object.", + "docsTags": [ + { + "name": "returns", + "text": "The selected date range." + } + ] + } + ], + "events": [ + { + "event": "dateRangeChange", + "detail": "{ from: string; to: string; }", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "EventEmitter for date range change events.\n\nThis event is emitted when the date range changes within the component.\nThe event payload contains information about the selected date range.", + "docsTags": [ + { + "name": "event" + }, + { + "name": "private" + } + ] + } + ], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, { "dirPath": "./src/components/date-picker", "filePath": "./src/components/date-picker/date-picker.tsx", @@ -2286,6 +2587,7 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [ + "ix-date-dropdown", "ix-datetime-picker" ], "dependencies": [ @@ -2307,6 +2609,9 @@ "ix-button": [ "ix-spinner" ], + "ix-date-dropdown": [ + "ix-date-picker" + ], "ix-datetime-picker": [ "ix-date-picker" ] @@ -3237,6 +3542,7 @@ "dependents": [ "ix-breadcrumb", "ix-category-filter", + "ix-date-dropdown", "ix-date-picker", "ix-dropdown-button", "ix-menu-avatar", @@ -3252,6 +3558,9 @@ "ix-category-filter": [ "ix-dropdown" ], + "ix-date-dropdown": [ + "ix-dropdown" + ], "ix-date-picker": [ "ix-dropdown" ], @@ -3523,7 +3832,9 @@ } ], "encapsulation": "shadow", - "dependents": [], + "dependents": [ + "ix-date-dropdown" + ], "dependencies": [ "ix-button", "ix-icon-button", @@ -3540,6 +3851,9 @@ ], "ix-icon-button": [ "ix-spinner" + ], + "ix-date-dropdown": [ + "ix-dropdown-button" ] }, "props": [ @@ -3771,6 +4085,7 @@ "encapsulation": "shadow", "dependents": [ "ix-breadcrumb", + "ix-date-dropdown", "ix-menu-avatar-item", "ix-menu-category", "ix-select", @@ -3782,6 +4097,9 @@ "ix-breadcrumb": [ "ix-dropdown-item" ], + "ix-date-dropdown": [ + "ix-dropdown-item" + ], "ix-menu-avatar-item": [ "ix-dropdown-item" ], @@ -5879,9 +6197,15 @@ } ], "encapsulation": "shadow", - "dependents": [], + "dependents": [ + "ix-date-dropdown" + ], "dependencies": [], - "dependencyGraph": {}, + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-layout-grid" + ] + }, "props": [ { "name": "columns", @@ -8688,9 +9012,15 @@ } ], "encapsulation": "shadow", - "dependents": [], + "dependents": [ + "ix-date-dropdown" + ], "dependencies": [], - "dependencyGraph": {}, + "dependencyGraph": { + "ix-date-dropdown": [ + "ix-row" + ] + }, "props": [], "methods": [], "events": [], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index c2baa629676..0a1c5ff6a04 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -17,7 +17,7 @@ import { InputState } from "./components/category-filter/input-state"; import { ColumnSize } from "./components/col/col"; import { ContentHeaderVariant } from "./components/content-header/content-header"; import { CssGridTemplateType } from "./components/css-grid/css-grid"; -import { DateChangeEvent } from "./components/date-dropdown/date-dropdown"; +import { DateChangeEvent, DateDropdownOption } from "./components/date-dropdown/date-dropdown"; import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; import { DateChangeEvent as DateChangeEvent1, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; @@ -53,7 +53,7 @@ export { InputState } from "./components/category-filter/input-state"; export { ColumnSize } from "./components/col/col"; export { ContentHeaderVariant } from "./components/content-header/content-header"; export { CssGridTemplateType } from "./components/css-grid/css-grid"; -export { DateChangeEvent } from "./components/date-dropdown/date-dropdown"; +export { DateChangeEvent, DateDropdownOption } from "./components/date-dropdown/date-dropdown"; export { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; export { DateChangeEvent as DateChangeEvent1, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; @@ -475,6 +475,15 @@ export namespace Components { "itemName": string; } interface IxDateDropdown { + /** + * Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date range are available for selection. + * @default '' + */ + "customRangeAllowed": boolean; + /** + * dasd + */ + "dateRangeOptions": DateDropdownOption[]; /** * Date format string. See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. */ @@ -484,6 +493,16 @@ export namespace Components { * @since 1.1.0 */ "from": string | null; + /** + * Retrieves the currently selected date range from the component. This method returns the selected date range as a `DateChangeEvent` object. + * @returns The selected date range. + */ + "getDateRange": () => Promise; + /** + * Used to set the initial select date range as well as the button name, if not set or no according date range label is found, nothing will be selected + * @default '' + */ + "initialSelectedDateRangeName": string; /** * The latest date that can be selected by the date picker. If not set there will be no restriction. * @since 1.1.0 @@ -3602,6 +3621,15 @@ declare namespace LocalJSX { "itemName"?: string; } interface IxDateDropdown { + /** + * Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date range are available for selection. + * @default '' + */ + "customRangeAllowed"?: boolean; + /** + * dasd + */ + "dateRangeOptions"?: DateDropdownOption[]; /** * Date format string. See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. */ @@ -3611,6 +3639,11 @@ declare namespace LocalJSX { * @since 1.1.0 */ "from"?: string | null; + /** + * Used to set the initial select date range as well as the button name, if not set or no according date range label is found, nothing will be selected + * @default '' + */ + "initialSelectedDateRangeName"?: string; /** * The latest date that can be selected by the date picker. If not set there will be no restriction. * @since 1.1.0 @@ -3621,6 +3654,11 @@ declare namespace LocalJSX { * @since 1.1.0 */ "minDate"?: string; + /** + * EventEmitter for date range change events. This event is emitted when the date range changes within the component. The event payload contains information about the selected date range. + * @event + * @private + */ "onDateRangeChange"?: (event: IxDateDropdownCustomEvent) => void; /** * If true a range of dates can be selected. diff --git a/packages/core/src/components/date-dropdown/date-dropdown.scss b/packages/core/src/components/date-dropdown/date-dropdown.scss index f283b11013d..823a5b19665 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.scss +++ b/packages/core/src/components/date-dropdown/date-dropdown.scss @@ -15,17 +15,21 @@ @media screen and (max-width: 500px) { .min-width { - max-height: max-content; width: min-content; } } @media screen and (min-width: 500px) { + .border-right { border-right: var(--theme-x-weak-bdr-2); } } + .max-height { + max-height: max-content; + } + .no-margin { margin: 0; padding: 0; diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index 7a9afa8c4ae..d0a0ac164e8 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -1,9 +1,11 @@ import { Component, + Element, Event, EventEmitter, h, Host, + Method, Prop, State, Watch, @@ -11,42 +13,20 @@ import { import dayjs from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; -import { DateTime } from 'luxon'; dayjs.extend(customParseFormat); -let timeIntervalOptions = [ - { - id: 'no-time-limit', - text: 'No time limit', - duration: undefined, - }, - { - id: 'today', - text: 'Today', - duration: 0, - }, - { - id: 'last-7-days', - text: 'Last 7 days', - duration: 7, - }, - { - id: 'last-14-days', - text: 'Last 14 days', - duration: 14, - }, - { - id: 'last-month', - text: 'Last month', - duration: 30, - }, - { - id: 'custom', - text: 'Custom...', - duration: undefined, - }, -]; +const CUSTOM_RANGE_LABEL = 'Custom...'; + +export type DateDropdownOption = { + label: string; + getValue: () => DateRangeOption; +}; + +export type DateRangeOption = { + from: dayjs.Dayjs; + to: dayjs.Dayjs; +}; export type DateChangeEvent = { from: string; @@ -63,7 +43,7 @@ export class DateDropdown { * Date format string. * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. */ - @Prop() public format = 'YYYY-MM-dd'; + @Prop() public format = 'YYYY-MM-DD'; /** * If true a range of dates can be selected. @@ -78,7 +58,7 @@ export class DateDropdown { * * @since 1.1.0 */ - @Prop() from: string | null = DateTime.now().toFormat(this.format); + @Prop() from: string | null = null; /** * Picker date. If the picker is in range mode this property is the end date. @@ -106,118 +86,179 @@ export class DateDropdown { */ @Prop() maxDate: string; - @State() private hideDatePicker: boolean = true; + /** + * Used to set the initial select date range as well as the button name, + * if not set or no according date range label is found, nothing will be selected + * @default '' + */ + @Prop() initialSelectedDateRangeName: string = ''; + + /** + * Controls whether the user is allowed to pick custom date ranges in the component. + * When set to 'true', the user can select a custom date range using the date picker. + * When set to 'false', only predefined time date range are available for selection. + * @default '' + */ + @Prop() public customRangeAllowed: boolean = true; + + /** + * dasd + */ + @Prop() public dateRangeOptions: DateDropdownOption[] = []; - @State() private selectedIntervalId: string; - @State() private selectedIntervalDuration: number; - @State() private selectedIntervalButtonText: string; + @State() private hideDatePicker: boolean = true; + @State() private currentlySelectedDateRangeName: string; + @State() private associatedDateRangeValue: DateChangeEvent; + @State() private savedDateRangeName: string; + @State() private datePickerRange: DateChangeEvent; - @State() private selectedDateRange: DateChangeEvent; - @State() private selectedDatePickerRange: DateChangeEvent; + /** + * EventEmitter for date range change events. + * + * This event is emitted when the date range changes within the component. + * The event payload contains information about the selected date range. + * + * @event + * @private + */ + @Event() private dateRangeChange: EventEmitter; @State() private triggerRef: HTMLElement; - @Event() dateRangeChange: EventEmitter; + @Element() hostElement: HTMLIxDateDropdownElement; constructor() { - const initialSelectedValue = timeIntervalOptions[2]; - this.selectedIntervalButtonText = initialSelectedValue.text; - this.selectedIntervalDuration = initialSelectedValue.duration; - this.selectedIntervalId = initialSelectedValue.id; - } + const dateRangeOption = this.dateRangeOptions.find( + (option) => option.label === this.initialSelectedDateRangeName + ); + + const selectedDateRangeName = dateRangeOption + ? this.initialSelectedDateRangeName + : 'No range set'; - private selectTimeInterval( - intervalId: string, - intervalDuration: number, - intervalText: string - ) { - this.selectedIntervalButtonText = intervalText; - this.selectedIntervalDuration = intervalDuration; - this.selectedIntervalId = intervalId; + if (dateRangeOption) { + this.setSelectedDateRange( + this.initialSelectedDateRangeName, + dateRangeOption.getValue + ); + } + + this.savedDateRangeName = selectedDateRangeName; } - @Watch('selectedIntervalId') - private handleTimeIntervalOptionChange() { - this.hideDatePicker = true; - const _from: dayjs.Dayjs = dayjs(); - const _to: dayjs.Dayjs = dayjs().add(this.selectedIntervalDuration, 'day'); - - if (this.selectedIntervalId === 'no-time-limit') { - //what to return here? - return; - } else if (this.selectedIntervalId === 'custom') { - //open the dialog - this.hideDatePicker = false; - } else { - const newDateRange: DateChangeEvent = { - from: _from.format(this.format).toString(), - to: _to.format(this.format).toString(), - }; + @Watch('associatedDateRangeValue') + public associatedDateRangeValueChanged(): void { + this.savedDateRangeName = this.currentlySelectedDateRangeName; - this.setDateRange(newDateRange); - } + this.dateRangeChange.emit(this.associatedDateRangeValue); + this.closeDropdown(); } - @Watch('selectedDateRange') - private emitTimeIntervalChange() { - console.log(this.selectedDateRange); - this.dateRangeChange.emit(this.selectedDateRange); + /** + * Retrieves the currently selected date range from the component. + * This method returns the selected date range as a `DateChangeEvent` object. + * + * @returns {Promise} The selected date range. + */ + @Method() + public async getDateRange(): Promise { + return this.associatedDateRangeValue; } - private setDateRange(newDateRange: DateChangeEvent) { - this.selectedDateRange = newDateRange; + private setSelectedDateRange( + dateRangeName: string, + getDateRange: () => DateRangeOption + ): void { + this.currentlySelectedDateRangeName = dateRangeName; + console.log('!!'); + console.log(dateRangeName); + console.log(getDateRange); - if (this.selectedIntervalId === 'custom') { - this.selectedIntervalButtonText = - this.selectedDateRange.from + ' — ' + this.selectedDateRange.to; + if (dateRangeName !== CUSTOM_RANGE_LABEL) { + const associatedDateRangeValue = getDateRange(); + + this.associatedDateRangeValue = { + from: associatedDateRangeValue.from.format(this.format), + to: associatedDateRangeValue.to.format(this.format), + }; + } else { + this.hideDatePicker = false; } } - private setSelectedDatePickerRange(newDatePickerRange: DateChangeEvent) { - this.selectedDatePickerRange = newDatePickerRange; + closeDropdown(): void { + this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false; + } + + reInitializeValuesOnDropdownOpen(e: any): void { + if (this.savedDateRangeName !== CUSTOM_RANGE_LABEL) { + this.hideDatePicker = true; + } + + if (e.detail === true) { + if (this.savedDateRangeName != this.currentlySelectedDateRangeName) { + this.currentlySelectedDateRangeName = this.savedDateRangeName; + } + } } render() { return ( (this.triggerRef = ref)} + class="button-width" > this.reInitializeValuesOnDropdownOpen(e)} > - {timeIntervalOptions.map((intervalOption) => ( + {this.dateRangeOptions.map((dateRangeOption) => ( - this.selectTimeInterval( - intervalOption.id, - intervalOption.duration, - intervalOption.text + this.setSelectedDateRange( + dateRangeOption.label, + dateRangeOption.getValue ) } - checked={this.selectedIntervalId === intervalOption.id} + checked={ + this.currentlySelectedDateRangeName === + dateRangeOption.label + } > ))} + @@ -279,9 +280,10 @@ export class DateDropdown { >
- (this.associatedDateRangeValue = this.datePickerRange) - } + onClick={() => { + console.log(this.datePickerRange); + this.associatedDateRangeValue = this.datePickerRange; + }} > Done From f6a02b9642cf90d42f42b1b3843c213fcfc08429 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Mon, 6 Nov 2023 08:36:26 +0100 Subject: [PATCH 23/26] feat(core/date-dropdown): missing files from yarn build --- packages/core/component-doc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index b1088ae8440..1b4b70f9a19 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2387,7 +2387,7 @@ "reflectToAttr": false, "docs": "Date format string.\nSee @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.", "docsTags": [], - "default": "'YYYY-MM-DD'", + "default": "'LLLL/dd/ccc'", "values": [ { "type": "string" From 63306f5c452a800912e4b1bbe556ab1ef89efc1a Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Mon, 6 Nov 2023 10:44:46 +0100 Subject: [PATCH 24/26] feat(core/date-dropdown): fixes --- packages/core/component-doc.json | 2 +- .../core/src/components/date-dropdown/date-dropdown.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 1b4b70f9a19..b1088ae8440 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2387,7 +2387,7 @@ "reflectToAttr": false, "docs": "Date format string.\nSee @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.", "docsTags": [], - "default": "'LLLL/dd/ccc'", + "default": "'YYYY-MM-DD'", "values": [ { "type": "string" diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index ed116aa4d6d..7090c6f0531 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -46,7 +46,7 @@ export class DateDropdown { * Date format string. * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. */ - @Prop() public format = 'LLLL/dd/ccc'; + @Prop() public format = 'YYYY-MM-DD'; /** * If true a range of dates can be selected. @@ -188,10 +188,14 @@ export class DateDropdown { if (dateRangeName !== CUSTOM_RANGE_LABEL) { const { from, to } = getDateRange(); + console.log(from); + console.log(to); + this.associatedDateRangeValue = { from: from ? from.format(this.format) : undefined, to: to ? to.format(this.format) : undefined, }; + console.log(this.associatedDateRangeValue); } else { this.hideDatePicker = false; } From 93e69fd1a993fbf4ab486f0199a27a334dfff950 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Mon, 6 Nov 2023 10:48:05 +0100 Subject: [PATCH 25/26] feat(core/date-dropdown): undo changes in index.html --- packages/core/src/index.html | 28 +--------------------------- 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 4d220e1f232..3af243b6208 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -30,33 +30,7 @@ - - - - + From 7536bcd30652dedee688f580f9ccff33291588cd Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Tue, 7 Nov 2023 06:20:55 +0100 Subject: [PATCH 26/26] feat(core/date-dropdown): removed console.logs --- packages/core/src/components/date-dropdown/date-dropdown.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index 7090c6f0531..b1a7f197c9b 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -188,14 +188,10 @@ export class DateDropdown { if (dateRangeName !== CUSTOM_RANGE_LABEL) { const { from, to } = getDateRange(); - console.log(from); - console.log(to); - this.associatedDateRangeValue = { from: from ? from.format(this.format) : undefined, to: to ? to.format(this.format) : undefined, }; - console.log(this.associatedDateRangeValue); } else { this.hideDatePicker = false; } @@ -285,7 +281,6 @@ export class DateDropdown {
{ - console.log(this.datePickerRange); this.associatedDateRangeValue = this.datePickerRange; }} >