ids-enterprise-wc 1.0.0-beta.14 → 1.0.0-beta.16

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

@@ -1,314 +1,240 @@
-.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=azure] {
+  background-color: var(--ids-calendar-event-color-background-accent-azure);
 }
-
-ids-toolbar-section::part(container),
-.ids-toolbar-section {
-  align-items: center;
+.ids-calendar-event[color=azure]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-azuret-azure);
 }
-
-.calendar-details-pane ids-accordion-header[color=azure]::part(header) {
-  background-color: var(--ids-color-azure-60);
+.ids-calendar-event[color=azure]: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=amber]::part(header) {
-  background-color: var(--ids-color-amber-60);
+.ids-calendar-event[color=azure]: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=amethyst]::part(header) {
-  background-color: var(--ids-color-amethyst-60);
+
+.ids-calendar-event[color=amber] {
+  background-color: var(--ids-calendar-event-color-background-accent-amber);
 }
-.calendar-details-pane ids-accordion-header[color=emerald]::part(header) {
-  background-color: var(--ids-color-emerald-60);
+.ids-calendar-event[color=amber]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-amber);
 }
-.calendar-details-pane ids-accordion-header[color=ruby]::part(header) {
-  background-color: var(--ids-color-ruby-60);
+.ids-calendar-event[color=amber]: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=turquoise]::part(header) {
-  background-color: var(--ids-color-turquoise-60);
+.ids-calendar-event[color=amber]: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=slate]::part(header) {
-  background-color: var(--ids-color-neutral-60);
+
+.ids-calendar-event[color=amethyst] {
+  background-color: var(--ids-calendar-event-color-background-accent-amethyst);
 }
-.calendar-details-pane ids-accordion-header::part(header) {
-  color: var(--ids-color-neutral-00);
+.ids-calendar-event[color=amethyst]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-amethyst);
 }
-.calendar-details-pane ids-accordion-header ids-text::part(text) {
-  overflow: hidden;
-  width: 150px;
-  white-space: nowrap;
-}
-.calendar-details-pane .panel-content {
-  padding-top: 15px;
-  padding-bottom: 15px;
+.ids-calendar-event[color=amethyst]: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=amethyst]: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=emerald] {
+  background-color: var(--ids-calendar-event-color-background-accent-emerald);
 }
-
-.btn-previous,
-.btn-next {
-  height: 36px;
+.ids-calendar-event[color=emerald]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-emerald);
 }
-
-.btn-today-text {
-  color: var(--ids-color-azure-60);
+.ids-calendar-event[color=emerald]: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=azure] {
-  border-inline-start-color: var(--ids-color-azure-60);
-}
-.calendar-events-list .detail-item[color=amber] {
-  border-inline-start-color: var(--ids-color-amber-60);
-}
-.calendar-events-list .detail-item[color=amethyst] {
-  border-inline-start-color: var(--ids-color-amethyst-60);
-}
-.calendar-events-list .detail-item[color=emerald] {
-  border-inline-start-color: var(--ids-color-emerald-60);
-}
-.calendar-events-list .detail-item[color=ruby] {
-  border-inline-start-color: var(--ids-color-ruby-60);
-}
-.calendar-events-list .detail-item[color=turquoise] {
-  border-inline-start-color: var(--ids-color-turquoise-60);
-}
-.calendar-events-list .detail-item[color=slate] {
-  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=emerald]: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=ruby] {
+  background-color: var(--ids-calendar-event-color-background-accent-ruby);
 }
-.event-types-legend .event-type-color[color=azure] {
-  background-color: var(--ids-color-azure-60);
+.ids-calendar-event[color=ruby]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-ruby);
 }
