@siemens/ix 1.0.0 → 1.1.0-beta.0

package/dist/types/components/date-picker/date-picker.d.ts

@@ -1,30 +1,76 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { DateTime, MonthNumbers } from 'luxon';
 import { DateTimeCardCorners } from '../date-time-card/date-time-card';
+import { DateChangeEvent, LegacyDateChangeEvent } from './events';
 export declare class DatePicker {
+  private daysInWeek;
+  private dayNames;
+  private monthNames;
   /**
-   * output date format
+   * Date format string.
+   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
    */
   format: string;
   /**
-   * Set range size
+   * If true a range of dates can be selected.
    */
   range: boolean;
   /**
-   * set styles
+   * @deprecated - will get removed with next major release
    */
   individual: boolean;
   /**
-   * Set corners style
+   * Corner style
    */
   corners: DateTimeCardCorners;
-  private daysInWeek;
-  private dayNames;
-  private monthNames;
-  year: number;
-  month: MonthNumbers;
-  calendar: [number, number[]][];
+  /**
+   * Picker date. If the picker is in range mode this property is the start date.
+   *
+   * Format is based on `format`
+   *
+   * @since 1.1.0
+   */
+  from: string;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+   * This combination can be configured over the delimiter
+   *
+   * @since 1.1.0
+   */
+  eventDelimiter: string;
+  /**
+   * Text of date select button
+   *
+   * @since 1.1.0
+   */
+  textSelectDate: string;
+  yearValue: number;
   today: DateTime;
+  monthValue: number;
+  calendar: [number, number[]][];
   years: number[];
   tempYear: number;
   tempMonth: number;
@@ -33,13 +79,39 @@ export declare class DatePicker {
   dropdownButtonRef: HTMLElement;
   yearContainerRef: HTMLElement;
   /**
-   * Time change event
+   * 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 choosen consider to use `dateRangeChange`.
+   *
+   * @depracted String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string
    */
-  dateChange: EventEmitter<string>;
+  dateChange: EventEmitter<LegacyDateChangeEvent>;
   /**
-   * done event
+   * Date range change.
+   * Only triggered if datepicker is in range mode
+   *
+   * @since 1.1.0
+   */
+  dateRangeChange: EventEmitter<DateChangeEvent>;
+  /**
+   * Date selection confirmed via button action
+   *
+   * @deprecated Use `dateSelect`
    */
   done: EventEmitter<string>;
+  /**
+   * Date selection confirmed via button action
+   *
+   * @since 1.1.0
+   */
+  dateSelect: EventEmitter<DateChangeEvent>;
+  get year(): number;
+  get day(): import("luxon").DayNumbers;
+  get month(): MonthNumbers;
+  private onDone;
+  private onDateChange;
+  private selectionProps;
   private getStartOfMonth;
   private getEndOfMonth;
   private getDaysInMonth;
@@ -51,6 +123,14 @@ export declare class DatePicker {
   private todayClass;
   private selectDay;
   private getOutputFormat;
+  private isWithinMinMax;
   componentWillRender(): void;
+  /**
+   * Get the current DateTime
+   */
+  getCurrentDate(): Promise<{
+    start: DateTime;
+    end: DateTime;
+  }>;
   render(): any;
 }

package/dist/types/components/date-picker/events.d.ts

@@ -0,0 +1,5 @@
+export interface DateChangeEvent {
+  from: string;
+  to: string;
+}
+export declare type LegacyDateChangeEvent = DateChangeEvent | string;

package/dist/types/components/datetime-picker/datetime-picker.d.ts

@@ -1,31 +1,128 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { DateTimeSelectEvent } from './event';
 export declare class DatePicker {
   /**
    * Set range size
    */
   range: boolean;
   /**
-   * Show Hour Input
+   * Show hour input
    */
   showHour: boolean;
   /**
-   * Show Minutes Input
+   * Show minutes input
    */
   showMinutes: boolean;
   /**
-   * Show Seconds Input
+   * Show seconds input
    */
   showSeconds: boolean;
   /**
-   * Show Time Reference Input
+   * The earliest date that can be selected by the date picker.
+   * If not set there will be no restriction.
+   *
+   * @since 1.1.0
    */
-  showTimeReference: boolean;
-  private date;
-  private time;
+  minDate: string;
   /**
-   * Time event
+   * 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;
+  /**
+   * Date format string.
+   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+   *
+   * @since 1.1.0
+   */
+  dateFormat: string;
+  /**
+   * Time format string.
+   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+   *
+   * @since 1.1.0
+   */
+  timeFormat: string;
+  /**
+   * Picker date. If the picker is in range mode this property is the start date.
+   *
+   * Format is based on `format`
+   *
+   * @since 1.1.0
+   */
+  from: string;
+  /**
+   * 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;
+  /**
+   * Select time with format string
+   *
+   * @since 1.1.0
+   */
+  time: string;
+  /**
+   * Show time reference input
+   *
+   * @since 1.1.0 time reference is default aligned with formt tt
+   */
+  showTimeReference: any;
+  /**
+   * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+   * This combination can be configured over the delimiter
+   *
+   * @since 1.1.0
+   */
+  eventDelimiter: string;
+  /**
+   * Set time reference
+   */
+  timeReference: 'AM' | 'PM';
+  /**
+   * Text of date select button
+   *
+   * @since 1.1.0
+   */
+  textSelectDate: string;
+  /**
+   * Done event
+   *
+   * Set `doneEventDelimiter` to null or undefine to get the typed event
    */
   done: EventEmitter<string>;
-  private doneEvent;
+  /**
+   * Time change
+   *
+   * @since 1.1.0
+   */
+  timeChange: EventEmitter<string>;
+  /**
+   * Date change
+   *
+   * @since 1.1.0
+   */
+  dateChange: EventEmitter<string | Omit<DateTimeSelectEvent, 'time'>>;
+  /**
+   * Date selection event is fired after confirm button is pressend
+   *
+   * @since 1.1.0
+   */
+  dateSelect: EventEmitter<DateTimeSelectEvent>;
+  private datePickerElement;
+  private timePickerElement;
+  private _from;
+  private _to;
+  private _time;
+  private onDone;
+  private onDateChange;
+  private onTimeChange;
+  componentDidLoad(): void;
   render(): any;
 }

package/dist/types/components/datetime-picker/event.d.ts

@@ -0,0 +1,5 @@
+export interface DateTimeSelectEvent {
+  from: string;
+  to: string;
+  time: string;
+}

package/dist/types/components/map-navigation/map-navigation.d.ts

@@ -16,8 +16,6 @@ export declare class MapNavigation {
    */
   hideContextMenu: boolean;
   isSidebarOpen: boolean;
-  isAboutOpen: boolean;
-  isSettingsOpen: boolean;
   /**
    * Navigation toggled
    */
@@ -28,17 +26,11 @@ export declare class MapNavigation {
   contextMenuClick: EventEmitter<void>;
   get menu(): HTMLIxMenuElement;
   get menuOverlay(): Element;
-  get about(): HTMLIxMenuAboutElement;
-  get aboutItems(): HTMLIxMenuAboutItemElement;
-  get settings(): HTMLIxMenuSettingsElement;
-  get settingsItems(): HTMLIxMenuSettingsItemElement;
   get mapNavMenu(): Element;
   get sidebar(): Element;
   get overlay(): Element;
   componentDidRender(): void;
   private appendMenu;
-  private appendAbout;
-  private appendSettings;
   private toggleSidebar;
   private closeSidebar;
   private openSidebar;

package/dist/types/components/menu/menu.d.ts

@@ -94,6 +94,7 @@ export declare class Menu {
   get settings(): HTMLIxMenuSettingsElement;
   get isSettingsEmpty(): boolean;
   get avatarItem(): HTMLIxMenuAvatarElement;
+  get tabsContainer(): HTMLDivElement;
   private popoverListener;
   private showTab;
   componentDidLoad(): void;
@@ -139,5 +140,6 @@ export declare class Menu {
   private showMoreButton;
   private getCollapseText;
   private getCollapseIcon;
+  private isMenuItemClicked;
   render(): any;
 }

package/dist/types/components/menu-about/menu-about.d.ts

@@ -1,9 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class MenuAbout {
-  /**
-   *
-   */
-  i18nImprintLabel: string;
   /**
    * Active tab
    */
@@ -30,5 +26,6 @@ export declare class MenuAbout {
   private updateLabels;
   watchActiveTabLabel(value: string): void;
   private getSelectedTabIndex;
+  private getTabItems;
   render(): any;
 }

package/dist/types/components/time-picker/time-picker.d.ts

@@ -1,31 +1,56 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { DateTime } from 'luxon';
 import { DateTimeCardCorners } from '../date-time-card/date-time-card';
 export declare class TimePicker {
   hostElement: HTMLIxTimePickerElement;
   /**
-   * Set corners style
+   * Format of time string
+   *
+   * @since 1.1.0
+   */
+  format: string;
+  /**
+   * Corner style
    */
   corners: DateTimeCardCorners;
   /**
-   * set styles
+   * @deprecated - will get removed with next major release
    */
   individual: boolean;
   /**
-   * Show Hour Input
+   * Show hour input
    */
   showHour: boolean;
   /**
-   * Show Minutes Input
+   * Show minutes input
    */
   showMinutes: boolean;
   /**
-   * Show Seconds Input
+   * Show seconds input
    */
   showSeconds: boolean;
   /**
-   * Show Time Reference Input
+   * Select time with format string
+   *
+   * @since 1.1.0
+   */
+  time: string;
+  /**
+   * Show time reference input
+   *
+   * @since 1.1.0 time reference is default aligned with formt tt
+   */
+  showTimeReference: any;
+  /**
+   * Set time reference
+   */
+  timeReference: 'AM' | 'PM';
+  /**
+   * Text of date select button
+   *
+   * @since 1.1.0
    */
-  showTimeReference: boolean;
+  textSelectTime: string;
   /**
    * Time event
    */
@@ -38,9 +63,18 @@ export declare class TimePicker {
   minuteInputRef: HTMLInputElement;
   secondInputRef: HTMLInputElement;
   referenceInputRef: HTMLInputElement;
-  private time;
+  get hour(): import("luxon").HourNumbers;
+  get minutes(): import("luxon").SecondNumbers;
+  get seconds(): import("luxon").SecondNumbers;
+  private _time;
   private updateInput;
   private changeReference;
   private setHourAccordingToReference;
+  private emitTimeChange;
+  componentWillLoad(): void;
+  /**
+   * Get current time
+   */
+  getCurrentTime(): Promise<DateTime>;
   render(): any;
 }