@dso-toolkit/core 79.0.1 → 80.0.0

package/dist/collection/components/history-item/history-item.css

@@ -0,0 +1,68 @@
+:host {
+  border-block-end: 1px solid #e5e5e5;
+  display: flex;
+  gap: 8px;
+  inline-size: 100%;
+  padding-block: 16px;
+}
+:host:has(.history-item-title a:is(:hover, :focus-visible)) {
+  background-color: #f2f2f2;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host([type=tijdelijk-regelingdeel]) .history-item-status-message {
+  color: #8b4a6a;
+}
+
+:host([type=waarschuwing]) .history-item-status-message {
+  color: #b62f41;
+}
+
+.history-item-date,
+.history-item-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.history-item-date {
+  flex: 0 0 90px;
+}
+
+.history-item-status-message,
+.history-item-warning {
+  display: flex;
+}
+.history-item-status-message dso-icon,
+.history-item-warning dso-icon {
+  flex-shrink: 0;
+  margin-inline-end: 8px;
+}
+
+.history-item-warning {
+  color: #b62f41;
+}
+
+.history-item-title,
+.history-item-explanation,
+.history-item-warning {
+  margin-block-start: 8px;
+  margin-inline-start: 32px;
+}
+
+.title-anchor {
+  color: #39870c;
+  font-weight: 600;
+  text-decoration: none;
+}
+.title-anchor:hover {
+  color: #39870c;
+  text-decoration: underline;
+}
+.title-anchor:visited {
+  color: #39870c;
+}

package/dist/collection/components/history-item/history-item.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=history-item.interfaces.js.map

