@dso-toolkit/core 62.18.0 → 62.20.0

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

@@ -0,0 +1,104 @@
+:host {
+  display: block;
+  padding: 4px;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.legend-item {
+  display: flex;
+  position: relative;
+}
+.legend-item.legend-item-symbol + .body {
+  margin-inline-start: 38px;
+}
+.legend-item.legend-item-selectable + .body {
+  margin-inline-start: 32px;
+}
+.legend-item.legend-item-selectable.legend-item-symbol + .body {
+  margin-inline-start: 70px;
+}
+
+button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  position: absolute;
+  inset-inline-end: 0;
+}
+button:focus, button:focus-visible {
+  outline-offset: 2px;
+}
+button:active {
+  outline: 0;
+}
+button[disabled] {
+  color: #afcf9d;
+}
+button[disabled].dso-spinner-left, button[disabled].dso-spinner-right {
+  color: #39870c;
+}
+button:not([disabled]):hover {
+  color: #275937;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+button:not([disabled]):active {
+  color: #173521;
+}
+button.dso-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+button.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+button.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+button.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+button > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"legend-item.interfaces.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface LegendItemRemoveClickEvent {\r\n  originalEvent: MouseEvent;\r\n}\r\n"]}

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

@@ -0,0 +1,162 @@
+import { h, Host } from "@stencil/core";
+import clsx from "clsx";
+/**
+ * @slot - Either the label for this legend item or a `dso-selectable` holding the label.
+ * @slot symbol - A span where the symbol is styled upon
+ * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.
+ */
+export class LegendItem {
+    constructor() {
+        this.disabled = false;
+        this.disabledMessage = undefined;
+        this.removable = undefined;
+        this.showBody = false;
+    }
+    get symbolSlottedElement() {
+        return this.host.querySelector("[slot='symbol']");
+    }
+    get selectableSlottedElement() {
+        return this.host.querySelector(":scope > dso-selectable");
+    }
+    get bodySlottedElement() {
+        return this.host.querySelector("[slot='body']");
+    }
+    render() {
+        const hasSymbol = this.symbolSlottedElement !== null;
+        const hasBody = this.bodySlottedElement !== null;
+        const isSelectable = this.selectableSlottedElement !== null;
+        return (h(Host, { key: 'e50f1d84ed48c4fc88ebdf2d473ee0f67bec22fe', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '98ccac5c97c900a0eefe58baa4d69747847b2fbf', class: clsx("legend-item", {
+                "legend-item-symbol": hasSymbol,
+                "legend-item-selectable": isSelectable,
+            }) }, h("div", { key: 'f73cdf97e65e6d50fd8c8e073c2abf902d148511', hidden: !hasSymbol }, h("slot", { key: 'd18b7efd00c137f3b9fe96b00eabbafe9f8c8ae1', name: "symbol" })), h("div", { key: '8a0a4212aa989367d869a949bba1984af4e3d2c1' }, h("slot", { key: '35285a0f129c3d0e64f5925b5e46e1d1246603fd' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '93727ab6ba53cd605b1a0df5a5d14b281653cef7', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '5d72df7e74cc74cb2e5cdede86bace5129c97906', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: '6cb45e90d3e30e709f6bed348ae29e2931c34f11', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: '3ec5613fc71e021bcaca961ab4d858f7aeb408c2', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: '690784310b84fa49590680db6b7ab42aec5e34e8', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'df9051dcd36487f51cbfb6014e4921ce405db3e3', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '8d047e9c90f888a5b3a60c41829845bd1bcd0538', icon: this.showBody ? "times" : "more" })))), h("div", { key: '8f90acc7de95c518749e0cdbd100f38195911dbb', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '9d743680ea76b8daec3ef131ca244603eba4a996', name: "body" }))));
+    }
+    static get is() { return "dso-legend-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["legend-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["legend-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "To disable the Legend Item"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabledMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message to be shown behind a toggletip when the Legend Item is disabled"
+                },
+                "attribute": "disabled-message",
+                "reflect": false
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a trash-can that, when clicked, emits `dsoRemoveClick`."
+                },
+                "attribute": "removable",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showBody": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoRemoveClick",
+                "name": "dsoRemoveClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates the remove button."
+                },
+                "complexType": {
+                    "original": "LegendItemRemoveClickEvent",
+                    "resolved": "LegendItemRemoveClickEvent",
+                    "references": {
+                        "LegendItemRemoveClickEvent": {
+                            "location": "import",
+                            "path": "./legend-item.interfaces",
+                            "id": "src/components/legend-item/legend-item.interfaces.tsx::LegendItemRemoveClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoMouseEnter",
+                "name": "dsoMouseEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the mouse enters the Legend Item"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dsoMouseLeave",
+                "name": "dsoMouseLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the mouse leaves the Legend Item"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=legend-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAClH,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB;;;;GAIG;AAMH,MAAM,OAAO,UAAU;;wBAQV,KAAK;;;wBAiCL,KAAK;;IAEhB,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,wBAAwB;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QACrD,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC;QACjD,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI,CAAC;QAE5D,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAChG,4DACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACzB,oBAAoB,EAAE,SAAS;oBAC/B,wBAAwB,EAAE,YAAY;iBACvC,CAAC;gBAEF,4DAAK,MAAM,EAAE,CAAC,SAAS;oBACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBACN;oBACE,8DAAa,CACT;gBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,CACxC,sEAAe,QAAQ,EAAC,QAAQ,IAAE,IAAI,CAAC,eAAe,CAAiB,CACxE;gBACA,IAAI,CAAC,SAAS,IAAI,CACjB,+DAAQ,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;oBACrG,6DAAM,KAAK,EAAC,SAAS,+BAAgC;oBACrD,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACV;gBAEA,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC5B,+DAAQ,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;oBACpF,6DAAM,KAAK,EAAC,SAAS,6BAA8B;oBACnD,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7C,CACV,CACG;YACN,4DAAK,MAAM,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM;gBACpE,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showBody = false;\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\":scope > dso-selectable\");\r\n  }\r\n\r\n  get bodySlottedElement() {\r\n    return this.host.querySelector(\"[slot='body']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasBody = this.bodySlottedElement !== null;\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div\r\n          class={clsx(\"legend-item\", {\r\n            \"legend-item-symbol\": hasSymbol,\r\n            \"legend-item-selectable\": isSelectable,\r\n          })}\r\n        >\r\n          <div hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div>\r\n            <slot></slot>\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n          {this.removable && (\r\n            <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n              <span class=\"sr-only\">Legenda item verwijderen</span>\r\n              <dso-icon icon=\"trash\"></dso-icon>\r\n            </button>\r\n          )}\r\n\r\n          {hasBody && !this.disabled && (\r\n            <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n              <span class=\"sr-only\">Legenda item aanpassen</span>\r\n              <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n            </button>\r\n          )}\r\n        </div>\r\n        <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n          <slot name=\"body\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}