@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/bundle/dso-legend-group.js

@@ -0,0 +1,107 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DmmKAUIT.js';
+import { i as i18n } from './p-FXEjFTzg.js';
+import { d as defineCustomElement$3 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$2 } from './p-CYWYJZS6.js';
+
+const translations = {
+    en: {
+        "dso-legend-group": {
+            edit: "Edit layers",
+            view: "Leave editmode",
+        },
+    },
+    nl: {
+        "dso-legend-group": {
+            edit: "Kaartlagen bewerken",
+            view: "Bewerken verlaten",
+        },
+    },
+};
+
+const legendGroupCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.legend-group-header{position:relative}.legend-group-header ::slotted(h3){margin-block:8px !important;padding-block:4px !important}.legend-group-header dso-icon-button{position:absolute;inset-block-start:0;inset-inline-end:0}`;
+
+const LegendGroup = /*@__PURE__*/ proxyCustomElement(class LegendGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsoLegendGroupModeChange = createEvent(this, "dsoLegendGroupModeChange", 3);
+        this.text = i18n(() => this.host, translations);
+        this.toggleMode = (e) => {
+            this.dsoLegendGroupModeChange.emit({
+                originalEvent: e.detail.originalEvent,
+                next: this.mode === "view" ? "edit" : "view",
+            });
+        };
+    }
+    handleModeChange() {
+        if (this.mode) {
+            const mode = this.mode;
+            this.legendItems.forEach((item) => {
+                item._mode = mode;
+            });
+        }
+    }
+    get legendItems() {
+        return Array.from(this.host.querySelectorAll("dso-legend-item"));
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            // When new legend-items are added, update their mode
+            this.handleModeChange();
+        });
+        this.mutationObserver.observe(this.host, { childList: true });
+        // Initialize child legend-items with current mode
+        this.handleModeChange();
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+        delete this.mutationObserver;
+    }
+    render() {
+        return (h(Host, { key: '4e185d93b6e6d8815aa9321eeffeb046e5da7ae3' }, h("div", { key: '6b5f3de33196e950ee895fc5cd27df23b2d0f2f5', class: "legend-group-header" }, h("slot", { key: 'ddb053565dccf300cbd30d775fbca196e5ee8e84', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'e5b7bf50f3e140b9d5a24a75b14500a3d60c2a8a', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '335dc6acb956623ecc5832a93c055168a16440bd', name: "options" }), h("slot", { key: '7b13d87cda2afd1ac289edbf5a72ae6d580b98a3' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "mode": [{
+                "handleModeChange": 0
+            }]
+    }; }
+    static get style() { return legendGroupCss(); }
+}, [257, "dso-legend-group", {
+        "mode": [513]
+    }, undefined, {
+        "mode": [{
+                "handleModeChange": 0
+            }]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-legend-group", "dso-icon", "dso-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-legend-group":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LegendGroup);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-icon-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoLegendGroup = LegendGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoLegendGroup, defineCustomElement };

package/dist/bundle/dso-legend-item.js

@@ -1,12 +1,32 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-DmmKAUIT.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$8 } from './p-Btk7RWKm.js';
-import { d as defineCustomElement$7 } from './p-DpRZJt_D.js';
-import { d as defineCustomElement$6 } from './p-CVTNNCuw.js';
-import { d as defineCustomElement$5 } from './p-ecEmdirb.js';
-import { d as defineCustomElement$4 } from './p-kBBh-4zI.js';
-import { d as defineCustomElement$3 } from './p-zCo78EB0.js';
-import { d as defineCustomElement$2 } from './p-CBhOl8xD.js';
+import { i as i18n } from './p-FXEjFTzg.js';
+import { d as defineCustomElement$6 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$5 } from './p-CYWYJZS6.js';
+import { d as defineCustomElement$4 } from './p-0JNed3EY.js';
+import { d as defineCustomElement$3 } from './p-cvGwDktk.js';
+import { d as defineCustomElement$2 } from './p-Bbf_KhJ-.js';
+
+const translations = {
+    en: {
+        "dso-legend-item": {
+            delete: "Remove layer",
+            disabledInfo: "More info",
+            options: "Edit layer",
+            makeActive: "Make {{label}} active",
+            makeActiveDefault: "Make active",
+        },
+    },
+    nl: {
+        "dso-legend-item": {
+            delete: "Kaartlaag verwijderen",
+            disabledInfo: "Meer informatie",
+            options: "Kaartlaag bewerken",
+            makeActive: "Maak {{label}} actief",
+            makeActiveDefault: "Maak actief",
+        },
+    },
+};
 
 const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex}.legend-item-right-content dso-slide-toggle{line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
 
@@ -18,21 +38,24 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
         }
         this.__attachShadow();
         this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
+        this.dsoDelete = createEvent(this, "dsoDelete", 3);
         this.dsoMouseEnter = createEvent(this, "dsoMouseEnter", 7);
         this.dsoMouseLeave = createEvent(this, "dsoMouseLeave", 7);
         /**
          * To disable the Legend Item
          */
         this.disabled = false;
+        /** @internal Controls whether this Legend Item is in edit or view mode. Set by the parent Legend Group. */
+        this._mode = "view";
         this.showOptions = false;
+        this.text = i18n(() => this.host, translations);
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
         this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     get symbolSlottedElement() {
@@ -41,30 +64,48 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
     get optionsSlottedElement() {
         return this.host.querySelector("[slot='options']");
     }
+    renderEditMode() {
+        return (h("dso-icon-button", { label: this.text("delete"), icon: "trash", variant: "tertiary", id: "delete-button", onDsoClick: (e) => this.dsoDelete.emit({ originalEvent: e.detail.originalEvent }) }));
+    }
+    renderViewMode(hasOptions, accessibleLabel) {
+        return [
+            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more-horizontal", variant: "tertiary", class: { active: this.showOptions }, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
+            this.activatable && (h("dso-slide-toggle", { accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })),
+        ];
+    }
+    renderRightContent(hasOptions, accessibleLabel) {
+        switch (this._mode) {
+            case "edit":
+                return this.renderEditMode();
+            case "view":
+            default:
+                return this.renderViewMode(hasOptions, accessibleLabel);
+        }
+    }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
         const label = this.host.querySelector("span[slot='label']");
-        let accessibleLabel = "Maak actief";
-        if (label === null || label === void 0 ? void 0 : label.textContent) {
-            accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
-        }
-        return (h(Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '6489bc065e692b8dce8edb7a56d1d5672f8d21cd', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: 'bb79e502289dd11de8db82d78e00bade9b0a451c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
+        const accessibleLabel = label?.textContent
+            ? this.text("makeActive", { label: label.textContent.toLowerCase() })
+            : this.text("makeActiveDefault");
+        return (h(Host, { key: 'c39bfa89a95d20e7a9550e5c19caa42f7d5c176b', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '1ca340e2599addfae284da5883c7ff45aeb408a3', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'cfd02a48d5017f4b87e93eca837980828385945b' }, h("slot", { key: 'b9b16c3371b3a3cf8d93de3916ef73a1298a0e63', name: "symbol" }))), h("div", { key: 'd63790838c091aee94e92b36f10ee9319233dfbf' }, h("slot", { key: '94ae680fac284f1d1af980ae238966caf0297d80', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: 'f4be062dfe27d3b3059b548ec741b1cfc696cb0d', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '0d16d02da41abb247afabf93e6d02c38a42f3c95', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'e17ed90b316afa1c3dd85ec5d08b31bb8601ca36', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'bc2988175f08a8d01f5053a9dcefb52fb04d54e4', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '7bd2ae7a7a621368d6a37d07009da5e135e93266', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss(); }
 }, [257, "dso-legend-item", {
         "disabled": [516],
-        "disabledMessage": [1, "disabled-message"],
+        "disabledMessage": [513, "disabled-message"],
         "activatable": [516],
         "active": [516],
+        "_mode": [513],
         "showOptions": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-scrollable", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
+    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-scrollable", "dso-slide-toggle"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-legend-item":
             if (!customElements.get(transformTag(tagName))) {
@@ -72,36 +113,26 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "dso-info-button":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }
             break;
-        case "dso-scrollable":
+        case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
-        case "dso-slide-toggle":
+        case "dso-info-button":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
-        case "dso-toggletip":
+        case "dso-scrollable":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
-        case "dso-tooltip":
+        case "dso-slide-toggle":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
@@ -113,6 +144,3 @@ const DsoLegendItem = LegendItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoLegendItem, defineCustomElement };
-//# sourceMappingURL=dso-legend-item.js.map
-
-//# sourceMappingURL=dso-legend-item.js.map

package/dist/bundle/dso-legend.js

@@ -1,11 +1,25 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DmmKAUIT.js';
 import { c as clsx } from './p-ChV9xqsO.js';
+import { i as i18n } from './p-FXEjFTzg.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$4 } from './p-Btk7RWKm.js';
-import { d as defineCustomElement$3 } from './p-DpRZJt_D.js';
-import { d as defineCustomElement$2 } from './p-ecEmdirb.js';
+import { d as defineCustomElement$4 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$3 } from './p-CYWYJZS6.js';
+import { d as defineCustomElement$2 } from './p-cvGwDktk.js';
 
-const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
+const translations = {
+    en: {
+        "dso-legend": {
+            closeLegend: "Close legend",
+        },
+    },
+    nl: {
+        "dso-legend": {
+            closeLegend: "Sluit legenda",
+        },
+    },
+};
+
+const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host ::slotted(dso-legend-group:last-child){margin-block-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
 
 const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
     constructor(registerHost) {
@@ -20,6 +34,7 @@ const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
          * TabItems in the legend topbar
          */
         this.tabItems = [];
+        this.text = i18n(() => this.host, translations);
         this.keyUpHandler = (e) => {
             if (!(e.target instanceof H)) {
                 return;
@@ -60,22 +75,20 @@ const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
         return this.tabs[this.tabs.length - 1];
     }
     moveFocusToTab(tab) {
-        tab === null || tab === void 0 ? void 0 : tab.focus();
+        tab?.focus();
     }
     moveFocusToPreviousTab(focussedTab) {
-        var _a;
         const index = this.tabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.tabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        const next = this.tabs[index - 1] ?? this.lastTab;
         this.moveFocusToTab(next);
     }
     moveFocusToNextTab(focussedTab) {
-        var _a;
         const index = this.tabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.tabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        const next = this.tabs[index + 1] ?? this.firstTab;
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+        return (h(Host, { key: '18b65b8e93f592afbd4748e8f740b3e37c8f70ae' }, h("div", { key: '20c1927e8ccc27badc91122fcb39b243c1d9de71', class: "topbar" }, h("div", { key: 'dcd9a8c4cf7bcecdd10ba918e0df47ff6929a8fb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'fa3eb71f4bc538a1df4beda9d62260f9930c9651', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '3ebbfbba7d44ef9470bcc088fca6c799f1c81689', class: "content" }, h("div", { key: '071e22193cd0dd97ca1ba6d73427a5f29ee19d0f', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '33342dceb976c0557e33baa77471621f3e565dea' })))));
     }
     get host() { return this; }
     static get style() { return legendCss(); }
@@ -115,6 +128,3 @@ const DsoLegend = Legend;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoLegend, defineCustomElement };
-//# sourceMappingURL=dso-legend.js.map
-
-//# sourceMappingURL=dso-legend.js.map