@dso-toolkit/core 73.2.1 → 74.0.0

package/dist/bundle/dso-modal.js

@@ -0,0 +1,133 @@
+import { p as proxyCustomElement, H, e as createEvent, h } from './p-DHO_Za64.js';
+import { g as getActiveElement } from './p-CodDyi2J.js';
+import { i as i18n } from './p-B_kXuEcW.js';
+import { d as defineCustomElement$3 } from './p-D2nuXSd0.js';
+import { d as defineCustomElement$2 } from './p-DGWbWwct.js';
+import { v as v4 } from './p-BF0_OXTe.js';
+
+const translations = {
+    en: {
+        "dso-modal": {
+            close: "Close",
+            dialog: "Dialog",
+        },
+    },
+    nl: {
+        "dso-modal": {
+            close: "Sluiten",
+            dialog: "Dialoog",
+        },
+    },
+};
+
+const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
+
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoClose = createEvent(this, "dsoClose", 7);
+        this.ariaId = v4();
+        /**
+         * the role for the modal `dialog` | `alert` | `alertdialog`.
+         */
+        this.dialogRole = "dialog";
+        /**
+         * The element to return focus to after the modal is closed.
+         *
+         * * `undefined` will return focus to the previously focused element (default).
+         * * `false` will not return focus to any element.
+         * * or, provide your own `HTMLElement` that will receive focus upon closing.
+         */
+        this.returnFocus = undefined;
+        /**
+         * when `false` the close button in the header will not be rendered.
+         *
+         * Needs `modalTitle` to be set.
+         */
+        this.closable = false;
+        this.text = i18n(() => this.host, translations);
+        this.blockEscapeKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                if (this.closable) {
+                    this.dsoClose.emit({ originalEvent: e });
+                }
+            }
+        };
+    }
+    get hasFooter() {
+        return this.host.querySelector("[slot='footer']") !== null;
+    }
+    componentDidLoad() {
+        var _a;
+        if ((_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            const activeElement = getActiveElement();
+            if (activeElement instanceof H) {
+                this.returnFocusElement = activeElement;
+            }
+            this.htmlDialogElement.showModal();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.close();
+        if (this.returnFocus === false) {
+            return;
+        }
+        (_c = ((_b = this.returnFocus) !== null && _b !== void 0 ? _b : this.returnFocusElement)) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    handleDialogClick(e) {
+        if (!this.closable) {
+            return;
+        }
+        if (e.target === this.htmlDialogElement) {
+            this.dsoClose.emit({ originalEvent: e });
+        }
+    }
+    render() {
+        var _a;
+        return (h("dialog", { key: '3f82d0319743f333024c6e9924c08d48f85b738b', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'd94bad5e57a1b0c0a84e1bf5e27570df1ec00f20', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'cabd78ee548c897ea0402b885ced40f0091c3b9d' }, h("div", { key: 'df07ed09a89f9d450878d51977bda22009de6ab3', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'ec5c000202ed7c47bc752cf45a5ddfc88df8120f', name: "body" }))), this.hasFooter && (h("div", { key: '7fa17d42d7b3d73360bb2ea302b7fe2e64b0ffc3', class: "dso-footer" }, h("slot", { key: '984f518013234ca807597c9287ff652211bd5794', name: "footer" }))))));
+    }
+    get host() { return this; }
+    static get style() { return modalCss; }
+}, [1, "dso-modal", {
+        "fullscreen": [516],
+        "modalTitle": [1, "modal-title"],
+        "dialogRole": [1, "dialog-role"],
+        "returnFocus": [4, "return-focus"],
+        "closable": [4],
+        "ariaId": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-modal", "dso-icon", "dso-scrollable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Modal);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-scrollable":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoModal = Modal;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoModal, defineCustomElement };
+//# sourceMappingURL=dso-modal.js.map
+
+//# sourceMappingURL=dso-modal.js.map

package/dist/bundle/dso-modal.js.map

@@ -0,0 +1 @@
+{"file":"dso-modal.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user:\r\n   * - clicks the close button\r\n   * - dismisses the Modal with the Escape button\r\n   * - clicks or taps outside the Modal\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  private handleDialogClick(e: MouseEvent) {\r\n    if (!this.closable) {\r\n      return;\r\n    }\r\n\r\n    if (e.target === this.htmlDialogElement) {\r\n      this.dsoClose.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  private blockEscapeKey = (e: KeyboardEvent) => {\r\n    if (e.key === \"Escape\") {\r\n      e.preventDefault();\r\n\r\n      if (this.closable) {\r\n        this.dsoClose.emit({ originalEvent: e });\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onClick={(e) => this.handleDialogClick(e)}\r\n        onKeyDown={(e) => this.blockEscapeKey(e)}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.closable && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-onboarding-tip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoOnboardingTip extends Components.DsoOnboardingTip, HTMLElement {}
+export const DsoOnboardingTip: {
+    prototype: DsoOnboardingTip;
+    new (): DsoOnboardingTip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;