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

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

@@ -43,14 +43,14 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
-        "__#4@#addBaseName"(): void;
+        "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#4@#appendHostCss"(): void;
+        "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -70,11 +70,15 @@ declare const Base: {
         readonly offsetTop: number;
         readonly offsetWidth: number;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
         title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         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;
@@ -108,6 +112,7 @@ declare const Base: {
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -238,7 +243,7 @@ declare const Base: {
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;
@@ -265,6 +270,7 @@ declare const Base: {
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
@@ -337,6 +343,7 @@ declare const Base: {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -418,13 +425,13 @@ declare const Base: {
             noStyles?: boolean | undefined;
         } | undefined;
         connectedCallback(): void;
-        "__#4@#addBaseName"(): void;
+        "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#4@#appendHostCss"(): void;
+        "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -444,11 +451,15 @@ declare const Base: {
         readonly offsetTop: number;
         readonly offsetWidth: number;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
         title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         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;
@@ -482,6 +493,7 @@ declare const Base: {
         closest<K_20 extends keyof SVGElementTagNameMap>(selector: K_20): SVGElementTagNameMap[K_20] | null;
         closest<K_21 extends keyof MathMLElementTagNameMap>(selector: K_21): MathMLElementTagNameMap[K_21] | null;
         closest<E_3 extends Element = Element>(selectors: string): E_3 | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -612,7 +624,7 @@ declare const Base: {
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;
@@ -639,6 +651,7 @@ declare const Base: {
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
@@ -711,6 +724,7 @@ declare const Base: {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -910,5 +924,15 @@ export default class IdsCalendarEvent extends Base {
      * @returns {string} dateKey string
      */
     get dateKey(): string;
+    /**
+     * Set disabled property
+     * @param {boolean|string|null} val disabled value
+     */
+    set disabled(val: boolean | string | null);
+    /**
+     * Get disabled property
+     * @returns {boolean} disabled value
+     */
+    get disabled(): boolean;
 }
 export {};

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

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-H2YLORNF.js";import"../../chunks/ids-chunk-MXFCUDLP.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-DCNGT4R2.js";import"../../chunks/ids-chunk-CS7RTATZ.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-ZVK34T2N.js";import"../../chunks/ids-chunk-N7P4D4N3.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-6EMRTLSG.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-QMM56NA3.js";import"../../chunks/ids-chunk-PHQEFZRD.js";import"../../chunks/ids-chunk-CT5U7IVV.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-4WDX2CDM.js";import"../../chunks/ids-chunk-MJGRLEUU.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-ZKFSRERX.js";import"../../chunks/ids-chunk-SDTXNG6G.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-VEAPPKDG.js";import"../../chunks/ids-chunk-NSM2KAOK.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

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

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