-.event-types-legend .event-type-color[color=amber] {
-  background-color: var(--ids-color-amber-60);
+.ids-calendar-event[color=ruby]: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=amethyst] {
-  background-color: var(--ids-color-amethyst-60);
-}
-.event-types-legend .event-type-color[color=emerald] {
-  background-color: var(--ids-color-emerald-60);
+.ids-calendar-event[color=ruby]: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=ruby] {
-  background-color: var(--ids-color-ruby-60);
+
+.ids-calendar-event[color=turquoise] {
+  background-color: var(--ids-calendar-event-color-background-accent-turqoise);
 }
-.event-types-legend .event-type-color[color=turquoise] {
-  background-color: var(--ids-color-turquoise-60);
+.ids-calendar-event[color=turquoise]: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=slate] {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event[color=turquoise]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-.event-type-label {
-  margin: 0 8px;
+.ids-calendar-event[color=turquoise]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-.event-type-color {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 10px;
-  margin: 0 3px;
+.ids-calendar-event[color=slate] {
+  background-color: var(--ids-calendar-event-color-background-accent-slate);
 }
-
-.inline-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.ids-calendar-event[color=slate]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-slate);
 }
-
-#event-form-popup {
-  width: 320px;
+.ids-calendar-event[color=slate]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-#event-form-popup::part(popup) {
-  padding-top: 0;
-  padding-bottom: 0;
+.ids-calendar-event[color=slate]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-#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 {
+  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 {
-  display: flex;
-  flex-direction: column;
+.ids-calendar-event .calendar-event-content {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  padding: 2px 5px;
+}
+.ids-calendar-event .calendar-event-content ids-text {
+  display: block;
   width: 100%;
   height: 100%;
 }
-#event-form #event-form-header[color=azure] {
-  background-color: var(--ids-color-azure-60);
+.ids-calendar-event .calendar-event-icon {
+  vertical-align: bottom;
 }
-#event-form #event-form-header[color=amber] {
-  background-color: var(--ids-color-amber-60);
+.ids-calendar-event .calendar-event-icon[icon=success-alert] {
+  color: var(--ids-calendar-event-color-icon-success);
 }
-#event-form #event-form-header[color=amethyst] {
-  background-color: var(--ids-color-amethyst-60);
+.ids-calendar-event .calendar-event-icon[icon=alert-alert] {
+  color: var(--ids-calendar-event-color-icon-alert);
 }
-#event-form #event-form-header[color=emerald] {
-  background-color: var(--ids-color-emerald-60);
+.ids-calendar-event .calendar-event-icon[icon=clock] {
+  color: var(--ids-calendar-event-color-icon-clock);
 }
-#event-form #event-form-header[color=ruby] {
-  background-color: var(--ids-color-ruby-60);
+.ids-calendar-event .calendar-event-icon[icon=pending] {
+  color: var(--ids-calendar-event-color-icon-pending);
 }
-#event-form #event-form-header[color=turquoise] {
-  background-color: var(--ids-color-turquoise-60);
+.ids-calendar-event .calendar-event-title {
+  line-height: 12px;
 }
-#event-form #event-form-header[color=slate] {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event .calendar-event-title::part(text) {
+  text-transform: initial;
 }
-#event-form ids-list-box {
-  max-width: 278px;
+.ids-calendar-event.is-cutoff {
+  border-radius: 3px 3px 0 0;
 }
-#event-form ids-list-box-option {
-  text-align: left;
+.ids-calendar-event.is-ellipsis .calendar-event-content {
+  white-space: nowrap;
 }
-#event-form ids-date-picker,
-#event-form ids-time-picker {
-  max-width: 128px;
+.ids-calendar-event.reduced-padding .calendar-event-content {
+  padding: 0 5px;
 }
-
-#event-form-content {
-  flex-grow: 1;
-  box-sizing: border-box;
-  padding: 12px 20px;
+.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-azure-70);
+.ids-calendar-event.all-day.calendar-event-ends {
+  border-end-end-radius: 3px;
+  border-start-end-radius: 3px;
+}
+.ids-calendar-event.all-day.calendar-event-continue ids-icon, .ids-calendar-event.all-day.calendar-event-ends ids-icon {
+  visibility: hidden;
 }
-#event-form-actions ids-button[data-action=submit]::part(button):hover {
-  color: var(--ids-color-azure-80);
+.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 ids-date-picker,
-  #event-form-content ids-time-picker {
-    max-width: unset;
-  }
-  #event-form-content .inline-container {
-    display: block;
-  }
+.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

