@dso-toolkit/core 55.0.0 → 56.0.0

package/dist/components/dso-accordion.js

@@ -1,151 +1,237 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index2.js';
+import { getRenderingRef, forceUpdate, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
 
 const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
   updateVariant(variant = "default") {
-    this.accordionState.variant = variant || "default";
+    this.accordionState.variant = variant;
   }
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
-  updateAllowMultipleOpen(allowMultipleOpen) {
-    this.accordionState.allowMultipleOpen = allowMultipleOpen;
-    if (!allowMultipleOpen) {
-      const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
-      // By removing the first section, it is kept open;
-      openSections.shift();
-      openSections.forEach((section) => this.controlOpenAttribute(section, false));
-    }
-  }
   /**
    * @internal
    */
   async _getState() {
     return this.accordionState;
   }
-  /**
-   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
-   * @param sectionElement The section element that needs to toggle
-   * @param event The event that the user triggered
-   * @returns The state of the section
-   */
-  async toggleSection(sectionElement, event) {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    if (typeof sectionElement === "number") {
-      const section = sections[sectionElement];
-      if (section instanceof HTMLElement) {
-        sectionElement = section;
-      }
-    }
-    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
-      return;
-    }
-    const sectionIsOpen = this.isSectionOpen(sectionElement);
-    if (this.allowMultipleOpen) {
-      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return !sectionIsOpen;
-    }
-    if (sectionIsOpen) {
-      this.controlOpenAttribute(sectionElement, false);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return false;
-    }
-    await this.closeOpenSections();
-    this.controlOpenAttribute(sectionElement, true);
-    this.emitToggleEvent(sectionElement, sections, event);
-    return true;
-  }
-  /**
-   * Emitted when the animation of opening or closing ends.
-   */
-  async animationEnd(sectionElement) {
-    this.dsoToggleSectionAnimationEnd.emit({
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-    });
-  }
-  /**
-   * Closes all sections belonging to this accordion.
-   */
-  async closeOpenSections() {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    const openSections = sections.filter((s) => this.isSectionOpen(s));
-    openSections.forEach((section) => this.controlOpenAttribute(section, false));
-  }
-  // These checks are needed for a React timing issue.
   componentWillLoad() {
-    if (this.accordionState.variant !== this.variant) {
-      this.accordionState.variant = this.variant || "default";
-    }
-    if (this.accordionState.reverseAlign !== this.reverseAlign) {
-      this.accordionState.reverseAlign = this.reverseAlign;
-    }
-    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
-      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
-    }
+    this.accordionState.variant = this.variant;
+    this.accordionState.reverseAlign = this.reverseAlign;
   }
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.dsoToggleSection = createEvent(this, "dsoToggleSection", 7);
-    this.dsoToggleSectionAnimationEnd = createEvent(this, "dsoToggleSectionAnimationEnd", 7);
     this.variant = "default";
     this.reverseAlign = false;
-    this.allowMultipleOpen = false;
-    const { state } = createStore({
-      variant: this.variant || "default",
-      reverseAlign: this.reverseAlign,
-      allowMultipleOpen: this.allowMultipleOpen,
-    });
+    const { state } = createStore({});
     this.accordionState = state;
   }
   render() {
-    return (h(Host, { class: {
-        "dso-accordion": true,
-      } }, h("slot", null)));
-  }
-  emitToggleEvent(sectionElement, sections, e) {
-    this.dsoToggleSection.emit({
-      originalEvent: e,
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-      sections,
-    });
-  }
-  isSectionOpen(sectionElement) {
-    return typeof sectionElement.getAttribute("open") === "string";
-  }
-  controlOpenAttribute(sectionElement, setAttribute) {
-    if (setAttribute) {
-      sectionElement.setAttribute("open", "");
-    }
-    else {
-      sectionElement.removeAttribute("open");
-    }
+    return (h(Host, { class: "dso-accordion" }, h("slot", null)));
   }
   get host() { return this; }
   static get watchers() { return {
     "variant": ["updateVariant"],
-    "reverseAlign": ["updateReverseAlign"],
-    "allowMultipleOpen": ["updateAllowMultipleOpen"]
+    "reverseAlign": ["updateReverseAlign"]
   }; }
   static get style() { return accordionCss; }
 }, [1, "dso-accordion", {
     "variant": [513],
     "reverseAlign": [516, "reverse-align"],
-    "allowMultipleOpen": [516, "allow-multiple-open"],
-    "_getState": [64],
-    "toggleSection": [64],
-    "animationEnd": [64],
-    "closeOpenSections": [64]
+    "_getState": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/dso-accordion.js.map

@@ -1 +1 @@
-{"file":"dso-accordion.js","mappings":"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","names":[],"sources":["./src/components/accordion/accordion.scss?tag=dso-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  Host,\r\n  Method,\r\n  Watch,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n  AccordionInternalState,\r\n  AccordionSectionToggleAnimationEndEvent,\r\n  AccordionSectionToggleEvent,\r\n  AccordionVariant,\r\n} from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  /**\r\n   * Allows multiple sections to be open at the same time.\r\n   */\r\n  @Prop({ reflect: true })\r\n  allowMultipleOpen = false;\r\n\r\n  /**\r\n   * Emitted when a section is toggled.\r\n   *\r\n   * `event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n   * `event.detail.section` contains the toggled section and its new opened value.\\\r\n   * `event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion.\r\n   */\r\n  @Event()\r\n  dsoToggleSection!: EventEmitter<AccordionSectionToggleEvent>;\r\n\r\n  /**\r\n   * Event emitted when the accordion section completes its toggle animation.\r\n   */\r\n  @Event()\r\n  dsoToggleSectionAnimationEnd!: EventEmitter<AccordionSectionToggleAnimationEndEvent>;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant || \"default\";\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  @Watch(\"allowMultipleOpen\")\r\n  updateAllowMultipleOpen(allowMultipleOpen: boolean) {\r\n    this.accordionState.allowMultipleOpen = allowMultipleOpen;\r\n\r\n    if (!allowMultipleOpen) {\r\n      const openSections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section[open]\"));\r\n\r\n      // By removing the first section, it is kept open;\r\n      openSections.shift();\r\n\r\n      openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  /**\r\n   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\r\n   * @param sectionElement The section element that needs to toggle\r\n   * @param event The event that the user triggered\r\n   * @returns The state of the section\r\n   */\r\n  @Method()\r\n  async toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<undefined | boolean> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    if (typeof sectionElement === \"number\") {\r\n      const section = sections[sectionElement];\r\n      if (section instanceof HTMLElement) {\r\n        sectionElement = section;\r\n      }\r\n    }\r\n\r\n    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {\r\n      return;\r\n    }\r\n\r\n    const sectionIsOpen = this.isSectionOpen(sectionElement);\r\n\r\n    if (this.allowMultipleOpen) {\r\n      this.controlOpenAttribute(sectionElement, !sectionIsOpen);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n      return !sectionIsOpen;\r\n    }\r\n\r\n    if (sectionIsOpen) {\r\n      this.controlOpenAttribute(sectionElement, false);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n      return false;\r\n    }\r\n\r\n    await this.closeOpenSections();\r\n\r\n    this.controlOpenAttribute(sectionElement, true);\r\n    this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the animation of opening or closing ends.\r\n   */\r\n  @Method()\r\n  async animationEnd(sectionElement: HTMLElement): Promise<void> {\r\n    this.dsoToggleSectionAnimationEnd.emit({\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes all sections belonging to this accordion.\r\n   */\r\n  @Method()\r\n  async closeOpenSections(): Promise<void> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    const openSections = sections.filter((s) => this.isSectionOpen(s));\r\n    openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n  }\r\n\r\n  // These checks are needed for a React timing issue.\r\n  componentWillLoad() {\r\n    if (this.accordionState.variant !== this.variant) {\r\n      this.accordionState.variant = this.variant || \"default\";\r\n    }\r\n\r\n    if (this.accordionState.reverseAlign !== this.reverseAlign) {\r\n      this.accordionState.reverseAlign = this.reverseAlign;\r\n    }\r\n\r\n    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {\r\n      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;\r\n    }\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({\r\n      variant: this.variant || \"default\",\r\n      reverseAlign: this.reverseAlign,\r\n      allowMultipleOpen: this.allowMultipleOpen,\r\n    });\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion\": true,\r\n        }}\r\n      >\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private emitToggleEvent(sectionElement: HTMLElement, sections: HTMLElement[], e?: MouseEvent): void {\r\n    this.dsoToggleSection.emit({\r\n      originalEvent: e,\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n      sections,\r\n    });\r\n  }\r\n\r\n  private isSectionOpen(sectionElement: HTMLElement): boolean {\r\n    return typeof sectionElement.getAttribute(\"open\") === \"string\";\r\n  }\r\n\r\n  private controlOpenAttribute(sectionElement: HTMLElement, setAttribute: boolean): void {\r\n    if (setAttribute) {\r\n      sectionElement.setAttribute(\"open\", \"\");\r\n    } else {\r\n      sectionElement.removeAttribute(\"open\");\r\n    }\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-accordion.js","mappings":"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","names":[],"sources":["../../node_modules/@stencil/store/dist/index.mjs","./src/components/accordion/accordion.scss?tag=dso-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst unwrap = (val) => (typeof val === 'function' ? val() : val);\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    const unwrappedState = unwrap(defaultState);\n    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        var _a;\n        // When resetting the state, the default state may be a function - unwrap it to invoke it.\n        // otherwise, the state won't be properly reset\n        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(unwrappedState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        // We need to unwrap the defaultState because it might be a function.\n        // Otherwise we might not be sending the right reset value.\n        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import { h, Component, ComponentInterface, Prop, Host, Method, Watch, Element } from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState, AccordionVariant } from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side.\r\n   *\r\n   * Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant;\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordionState.variant = this.variant;\r\n    this.accordionState.reverseAlign = this.reverseAlign;\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({});\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-accordion\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-alert.js

@@ -1,53 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.m.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
-
-const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.status = undefined;
-    this.roleAlert = undefined;
-  }
-  render() {
-    const status = Alert.statusMap.get(this.status);
-    if (!status) {
-      throw new Error(`Invalid status ${this.status}`);
-    }
-    return (h("div", { class: clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, h("dso-icon", { icon: "status-" + this.status }), h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
-  }
-  static get style() { return alertCss; }
-}, [1, "dso-alert", {
-    "status": [1],
-    "roleAlert": [4, "role-alert"]
-  }]);
-Alert.statusMap = new Map([
-  ["success", "Gelukt"],
-  ["info", "Opmerking"],
-  ["warning", "Waarschuwing"],
-  ["error", "Fout"],
-]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-alert", "dso-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-alert":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Alert);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { A as Alert, d as defineCustomElement$1 } from './alert.js';
 
 const DsoAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-alert.js.map

@@ -1 +1 @@
-{"file":"dso-alert.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,83BAA83B;;MCQl4B,KAAK;;;;;;;;EAoBhB,MAAM;IACJ,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,IAAI,CAAC,MAAM,EAAE;MACX,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAClD;IAED,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,IAC3F,gBAAU,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAa,EACpD,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,MAAS,EACtC,eAAa,CACT,EACN;GACH;;;;;;AApBc,eAAS,GAAG,IAAI,GAAG,CAAiB;EACjD,CAAC,SAAS,EAAE,QAAQ,CAAC;EACrB,CAAC,MAAM,EAAE,WAAW,CAAC;EACrB,CAAC,SAAS,EAAE,cAAc,CAAC;EAC3B,CAAC,OAAO,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-top: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  dso-icon {\r\n    @include alert.icon-position();\r\n\r\n    height: units.$u4;\r\n    width: units.$u4;\r\n  }\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop()\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n        <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-alert.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-annotation-button.js

@@ -1,43 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { A as AnnotationService } from './annotation.service.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const annotationButtonCss = "dso-annotation-button{display:block}";
-
-const AnnotationButton = /*@__PURE__*/ proxyCustomElement(class AnnotationButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.identifier = undefined;
-  }
-  componentDidLoad() {
-    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);
-  }
-  render() {
-    return (h("button", { type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": AnnotationService.state[this.identifier] ? "true" : "false", onClick: (e) => { var _a; return (_a = this.annotationOutput) === null || _a === void 0 ? void 0 : _a._toggleAnnotation(e, this.identifier); } }, h("dso-icon", { icon: "label" }), h("span", { class: "sr-only" }, "Toelichting bekijken")));
-  }
-  static get style() { return annotationButtonCss; }
-}, [0, "dso-annotation-button", {
-    "identifier": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-annotation-button", "dso-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-annotation-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AnnotationButton);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { A as AnnotationButton, d as defineCustomElement$1 } from './annotation-button.js';
 
 const DsoAnnotationButton = AnnotationButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-annotation-button.js.map

@@ -1 +1 @@
-{"file":"dso-annotation-button.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,sCAAsC;;MCSrD,gBAAgB;;;;;;EAS3B,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;GAC1G;EAED,MAAM;IACJ,QACE,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,MAAM,GAAG,OAAO,EAC1E,OAAO,EAAE,CAAC,CAAC,eAAK,OAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA,EAAA,IAE5E,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx"],"sourcesContent":["dso-annotation-button {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\r\nimport { AnnotationService } from \"../../services/annotation.service\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // We disable shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n  shadow: false,\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string;\r\n\r\n  private annotationOutput!: HTMLDsoAnnotationOutputElement | null;\r\n\r\n  componentDidLoad() {\r\n    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={AnnotationService.state[this.identifier] ? \"true\" : \"false\"}\r\n        onClick={(e) => this.annotationOutput?._toggleAnnotation(e, this.identifier)}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-annotation-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-annotation-output.js

@@ -1,74 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { A as AnnotationService } from './annotation.service.js';
-import { d as defineCustomElement$4 } from './expandable.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './responsive-element.js';
-
-const annotationOutputCss = "*,*::after,*::before{box-sizing:border-box}dso-annotation-output{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-annotation-header{align-items:center;background-color:#f2f2f2;clear:both;display:flex;margin-bottom:2px;margin-top:8px;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-header>*[slot=title]{color:#000;font-size:1.25rem;margin-bottom:0;margin-top:0}.dso-annotation-header>*:nth-child(2){margin-left:auto}dso-responsive-element[small] .dso-annotation-header,dso-responsive-element[medium] .dso-annotation-header{display:grid;row-gap:8px}dso-responsive-element[small] .dso-annotation-header *[slot=title],dso-responsive-element[medium] .dso-annotation-header *[slot=title]{grid-row:1;grid-column:1}dso-responsive-element[small] .dso-annotation-header *[slot=addons],dso-responsive-element[medium] .dso-annotation-header *[slot=addons]{grid-row:2;grid-column:1;margin-left:initial}dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button{grid-row:1;grid-column:2;margin-left:8px;text-align:end}.dso-annotation-content{background-color:#f2f2f2;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-close-button{margin-left:32px}.dso-annotation-prefix{font-style:italic}";
-
-const AnnotationOutput = /*@__PURE__*/ proxyCustomElement(class AnnotationOutput extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.dsoToggle = createEvent(this, "dsoToggle", 3);
-    this.identifier = undefined;
-    this.annotationPrefix = undefined;
-  }
-  /**
-   * @internal
-   */
-  async _toggleAnnotation(e, identifier) {
-    AnnotationService.toggle(identifier);
-    const open = AnnotationService.state[this.identifier];
-    if (open === undefined) {
-      throw new Error(`No state found for ${this.identifier}`);
-    }
-    this.dsoToggle.emit({
-      originalEvent: e,
-      open,
-    });
-  }
-  toggleHandler(e) {
-    this._toggleAnnotation(e, this.identifier);
-  }
-  render() {
-    const expandableProperties = AnnotationService.state[this.identifier] ? { open: true } : {};
-    return (h("dso-responsive-element", null, h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("div", { slot: "expandable-content" }, this.annotationPrefix && h("span", { class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { class: "dso-annotation-header" }, h("slot", { name: "title" }), h("slot", { name: "addons" }), h("button", { type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: (e) => this.toggleHandler(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Toelichting sluiten"))), h("div", { class: "dso-annotation-content" }, h("slot", null))))));
-  }
-  static get style() { return annotationOutputCss; }
-}, [4, "dso-annotation-output", {
-    "identifier": [1],
-    "annotationPrefix": [1, "annotation-prefix"],
-    "_toggleAnnotation": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-annotation-output", "dso-expandable", "dso-icon", "dso-responsive-element"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-annotation-output":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AnnotationOutput);
-      }
-      break;
-    case "dso-expandable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "dso-responsive-element":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { A as AnnotationOutput, d as defineCustomElement$1 } from './annotation-output.js';
 
 const DsoAnnotationOutput = AnnotationOutput;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-annotation-output.js.map

@@ -1 +1 @@
-{"file":"dso-annotation-output.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,q6CAAq6C;;MCWp7C,gBAAgB;;;;;;;;;;;EAuB3B,MAAM,iBAAiB,CAAC,CAA6B,EAAE,UAAkB;IACvE,iBAAiB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAErC,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACtD,IAAI,IAAI,KAAK,SAAS,EAAE;MACtB,MAAM,IAAI,KAAK,CAAC,sBAAsB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;KAC1D;IAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,aAAa,EAAE,CAAC;MAChB,IAAI;KACL,CAAC,CAAC;GACJ;EAEO,aAAa,CAAC,CAA6B;IACjD,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;GAC5C;EAED,MAAM;IACJ,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;IAE5F,QACE,kCACE,oCAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,IAAM,oBAAoB,GAC3D,WAAK,IAAI,EAAC,oBAAoB,IAC3B,IAAI,CAAC,gBAAgB,IAAI,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,EAC5F,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,YAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,0CAA0C,EAChD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAErC,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,CACL,EACN,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAQ,CACJ,CACF,CACS,CACM,EACzB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/annotation-output/annotation-output.scss?tag=dso-annotation-output","./src/components/annotation-output/annotation-output.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@include utilities.box-sizing();\r\n\r\ndso-annotation-output {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-annotation-header {\r\n  align-items: center;\r\n  background-color: colors.$grijs-5;\r\n  clear: both;\r\n  display: flex;\r\n  margin-bottom: 2px;\r\n  margin-top: units.$u1;\r\n  padding-left: units.$u2;\r\n  padding-right: units.$u1;\r\n  padding-top: units.$u1;\r\n  padding-bottom: units.$u1;\r\n\r\n  > *[slot=\"title\"] {\r\n    color: colors.$zwart;\r\n    font-size: 1.25rem;\r\n    margin-bottom: 0;\r\n    margin-top: 0;\r\n  }\r\n\r\n  > *:nth-child(2) {\r\n    margin-left: auto;\r\n  }\r\n}\r\n\r\ndso-responsive-element[small],\r\ndso-responsive-element[medium] {\r\n  .dso-annotation-header {\r\n    display: grid;\r\n    row-gap: units.$u1;\r\n\r\n    *[slot=\"title\"] {\r\n      grid-row: 1;\r\n      grid-column: 1;\r\n    }\r\n\r\n    *[slot=\"addons\"] {\r\n      grid-row: 2;\r\n      grid-column: 1;\r\n      margin-left: initial;\r\n    }\r\n\r\n    .dso-annotation-close-button {\r\n      grid-row: 1;\r\n      grid-column: 2;\r\n      margin-left: units.$u1;\r\n      text-align: end;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-annotation-content {\r\n  background-color: colors.$grijs-5;\r\n  padding-left: units.$u2;\r\n  padding-right: units.$u1;\r\n  padding-top: units.$u1;\r\n  padding-bottom: units.$u1;\r\n}\r\n\r\n.dso-annotation-close-button {\r\n  margin-left: units.$u4;\r\n}\r\n\r\n.dso-annotation-prefix {\r\n  font-style: italic;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, h, Method, Prop } from \"@stencil/core\";\r\n\r\nimport { AnnotationService } from \"../../services/annotation.service\";\r\nimport { AnnotationToggleEvent } from \"./annotation-output.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // We disable shadowdom for a11y reasons (aria-controls being set inside another component)\r\n  shadow: false,\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop()\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop()\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggle!: EventEmitter<AnnotationToggleEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _toggleAnnotation(e: MouseEvent | KeyboardEvent, identifier: string) {\r\n    AnnotationService.toggle(identifier);\r\n\r\n    const open = AnnotationService.state[this.identifier];\r\n    if (open === undefined) {\r\n      throw new Error(`No state found for ${this.identifier}`);\r\n    }\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open,\r\n    });\r\n  }\r\n\r\n  private toggleHandler(e: MouseEvent | KeyboardEvent) {\r\n    this._toggleAnnotation(e, this.identifier);\r\n  }\r\n\r\n  render() {\r\n    const expandableProperties = AnnotationService.state[this.identifier] ? { open: true } : {};\r\n\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} {...expandableProperties}>\r\n          <div slot=\"expandable-content\">\r\n            {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n            <div class=\"dso-annotation-header\">\r\n              <slot name=\"title\" />\r\n              <slot name=\"addons\" />\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary dso-annotation-close-button\"\r\n                onClick={(e) => this.toggleHandler(e)}\r\n              >\r\n                <dso-icon icon=\"times\"></dso-icon>\r\n                <span class=\"sr-only\">Toelichting sluiten</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"dso-annotation-content\">\r\n              <slot />\r\n            </div>\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-annotation-output.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-autosuggest.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 import { d as defineCustomElement$2 } from './progress-indicator.js';
 import { v as v4 } from './v4.js';