ids-enterprise-wc 1.0.0-beta.21 → 1.0.0-beta.23

package/components/ids-button/ids-button.js

@@ -1 +1 @@
-import{b as a}from"../../chunks/ids-chunk-IKWXI3Z2.js";import"../../chunks/ids-chunk-QIACK2TO.js";import"../../chunks/ids-chunk-UYLFU6GF.js";import"../../chunks/ids-chunk-KM7RG4RU.js";import"../../chunks/ids-chunk-GAAVS4FU.js";import"../../chunks/ids-chunk-4B7RCBPM.js";import"../../chunks/ids-chunk-XN34CTCV.js";import"../../chunks/ids-chunk-7OBD3OM6.js";import"../../chunks/ids-chunk-CY324CVN.js";import"../../chunks/ids-chunk-3X7DPFEQ.js";import"../../chunks/ids-chunk-WCVDZEPA.js";import"../../chunks/ids-chunk-JTLM24AT.js";import"../../chunks/ids-chunk-G3IHRFV3.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-DK5QOJMP.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-57OQ6QPI.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-WIKE6ZX6.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-JMKLW7RS.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-QOTW4DDW.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-JQA4UHEE.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{b as a}from"../../chunks/ids-chunk-CIV4C2EF.js";import"../../chunks/ids-chunk-TS5BNU4J.js";import"../../chunks/ids-chunk-EVHXH7AZ.js";import"../../chunks/ids-chunk-FEKUOSFS.js";import"../../chunks/ids-chunk-SFFMOANB.js";import"../../chunks/ids-chunk-JLFFKOCV.js";import"../../chunks/ids-chunk-RK2P2XSH.js";import"../../chunks/ids-chunk-VVZZ2ZHD.js";import"../../chunks/ids-chunk-VEYEV4RH.js";import"../../chunks/ids-chunk-7GOUFWOD.js";import"../../chunks/ids-chunk-LZU7QFN4.js";import"../../chunks/ids-chunk-J3AAQ3QT.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-K44HS5DC.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-WMUHD4GN.js";import"../../chunks/ids-chunk-QNEN3NVF.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-O4ZHP64Q.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-2HSRRRSM.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-FAEI3K2L.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

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