package/dist/collection/components/history-item/history-item.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"history-item.interfaces.js","sourceRoot":"","sources":["../../../../src/components/history-item/history-item.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type HistoryItemType = \"in-werking\" | \"besluit\" | \"tijdelijk-regelingdeel\" | \"waarschuwing\" | \"ontwerp\";\r\n\r\nexport interface HistoryItemClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}

package/dist/collection/components/history-item/history-item.js

@@ -0,0 +1,133 @@
+import { Fragment, forceUpdate, h, } from "@stencil/core";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+/**
+ * @slot date - The slot to place a string that holds a date in.
+ * @slot status - The slot to place the status message in.
+ * @slot title - An optional slot to place the title in. When used, the property `href` must be set.
+ * @slot explanation - An optional slot to place explanation in.
+ * @slot warning - An optional slot to place a warning in.
+ */
+export class HistoryItem {
+    constructor() {
+        this.typeIcons = {
+            ontwerp: "pencil",
+            "in-werking": "document",
+            "tijdelijk-regelingdeel": "document",
+            waarschuwing: "status-warning-inline",
+            besluit: "hammer",
+        };
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
+    }
+    clickEventHandler(e) {
+        if (!(e.target instanceof HTMLElement) || !this.href) {
+            return;
+        }
+        return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+    }
+    get titleSlottedElement() {
+        return this.host.querySelector("[slot='title']");
+    }
+    get explanationSlottedElement() {
+        return this.host.querySelector("[slot='explanation']");
+    }
+    get warningSlottedElement() {
+        return this.host.querySelector("[slot='warning']");
+    }
+    render() {
+        return (h(Fragment, { key: 'c93c9663ff6b96d34898c0efe2be2adabbbed820' }, h("div", { key: '0167b33d2263c83963a03f5471917a91620710bf', class: "history-item-date" }, h("slot", { key: '8d52fc2eac2ca693122589634d942b60a43b1cc5', name: "date" })), h("div", { key: 'aa930709d2de4545e446e5216f7855af877ec145', class: "history-item-content" }, h("div", { key: 'd608f7e07938862b5bc819abef893a8cc9fd821a', class: "history-item-status-message" }, h("dso-icon", { key: '8482b12318241fd681e9906ef703127875187a25', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'e8800aae35bd1a2548d245a6674cca237cff5c11', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '97134a190b4d4618cdf7911d5ff67b6b3f8468b0', class: "history-item-title" }, h("a", { key: '3f88fcc3ff64dd498f092a5070dd2354fb1831c2', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c5124382a42034793220611c88bada4672d5b6e1', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: 'ce1038df5c5655ee0134557f022245aa91deb348', class: "history-item-explanation" }, h("slot", { key: '25b6ca6163c4b39a4554c55c0b86ef9203811e3b', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '9c0bf88484285a5e48d1aa4cd14336b29070e35e', class: "history-item-warning" }, h("dso-icon", { key: 'cae6adb826b605d58914dc0a2b5fa9d838c0eb8e', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '7de3f72175daa5ea4329af7823880cf7536668da', name: "warning" }))))));
+    }
+    static get is() { return "dso-history-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["history-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["history-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "HistoryItemType",
+                    "resolved": "\"besluit\" | \"in-werking\" | \"ontwerp\" | \"tijdelijk-regelingdeel\" | \"waarschuwing\"",
+                    "references": {
+                        "HistoryItemType": {
+                            "location": "import",
+                            "path": "./history-item.interfaces",
+                            "id": "src/components/history-item/history-item.interfaces.ts::HistoryItemType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of History Item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The optional URL to which the History Item title links. Needs to be provided when slot `title` is used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoClick",
+                "name": "dsoClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the History Item title is clicked."
+                },
+                "complexType": {
+                    "original": "HistoryItemClickEvent",
+                    "resolved": "HistoryItemClickEvent",
+                    "references": {
+                        "HistoryItemClickEvent": {
+                            "location": "import",
+                            "path": "./history-item.interfaces",
+                            "id": "src/components/history-item/history-item.interfaces.ts::HistoryItemClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=history-item.js.map

package/dist/collection/components/history-item/history-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"history-item.js","sourceRoot":"","sources":["../../../../src/components/history-item/history-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HistoryItemClickEvent, HistoryItemType } from \"./history-item.interfaces\";\r\n\r\n/**\r\n * @slot date - The slot to place a string that holds a date in.\r\n * @slot status - The slot to place the status message in.\r\n * @slot title - An optional slot to place the title in. When used, the property `href` must be set.\r\n * @slot explanation - An optional slot to place explanation in.\r\n * @slot warning - An optional slot to place a warning in.\r\n */\r\n@Component({\r\n  tag: \"dso-history-item\",\r\n  styleUrl: \"history-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class HistoryItem implements ComponentInterface {\r\n  private typeIcons: Record<HistoryItemType, string> = {\r\n    ontwerp: \"pencil\",\r\n    \"in-werking\": \"document\",\r\n    \"tijdelijk-regelingdeel\": \"document\",\r\n    waarschuwing: \"status-warning-inline\",\r\n    besluit: \"hammer\",\r\n  };\r\n\r\n  @Element()\r\n  host!: HTMLDsoHistoryItemElement;\r\n\r\n  /**\r\n   * The type of History Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  type!: HistoryItemType;\r\n\r\n  /**\r\n   * The optional URL to which the History Item title links. Needs to be provided when slot `title` is used.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the History Item title is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<HistoryItemClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get titleSlottedElement() {\r\n    return this.host.querySelector(\"[slot='title']\");\r\n  }\r\n\r\n  get explanationSlottedElement() {\r\n    return this.host.querySelector(\"[slot='explanation']\");\r\n  }\r\n\r\n  get warningSlottedElement() {\r\n    return this.host.querySelector(\"[slot='warning']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <div class=\"history-item-date\">\r\n          <slot name=\"date\"></slot>\r\n        </div>\r\n        <div class=\"history-item-content\">\r\n          <div class=\"history-item-status-message\">\r\n            <dso-icon icon={this.typeIcons[this.type]} aria-hidden=\"true\"></dso-icon>\r\n            <slot name=\"status\"></slot>\r\n          </div>\r\n          {this.titleSlottedElement !== null && this.href && (\r\n            <div class=\"history-item-title\">\r\n              <a href={this.href} class=\"title-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                <slot name=\"title\"></slot>\r\n              </a>\r\n            </div>\r\n          )}\r\n          {this.explanationSlottedElement !== null && (\r\n            <div class=\"history-item-explanation\">\r\n              <slot name=\"explanation\"></slot>\r\n            </div>\r\n          )}\r\n          {this.warningSlottedElement !== null && (\r\n            <div class=\"history-item-warning\">\r\n              <dso-icon icon=\"status-warning-inline\" role=\"img\" aria-label=\"Waarschuwing\"></dso-icon>\r\n              <slot name=\"warning\"></slot>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/icon/icon.js

@@ -216,7 +216,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '487ea1db4f0bb118860e08fe8d7fc16ca1705f94', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'b1e25292f9290e70a6328fd2b2318a06b7a7b281', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }