@dso-toolkit/core 62.8.4 → 62.10.0

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -47,12 +47,24 @@ const DsoDatePicker = class {
     this.dsoKeyUp = index.createEvent(this, "dsoKeyUp", 7);
     this.dsoKeyDown = index.createEvent(this, "dsoKeyDown", 7);
     this.dsoFocus = index.createEvent(this, "dsoFocus", 7);
-    this.handleBlur = (event) => {
-      event.stopPropagation();
-      this.dsoBlur.emit({
-        originalEvent: event,
+    this.handleBlur = (e) => {
+      e.stopPropagation();
+      const { target } = e;
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+      const { validity } = target;
+      const { value, valueAsDate } = this.dateValues(target);
+      const error = this.validityToError(validity);
+      const event = {
         component: "dso-date-picker",
-      });
+        originalEvent: e,
+        validity,
+        value,
+        valueAsDate,
+        error,
+      };
+      this.dsoBlur.emit(event);
     };
     this.handleFocus = (event) => {
       event.stopPropagation();
@@ -80,28 +92,17 @@ const DsoDatePicker = class {
       if (!(target instanceof HTMLInputElement)) {
         return;
       }
-      const { valueAsDate, validity } = target;
+      const { validity } = target;
+      const { value, valueAsDate } = this.dateValues(target);
+      const error = this.validityToError(validity);
       const event = {
         component: "dso-date-picker",
         originalEvent: e,
         validity,
-        value: parseToDutchFormat(valueAsDate),
-        valueAsDate: valueAsDate !== null && valueAsDate !== void 0 ? valueAsDate : undefined,
+        value,
+        valueAsDate,
+        error,
       };
-      if (validity.valueMissing) {
-        event.error = "required";
-      }
-      else if (validity.rangeUnderflow) {
-        event.error = "min-range";
-        event.valueAsDate = undefined;
-      }
-      else if (validity.rangeOverflow) {
-        event.error = "max-range";
-        event.valueAsDate = undefined;
-      }
-      else if (!validity.valid) {
-        event.error = "invalid";
-      }
       this.dsoDateChange.emit(event);
     };
     this.name = "dso-date";
@@ -115,6 +116,28 @@ const DsoDatePicker = class {
     this.min = undefined;
     this.max = undefined;
   }
+  dateValues(target) {
+    const { valueAsDate, validity } = target;
+    return {
+      value: parseToDutchFormat(valueAsDate),
+      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,
+    };
+  }
+  validityToError(validity) {
+    if (validity.valueMissing) {
+      return "required";
+    }
+    if (validity.rangeUnderflow) {
+      return "min-range";
+    }
+    if (validity.rangeOverflow) {
+      return "max-range";
+    }
+    if (!validity.valid) {
+      return "invalid";
+    }
+    return undefined;
+  }
   render() {
     var _a;
     return (index.h("input", { type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));

package/dist/cjs/dso-date-picker.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-date-picker.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoBlur.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { valueAsDate, validity } = target;\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: valueAsDate ?? undefined,\r\n    };\r\n\r\n    if (validity.valueMissing) {\r\n      event.error = \"required\";\r\n    } else if (validity.rangeUnderflow) {\r\n      event.error = \"min-range\";\r\n      event.valueAsDate = undefined;\r\n    } else if (validity.rangeOverflow) {\r\n      event.error = \"max-range\";\r\n      event.valueAsDate = undefined;\r\n    } else if (!validity.valid) {\r\n      event.error = \"invalid\";\r\n    }\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-date-picker.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-expandable.cjs.entry.js

@@ -1314,7 +1314,7 @@ anime.easing = parseEasings;
 anime.penner = penner;
 anime.random = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; };
 
-const expandableCss = ":host{display:block;overflow-y:hidden}:host(.dso-hide){display:none}:host(:not(.dso-animate-ready)){position:absolute;visibility:hidden}:host([open]){position:inherit;visibility:inherit}*,*::after,*::before{box-sizing:border-box}";
+const expandableCss = ":host{display:block}:host(.dso-hide){display:none}:host(:not(.dso-animate-ready)){position:absolute;visibility:hidden}:host([open]){position:inherit;visibility:inherit}:host(:not([is-open])){overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}";
 
 const Expandable = class {
   constructor(hostRef) {
@@ -1325,6 +1325,7 @@ const Expandable = class {
     this.enableAnimation = false;
     this.minimumHeight = undefined;
     this.animationReady = false;
+    this.isOpen = this.open;
   }
   toggleOpen() {
     if (this.enableAnimation) {
@@ -1361,7 +1362,7 @@ const Expandable = class {
     return (index.h(index.Host, { "aria-hidden": this.open ? "false" : "true", class: clsx.clsx({
         "dso-animate-ready": this.enableAnimation && this.animationReady,
         "dso-hide": !this.enableAnimation && !this.open,
-      }) }, index.h("slot", null)));
+      }), "is-open": this.isOpen }, index.h("slot", null)));
   }
   prepareAnimationResizeObserver() {
     this.resizeObserver = new ResizeObserver(index$1.debounce_1(([entry]) => {
@@ -1386,7 +1387,10 @@ const Expandable = class {
       autoplay: false,
       direction: "normal",
       changeBegin: () => {
-        this.dsoExpandableAnimationStart.emit({});
+        this.dsoExpandableAnimationStart.emit({
+          currentOpen: !!this.open,
+          nextOpen: !this.open,
+        });
       },
       begin: () => {
         if (this.open) {
@@ -1394,6 +1398,9 @@ const Expandable = class {
           this.host.style.position = "";
           this.host.style.bottom = "";
         }
+        else {
+          this.isOpen = false;
+        }
       },
       complete: () => {
         this.host.style.height = "";
@@ -1402,9 +1409,12 @@ const Expandable = class {
           this.host.style.position = "absolute";
           this.host.style.bottom = "100%";
         }
+        else {
+          this.isOpen = true;
+        }
       },
       changeComplete: () => {
-        this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight });
+        this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });
       },
     });
     if (!this.open) {