@@ -84,7 +84,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -219,6 +219,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -289,6 +290,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -409,20 +411,20 @@ declare const Base: {
         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;
+        "__#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;
@@ -471,7 +473,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_17 extends keyof HTMLElementEventMap>(type: K_17, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_17]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -606,6 +608,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -676,6 +679,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/components/ids-calendar/ids-calendar-event.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-CFQBUCLI.js";import"../../chunks/ids-chunk-G3IHRFV3.js";import"../../chunks/ids-chunk-DK5QOJMP.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-WIKE6ZX6.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-JMKLW7RS.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-QOTW4DDW.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-JQA4UHEE.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-5NCNE5U6.js";import"../../chunks/ids-chunk-J3AAQ3QT.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-WMUHD4GN.js";import"../../chunks/ids-chunk-QNEN3NVF.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-O4ZHP64Q.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-2HSRRRSM.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-FAEI3K2L.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

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

@@ -1,245 +1,336 @@
-.ids-calendar-event:not([color]) {
-  background-color: var(--ids-calendar-event-color-background);
+.ids-calendar {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
 }
-.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);
+
+.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):focus {
-  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
+
+.ids-calendar.show-legend .calendar-legend-pane,
+.ids-calendar.show-details .calendar-details-pane {
+  display: block;
 }
-.ids-calendar-event:not([color]):focus {
-  box-shadow: var(--ids-shadow-20);
-  border-color: var(--ids-calendar-event-color-border-focus);
-  outline: none;
+
+.calendar-contents {
+  flex-grow: 1;
 }
 
-.ids-calendar-event[color=blue] {
-  background-color: var(--ids-calendar-event-color-background-accent-blue);
+.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]: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 {
+  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):focus {
-  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
+.calendar-custom-legend.is-populated {
+  display: block;
 }
-.ids-calendar-event[color=blue]:focus {
-  box-shadow: var(--ids-shadow-20);
-  border-color: var(--ids-calendar-event-color-border-focus);
-  outline: none;
+
+ids-toolbar-section::part(container),
+.ids-toolbar-section {
+  align-items: center;
 }
 
-.ids-calendar-event[color=orange] {
-  background-color: var(--ids-calendar-event-color-background-accent-orange);
+.calendar-details-pane ids-accordion-header[color=blue]::part(header) {
+  background-color: var(--ids-color-blue-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=orange]::part(header) {
+  background-color: var(--ids-color-orange-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=purple]::part(header) {
+  background-color: var(--ids-color-purple-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[color=green]::part(header) {
+  background-color: var(--ids-color-green-60);
 }
-
-.ids-calendar-event[color=purple] {
-  background-color: var(--ids-calendar-event-color-background-accent-purple);
+.calendar-details-pane ids-accordion-header[color=red]::part(header) {
+  background-color: var(--ids-color-red-60);
 }
-.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 ids-accordion-header[color=teal]::part(header) {
+  background-color: var(--ids-color-teal-60);
 }
-.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 ids-accordion-header[color=neutral]::part(header) {
+  background-color: var(--ids-color-gray-60);
 }
-.ids-calendar-event[color=purple]: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);
+}
+.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;
+}
+.calendar-details-pane .panel-content hr {
+  border-bottom: none;
+  margin: 20px 0;
 }
 
-.ids-calendar-event[color=green] {
-  background-color: var(--ids-calendar-event-color-background-accent-green);
+ids-accordion-panel::part(content) {
+  padding: 4px 0;
 }
-.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-previous,
+.btn-next {
+  height: 36px;
 }
-.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);
+
+.btn-today-text {
+  color: var(--ids-color-blue-60);
 }
-.ids-calendar-event[color=green]:focus {
-  box-shadow: var(--ids-shadow-20);
-  border-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-gray-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);
   outline: none;
 }
+.calendar-events-list .calendar-detail-content {
+  flex-grow: 1;
+}
+.calendar-events-list .detail-item-duration {
+  padding: 0 8px;
+}
 
-.ids-calendar-event[color=red] {
-  background-color: var(--ids-calendar-event-color-background-accent-red);
+.event-type-label,
+.event-types-legend {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
-.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 {
+  display: none;
+  padding: 10px;
 }
-.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=blue] {
+  background-color: var(--ids-color-blue-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=orange] {
+  background-color: var(--ids-color-orange-60);
 }
-
-.ids-calendar-event[color=teal] {
-  background-color: var(--ids-calendar-event-color-background-accent-turqoise);
+.event-types-legend .event-type-color[color=purple] {
+  background-color: var(--ids-color-purple-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=green] {
+  background-color: var(--ids-color-green-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=red] {
+  background-color: var(--ids-color-red-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-types-legend .event-type-color[color=teal] {
+  background-color: var(--ids-color-teal-60);
 }
-
-.ids-calendar-event[color=neutral] {
-  background-color: var(--ids-calendar-event-color-background-accent-neutral);
+.event-types-legend .event-type-color[color=neutral] {
+  background-color: var(--ids-color-gray-60);
 }
-.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);
+
+.event-type-label {
+  margin: 0 8px;
 }
-.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);
+
+.event-type-color {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 10px;
+  margin: 0 3px;
 }
-.ids-calendar-event[color=neutral]:focus {
-  box-shadow: var(--ids-shadow-20);
-  border-color: var(--ids-calendar-event-color-border-focus);
-  outline: none;
+
+.inline-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
-.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 {
+  width: 320px;
 }
-.ids-calendar-event.standalone {
-  display: block;
-  position: relative;
-  height: unset;
+#event-form-popup::part(popup) {
+  padding-top: 0;
+  padding-bottom: 0;
 }
-.ids-calendar-event .calendar-event-content {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  padding: 2px 5px;
+
+#event-form-header {
+  align-items: center;
+  color: var(--ids-color-gray-10);
+  height: 40px;
+  padding-inline-start: 16px;
+  padding-inline-end: 8px;
+}
+#event-form-header ids-icon[data-action=close] {
+  color: var(--ids-color-gray-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 ids-text {
-  display: block;
+
+#event-form {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 }
-.ids-calendar-event .calendar-event-icon {
-  vertical-align: bottom;
+#event-form #event-form-header[color=blue] {
+  background-color: var(--ids-color-blue-60);
 }
-.ids-calendar-event .calendar-event-icon[icon=success-alert] {
-  color: var(--ids-calendar-event-color-icon-success);
+#event-form #event-form-header[color=orange] {
+  background-color: var(--ids-color-orange-60);
 }
-.ids-calendar-event .calendar-event-icon[icon=alert-alert] {
-  color: var(--ids-calendar-event-color-icon-alert);
+#event-form #event-form-header[color=purple] {
+  background-color: var(--ids-color-purple-60);
 }
-.ids-calendar-event .calendar-event-icon[icon=clock] {
-  color: var(--ids-calendar-event-color-icon-clock);
+#event-form #event-form-header[color=green] {
+  background-color: var(--ids-color-green-60);
 }
-.ids-calendar-event .calendar-event-icon[icon=pending] {
-  color: var(--ids-calendar-event-color-icon-pending);
+#event-form #event-form-header[color=red] {
+  background-color: var(--ids-color-red-60);
 }
-.ids-calendar-event .calendar-event-title {
-  line-height: 12px;
+#event-form #event-form-header[color=teal] {
+  background-color: var(--ids-color-teal-60);
 }
-.ids-calendar-event .calendar-event-title::part(text) {
-  text-transform: initial;
+#event-form #event-form-header[color=neutral] {
+  background-color: var(--ids-color-gray-60);
 }
-.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;
-}
-.ids-calendar-event.reduced-padding .calendar-event-content {
-  padding: 0 5px;
+#event-form ids-date-picker,
+#event-form ids-time-picker {
+  max-width: 128px;
 }
-.ids-calendar-event.reduced-padding .calendar-event-title {
+
+#event-form-content {
+  flex-grow: 1;
+  box-sizing: border-box;
+  padding: 12px 20px;
   position: relative;
-  top: -1.6px;
 }
 
-.ids-calendar-event.all-day {
-  top: 1px;
+#event-form-actions ids-button {
+  flex-grow: 1;
+  border: 1px solid var(--ids-color-gray-40);
+  border-bottom-width: 0;
 }
-.ids-calendar-event.all-day.calendar-event-start, .ids-calendar-event.all-day.calendar-event-continue, .ids-calendar-event.all-day.calendar-event-ends {
+#event-form-actions ids-button::part(button) {
   border-radius: 0;
+  padding-top: 13px;
+  padding-bottom: 13px;
 }
-.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=close] {
+  border-inline-start-width: 0;
 }
-.ids-calendar-event.all-day.calendar-event-continue {
-  width: calc(100% + 2px);
+#event-form-actions ids-button[data-action=submit] {
+  border-inline-end-width: 0;
   margin-inline-start: -1px;
 }
-.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) {
+  color: var(--ids-color-blue-70);
 }
-.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;
+#event-form-actions ids-button[data-action=submit]::part(button):hover {
+  color: var(--ids-color-blue-80);
 }
 
-.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;
+@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%;
+  }
 }