ids-enterprise-wc 1.0.0-beta.20 → 1.0.0-beta.22

package/components/ids-calendar/ids-calendar.css

@@ -1,336 +1,245 @@
-.ids-calendar {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
+.ids-calendar-event:not([color]) {
+  background-color: var(--ids-calendar-event-color-background);
 }
-
-.calendar-legend-pane,
-.calendar-details-pane {
-  display: none;
-  width: 220px;
-  height: auto;
+.ids-calendar-event:not([color]):not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-default);
 }
-
-.ids-calendar.show-legend .calendar-legend-pane,
-.ids-calendar.show-details .calendar-details-pane {
-  display: block;
+.ids-calendar-event:not([color]):not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-.calendar-contents {
-  flex-grow: 1;
+.ids-calendar-event:not([color]):focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-.calendar-toolbar-pane {
-  display: block;
-  border-width: 1px 1px 0;
-  border-style: solid;
-  background-color: var(--ids-calendar-toolbar-color-background);
-  border-color: var(--ids-calendar-toolbar-color-border);
-  left: 0;
-  top: 0;
-  z-index: 4;
-  flex-shrink: 0;
+.ids-calendar-event[color=blue] {
+  background-color: var(--ids-calendar-event-color-background-accent-blue);
 }
-
-.calendar-custom-legend {
-  display: none;
-  border-width: 0 1px 1px;
-  background-color: var(--ids-calendar-toolbar-color-background);
-  border-style: solid;
-  border-color: var(--ids-calendar-toolbar-color-border);
-  box-sizing: border-box;
-  padding: 4px;
+.ids-calendar-event[color=blue]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-bluet-blue);
 }
-.calendar-custom-legend.is-populated {
-  display: block;
+.ids-calendar-event[color=blue]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-ids-toolbar-section::part(container),
-.ids-toolbar-section {
-  align-items: center;
+.ids-calendar-event[color=blue]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-.calendar-details-pane ids-accordion-header[color=blue]::part(header) {
-  background-color: var(--ids-color-blue-60);
-}
-.calendar-details-pane ids-accordion-header[color=orange]::part(header) {
-  background-color: var(--ids-color-orange-60);
-}
-.calendar-details-pane ids-accordion-header[color=purple]::part(header) {
-  background-color: var(--ids-color-purple-60);
+.ids-calendar-event[color=orange] {
+  background-color: var(--ids-calendar-event-color-background-accent-orange);
 }
-.calendar-details-pane ids-accordion-header[color=green]::part(header) {
-  background-color: var(--ids-color-green-60);
+.ids-calendar-event[color=orange]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-orange);
 }
-.calendar-details-pane ids-accordion-header[color=red]::part(header) {
-  background-color: var(--ids-color-red-60);
+.ids-calendar-event[color=orange]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.calendar-details-pane ids-accordion-header[color=teal]::part(header) {
-  background-color: var(--ids-color-teal-60);
-}
-.calendar-details-pane ids-accordion-header[color=neutral]::part(header) {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event[color=orange]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
-.calendar-details-pane ids-accordion-header::part(header) {
-  color: var(--ids-color-white-100);
+
+.ids-calendar-event[color=purple] {
+  background-color: var(--ids-calendar-event-color-background-accent-purple);
 }
-.calendar-details-pane ids-accordion-header ids-text::part(text) {
-  overflow: hidden;
-  width: 150px;
-  white-space: nowrap;
+.ids-calendar-event[color=purple]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-purple);
 }
-.calendar-details-pane .panel-content {
-  padding-top: 15px;
-  padding-bottom: 15px;
+.ids-calendar-event[color=purple]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.calendar-details-pane .panel-content hr {
-  border-bottom: none;
-  margin: 20px 0;
+.ids-calendar-event[color=purple]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-ids-accordion-panel::part(content) {
-  padding: 4px 0;
+.ids-calendar-event[color=green] {
+  background-color: var(--ids-calendar-event-color-background-accent-green);
 }
-
-.btn-previous,
-.btn-next {
-  height: 36px;
+.ids-calendar-event[color=green]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-green);
 }
-
-.btn-today-text {
-  color: var(--ids-color-blue-60);
+.ids-calendar-event[color=green]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-.calendar-events-list {
-  margin-top: 20px;
-  padding: 0;
-}
-.calendar-events-list .detail-item[color=blue] {
-  border-inline-start-color: var(--ids-color-blue-60);
-}
-.calendar-events-list .detail-item[color=orange] {
-  border-inline-start-color: var(--ids-color-orange-60);
-}
-.calendar-events-list .detail-item[color=purple] {
-  border-inline-start-color: var(--ids-color-purple-60);
-}
-.calendar-events-list .detail-item[color=green] {
-  border-inline-start-color: var(--ids-color-green-60);
-}
-.calendar-events-list .detail-item[color=red] {
-  border-inline-start-color: var(--ids-color-red-60);
-}
-.calendar-events-list .detail-item[color=teal] {
-  border-inline-start-color: var(--ids-color-teal-60);
-}
-.calendar-events-list .detail-item[color=neutral] {
-  border-inline-start-color: var(--ids-color-neutral-60);
-}
-.calendar-events-list .detail-item {
-  background-color: var(--ids-calendar-toolbar-color-background);
-  border-style: solid;
-  border-color: var(--ids-calendar-toolbar-color-border);
-  border-width: 1px;
-  border-inline-start-width: 4px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  align-items: center;
-  padding: 15px;
-}
-.calendar-events-list .detail-item:focus {
-  border-color: var(--ids-color-primary);
+.ids-calendar-event[color=green]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
   outline: none;
 }
-.calendar-events-list .calendar-detail-content {
-  flex-grow: 1;
-}
-.calendar-events-list .detail-item-duration {
-  padding: 0 8px;
-}
-
-.event-type-label,
-.event-types-legend {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
 
-.event-types-legend {
-  display: none;
-  padding: 10px;
+.ids-calendar-event[color=red] {
+  background-color: var(--ids-calendar-event-color-background-accent-red);
 }
-.event-types-legend .event-type-color[color=blue] {
-  background-color: var(--ids-color-blue-60);
+.ids-calendar-event[color=red]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-red);
 }
-.event-types-legend .event-type-color[color=orange] {
-  background-color: var(--ids-color-orange-60);
+.ids-calendar-event[color=red]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.event-types-legend .event-type-color[color=purple] {
-  background-color: var(--ids-color-purple-60);
+.ids-calendar-event[color=red]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
-.event-types-legend .event-type-color[color=green] {
-  background-color: var(--ids-color-green-60);
+
+.ids-calendar-event[color=teal] {
+  background-color: var(--ids-calendar-event-color-background-accent-turqoise);
 }
-.event-types-legend .event-type-color[color=red] {
-  background-color: var(--ids-color-red-60);
+.ids-calendar-event[color=teal]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-turqoise);
 }
-.event-types-legend .event-type-color[color=teal] {
-  background-color: var(--ids-color-teal-60);
+.ids-calendar-event[color=teal]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.event-types-legend .event-type-color[color=neutral] {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event[color=teal]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-.event-type-label {
-  margin: 0 8px;
+.ids-calendar-event[color=neutral] {
+  background-color: var(--ids-calendar-event-color-background-accent-neutral);
 }
-
-.event-type-color {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 10px;
-  margin: 0 3px;
+.ids-calendar-event[color=neutral]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-neutral);
 }
-
-.inline-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.ids-calendar-event[color=neutral]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
+}
+.ids-calendar-event[color=neutral]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-#event-form-popup {
-  width: 320px;
+.ids-calendar-event {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: 1;
+  background: var(--ids-calendar-event-color-background);
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--ids-calendar-event-color-text);
+  height: 20px;
+  overflow: hidden;
+  text-decoration: none;
 }
-#event-form-popup::part(popup) {
-  padding-top: 0;
-  padding-bottom: 0;
+.ids-calendar-event.standalone {
+  display: block;
+  position: relative;
+  height: unset;
 }
-
-#event-form-header {
-  align-items: center;
-  color: var(--ids-color-neutral-10);
-  height: 40px;
-  padding-inline-start: 16px;
-  padding-inline-end: 8px;
-}
-#event-form-header ids-icon[data-action=close] {
-  color: var(--ids-color-neutral-10);
-  padding: 5px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-#event-form-header ids-icon[data-action=close]:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+.ids-calendar-event .calendar-event-content {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  padding: 2px 5px;
 }
-
-#event-form {
-  display: flex;
-  flex-direction: column;
+.ids-calendar-event .calendar-event-content ids-text {
+  display: block;
   width: 100%;
   height: 100%;
 }
-#event-form #event-form-header[color=blue] {
-  background-color: var(--ids-color-blue-60);
+.ids-calendar-event .calendar-event-icon {
+  vertical-align: bottom;
 }
-#event-form #event-form-header[color=orange] {
-  background-color: var(--ids-color-orange-60);
+.ids-calendar-event .calendar-event-icon[icon=success-alert] {
+  color: var(--ids-calendar-event-color-icon-success);
 }
-#event-form #event-form-header[color=purple] {
-  background-color: var(--ids-color-purple-60);
+.ids-calendar-event .calendar-event-icon[icon=alert-alert] {
+  color: var(--ids-calendar-event-color-icon-alert);
 }
-#event-form #event-form-header[color=green] {
-  background-color: var(--ids-color-green-60);
+.ids-calendar-event .calendar-event-icon[icon=clock] {
+  color: var(--ids-calendar-event-color-icon-clock);
 }
-#event-form #event-form-header[color=red] {
-  background-color: var(--ids-color-red-60);
+.ids-calendar-event .calendar-event-icon[icon=pending] {
+  color: var(--ids-calendar-event-color-icon-pending);
 }
-#event-form #event-form-header[color=teal] {
-  background-color: var(--ids-color-teal-60);
+.ids-calendar-event .calendar-event-title {
+  line-height: 12px;
 }
-#event-form #event-form-header[color=neutral] {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event .calendar-event-title::part(text) {
+  text-transform: initial;
 }
-#event-form ids-list-box-option {
-  text-align: left;
+.ids-calendar-event.is-cutoff {
+  border-radius: 3px 3px 0 0;
 }
-#event-form ids-date-picker,
-#event-form ids-time-picker {
-  max-width: 128px;
+.ids-calendar-event.is-ellipsis .calendar-event-content {
+  white-space: nowrap;
 }
-
-#event-form-content {
-  flex-grow: 1;
-  box-sizing: border-box;
-  padding: 12px 20px;
+.ids-calendar-event.reduced-padding .calendar-event-content {
+  padding: 0 5px;
+}
+.ids-calendar-event.reduced-padding .calendar-event-title {
   position: relative;
+  top: -1.6px;
 }
 
-#event-form-actions ids-button {
-  flex-grow: 1;
-  border: 1px solid var(--ids-color-neutral-40);
-  border-bottom-width: 0;
+.ids-calendar-event.all-day {
+  top: 1px;
 }
-#event-form-actions ids-button::part(button) {
+.ids-calendar-event.all-day.calendar-event-start, .ids-calendar-event.all-day.calendar-event-continue, .ids-calendar-event.all-day.calendar-event-ends {
   border-radius: 0;
-  padding-top: 13px;
-  padding-bottom: 13px;
 }
-#event-form-actions ids-button[data-action=close] {
-  border-inline-start-width: 0;
+.ids-calendar-event.all-day.calendar-event-start {
+  border-start-start-radius: 3px;
+  border-end-start-radius: 3px;
 }
-#event-form-actions ids-button[data-action=submit] {
-  border-inline-end-width: 0;
+.ids-calendar-event.all-day.calendar-event-continue {
+  width: calc(100% + 2px);
   margin-inline-start: -1px;
 }
-#event-form-actions ids-button[data-action=submit]::part(button) {
-  color: var(--ids-color-blue-70);
+.ids-calendar-event.all-day.calendar-event-ends {
+  border-end-end-radius: 3px;
+  border-start-end-radius: 3px;
 }
-#event-form-actions ids-button[data-action=submit]::part(button):hover {
-  color: var(--ids-color-blue-80);
+.ids-calendar-event.all-day.calendar-event-continue ids-icon, .ids-calendar-event.all-day.calendar-event-ends ids-icon {
+  visibility: hidden;
+}
+.ids-calendar-event.all-day.calendar-event-continue .calendar-event-title, .ids-calendar-event.all-day.calendar-event-ends .calendar-event-title {
+  color: transparent;
 }
 
-@media (max-width: 840px) {
-  .ids-calendar {
-    display: block;
-  }
-  .ids-calendar.show-legend .calendar-legend-pane {
-    display: none;
-  }
-  .calendar-view-pane,
-  .calendar-details-pane {
-    width: 100%;
-  }
-  #event-form-popup {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-  #event-form-popup::part(popup) {
-    height: 100%;
-    width: 100%;
-  }
-  #event-form-content {
-    height: 100%;
-    overflow-y: auto;
-    padding-bottom: 50px;
-  }
-  #event-form-content ids-date-picker,
-  #event-form-content ids-time-picker {
-    max-width: unset;
-  }
-  #event-form-content .inline-container {
-    position: relative;
-    display: block;
-  }
-  #event-form-actions {
-    background-color: var(--ids-popup-menu-color-background-default);
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-  }
+.ids-calendar-event.is-month-view {
+  position: absolute;
+  display: block;
+  height: 16px;
+}
+.ids-calendar-event.is-month-view:not(.all-day) {
+  width: calc(100% - 10px);
+  margin: 0 5px;
+}
+.ids-calendar-event.is-month-view.calendar-event-start, .ids-calendar-event.is-month-view.calendar-event-continue, .ids-calendar-event.is-month-view.calendar-event-ends {
+  width: calc(100% - 5px);
+}
+.ids-calendar-event.is-month-view.calendar-event-start {
+  margin-inline-start: 5px;
+}
+.ids-calendar-event.is-month-view.calendar-event-continue {
+  width: 100%;
+  margin-inline-start: 0;
+}
+.ids-calendar-event.is-month-view.calendar-event-ends {
+  margin-inline-end: 5px;
+}
+.ids-calendar-event.is-month-view.hidden {
+  display: none;
+}
+.ids-calendar-event.is-month-view .calendar-event-content {
+  padding: 0 5px;
 }

package/components/ids-calendar/ids-calendar.d.ts

@@ -26,9 +26,9 @@ type CalendarEventDetail = {
 type CalendarViewTypes = 'month' | 'week' | 'day';
 declare const Base: {
     new (...args: any[]): {
-        "__#74@#disableSettings": IdsDisableSettings;
-        "__#74@#currentLegend": import("../ids-month-view/ids-month-view-common").IdsLegendSettings;
-        "__#74@#rangeSettings": import("../ids-month-view/ids-month-view-common").IdsRangeSettings;
+        "__#79@#disableSettings": IdsDisableSettings;
+        "__#79@#currentLegend": import("../ids-month-view/ids-month-view-common").IdsLegendSettings;
+        "__#79@#rangeSettings": import("../ids-month-view/ids-month-view-common").IdsRangeSettings;
         connectedCallback(): void;
         disconnectedCallback(): void;
         disableSettings: IdsDisableSettings;
@@ -57,7 +57,10 @@ declare const Base: {
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
-        appendStyles(): void;
+        appendStyles(): void; /**
+         * Setting for calendar date
+         * @param {Date|string} val user date input
+         */
         "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
@@ -413,7 +416,6 @@ declare const Base: {
         localeAPI: IdsLocale;
         onLocaleChange?: ((locale?: IdsLocale | undefined) => void) | undefined;
         onLanguageChange?: ((locale?: IdsLocale | undefined) => void) | undefined;
-        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -439,7 +441,10 @@ declare const Base: {
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
-        appendStyles(): void;
+        appendStyles(): void; /**
+         * Setting for calendar date
+         * @param {Date|string} val user date input
+         */
         "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
@@ -787,13 +792,12 @@ declare const Base: {
         createViewPickerTemplate(view: "day" | "month" | "week"): string;
         viewPickerConnected(): void;
         attachViewPickerEvents(view: "month" | "week"): void;
-        "__#73@#triggerViewChange"(view: "day" | "month" | "year", activeDate?: Date | undefined): void;
+        "__#78@#triggerViewChange"(view: "day" | "month" | "year", activeDate?: Date | undefined): void;
         triggerDateChange(date: Date, type: string): void;
         getEventById(id: string): CalendarEventData | undefined;
         getEventElemById(id: string): import("./ids-calendar-event").default | null | undefined;
         getEventTypeById(id: string | null): CalendarEventTypeData | undefined;
         setViewPickerValue(val: "day" | "month" | "year"): void;
-        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -820,7 +824,10 @@ declare const Base: {
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
-        appendStyles(): void;
+        appendStyles(): void; /**
+         * Setting for calendar date
+         * @param {Date|string} val user date input
+         */
         "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
@@ -1156,7 +1163,6 @@ declare const Base: {
         locale: string;
         get language(): any;
         set language(value: string);
-        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -1181,7 +1187,10 @@ declare const Base: {
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
-        appendStyles(): void;
+        appendStyles(): void; /**
+         * Setting for calendar date
+         * @param {Date|string} val user date input
+         */
         "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
@@ -1529,25 +1538,27 @@ declare const Base: {
         disconnectedCallback(): void;
         onEvent(eventName: string, target: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: unknown, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        bubbleEvent(evt: CustomEvent<any>): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<unknown> | undefined): void;
         triggerVetoableEvent(eventType: string, data?: any): boolean;
         detachAllEvents(): void;
         detachEventsByName: (eventName: string) => void;
-        "__#5@#addLongPressListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#removeLongPressListener"(): void;
-        "__#5@#addSwipeListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#removeSwipeListener"(): void;
-        "__#5@#addKeyboardFocusListener"(eventName: string, target: Element): void;
-        "__#5@#removeKeyboardFocusListener"(): void;
-        "__#5@#addHoverEndListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#addSlopedMouseLeaveListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#5@#clearSlopedMouseLeaveTimer"(): void;
-        "__#5@#removeSlopedMouseLeaveListener"(): void;
-        "__#5@#addKeyDownEndListener"(target: HTMLElement, options?: Record<string, unknown> | undefined): void;
+        "__#4@#addLongPressListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#removeLongPressListener"(): void;
+        "__#4@#addSwipeListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#removeSwipeListener"(): void;
+        "__#4@#addKeyboardFocusListener"(eventName: string, target: Element): void; /**
+         * Renders an IdsToolbar component with calendar controls
+         * @returns {string} Calendar's IdsToolbar template
+         */
+        "__#4@#removeKeyboardFocusListener"(): void;
+        "__#4@#addHoverEndListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#addSlopedMouseLeaveListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        "__#4@#clearSlopedMouseLeaveTimer"(): void;
+        "__#4@#removeSlopedMouseLeaveListener"(): void;
+        "__#4@#addKeyDownEndListener"(target: HTMLElement, options?: Record<string, unknown> | undefined): void;
         clearTimer(): void;
-        "__#5@#removeHoverEndListener"(): void;
-        "__#5@#removeKeyDownEndListener"(): void;
+        "__#4@#removeHoverEndListener"(): void;
+        "__#4@#removeKeyDownEndListener"(): void;
         name?: string | undefined;
         state: any;
         cachedNonce: string;
@@ -1564,7 +1575,10 @@ declare const Base: {
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
-        appendStyles(): void;
+        appendStyles(): void; /**
+         * Setting for calendar date
+         * @param {Date|string} val user date input
+         */
         "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;