@@ -38,13 +38,10 @@ declare const Base: {
         getFormattedDate(date: string | Date): string;
         getDateValue(date: string | Date | null): Date | null;
         onDayChange?(newValue: number, isValid: boolean): void;
-        onFirstDayOfWeekChange?(newValue: number | null): void;
+        onFirstDayOfWeekChange?(newValue: number): void;
         onFormatChange?(newValue: string | null): void;
         onMonthChange?(newValue: number, isValid: boolean): void;
         onYearChange?(newValue: number, isValid: boolean): void;
-        locale: string;
-        language: string;
-        setDirection(): void;
         localeAPI: IdsLocale;
         onLocaleChange?: ((locale?: IdsLocale | undefined) => void) | undefined;
         onLanguageChange?: ((locale?: IdsLocale | undefined) => void) | undefined;
@@ -67,13 +64,13 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
-        "__#2@#addBaseName"(): void;
+        "__#4@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#2@#appendHostCss"(): void;
+        "__#4@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -396,8 +393,8 @@ declare const Base: {
     readonly attributes: any[];
 } & {
     new (...args: any[]): {
-        "__#103@#eventsData": CalendarEventData[];
-        "__#103@#eventTypesData": CalendarEventTypeData[];
+        "__#106@#eventsData": CalendarEventData[];
+        "__#106@#eventTypesData": CalendarEventTypeData[];
         eventsData: CalendarEventData[];
         eventTypesData: CalendarEventTypeData[];
         beforeEventsRender: ((startDate: Date, endDate: Date) => Promise<CalendarEventData[]>) | null;
@@ -409,7 +406,7 @@ declare const Base: {
         createViewPickerTemplate(view: "day" | "month" | "week"): string;
         viewPickerConnected(): void;
         attachViewPickerEvents(view: "month" | "week"): void;
-        "__#103@#triggerViewChange"(view: "day" | "month" | "year", activeDate?: Date | undefined): void;
+        "__#106@#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;
@@ -435,14 +432,14 @@ declare const Base: {
             noStyles?: boolean | undefined;
         } | undefined;
         connectedCallback(): void;
-        "__#2@#addBaseName"(): void;
+        "__#4@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#2@#appendHostCss"(): void;
+        "__#4@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -765,17 +762,10 @@ declare const Base: {
     readonly attributes: any[];
 } & {
     new (...args: any[]): {
-        localeAPI: IdsLocale;
+        readonly localeAPI: IdsLocale;
         connectedCallback(): void;
-        setLanguage(value: string): Promise<void>;
-        previousLanguage: string;
-        language: any;
-        "__#5@#notifyChildrenLanguage"(children: NodeListOf<HTMLElement>, language: string, previousLanguage: string): void;
-        previousLocale: string;
-        setLocale(value: string): Promise<void>;
         locale: string;
-        "__#5@#notifyChildrenLocale"(children: NodeListOf<HTMLElement>, locale: string, previousLocale: string): void;
-        setDirection(): void;
+        language: any;
         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;
@@ -793,14 +783,14 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
-        "__#2@#addBaseName"(): void;
+        "__#4@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#2@#appendHostCss"(): void;
+        "__#4@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -1144,20 +1134,20 @@ declare const Base: {
         triggerVetoableEvent(eventType: string, data?: any): boolean;
         detachAllEvents(): void;
         detachEventsByName: (eventName: string) => void;
-        "__#3@#addLongPressListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#3@#removeLongPressListener"(): void;
-        "__#3@#addSwipeListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#3@#removeSwipeListener"(): void;
-        "__#3@#addKeyboardFocusListener"(eventName: string, target: Element): void;
-        "__#3@#removeKeyboardFocusListener"(): void;
-        "__#3@#addHoverEndListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#3@#addSlopedMouseLeaveListener"(eventName: string, target: Element, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
-        "__#3@#clearSlopedMouseLeaveTimer"(): void;
-        "__#3@#removeSlopedMouseLeaveListener"(): void;
-        "__#3@#addKeyDownEndListener"(target: HTMLElement, options?: Record<string, unknown> | undefined): 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;
         clearTimer(): void;
-        "__#3@#removeHoverEndListener"(): void;
-        "__#3@#removeKeyDownEndListener"(): void;
+        "__#5@#removeHoverEndListener"(): void;
+        "__#5@#removeKeyDownEndListener"(): void;
         name?: string | undefined;
         state: Record<string, any>;
         cachedNonce: string;
@@ -1168,13 +1158,13 @@ declare const Base: {
             noStyles?: boolean | undefined;
         } | undefined;
         connectedCallback(): void;
-        "__#2@#addBaseName"(): void;
+        "__#4@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#2@#appendHostCss"(): void;
+        "__#4@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -1674,5 +1664,6 @@ export default class IdsCalendar extends Base {
      * @returns {string} locale formatted month range
      */
     formatMonthRange(locale?: IdsLocale): string;
+    onFirstDayOfWeekChange(newValue: number): void;
 }
 export {};