@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/components/dso-logo.js

@@ -1,204 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, transformTag } from '@stencil/core/internal/client';
-import { i as isModifiedEvent } from './is-modified-event.js';
-
-const logoCss = () => `:host {
-  block-size: var(--_dso-logo-block-size, 3rem);
-  display: grid;
-  grid-template-areas: "target wordmark label";
-  grid-template-columns: repeat(3, max-content);
-  grid-template-rows: 100%;
-  gap: 16px;
-  font-size: 1.5rem;
-  font-weight: 500;
-  align-items: center;
-  container-type: size;
-  container-name: logo;
-}
-:host .logo-url,
-:host .logo-label-url {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  text-decoration: none;
-}
-:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,
-:host .logo-label-url:hover,
-:host .logo-label-url:focus-visible,
-:host .logo-label-url:active {
-  text-decoration: underline;
-}
-:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,
-:host .logo-label-url,
-:host .logo-label-url:hover,
-:host .logo-label-url:focus,
-:host .logo-label-url:visited {
-  color: #275937;
-}
-
-:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) {
-  grid-template-areas: "targetwordmark label";
-}
-:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,
-:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon {
-  grid-area: targetwordmark;
-}
-
-.logo-label-url {
-  grid-area: label;
-}
-
-.logo-target {
-  grid-area: target;
-  max-block-size: 48px;
-  max-inline-size: 48px;
-  inline-size: 100%;
-  display: block;
-  aspect-ratio: 1/1;
-}
-
-.logo-wordmark {
-  grid-area: wordmark;
-}
-
-@container logo (max-height: 47px) {
-  .logo-wordmark,
-  .logo-label {
-    font-size: 50cqb;
-    line-height: 1;
-  }
-}
-.logo-wordmark-omgevings {
-  color: #39870c;
-}
-
-.logo-wordmark-loket {
-  color: #275937;
-}
-
-.logo-label {
-  grid-area: label;
-  color: #275937;
-  margin-inline-start: 1rem;
-}
-
-.logo-ribbon {
-  grid-area: wordmark;
-  place-self: start end;
-  display: flex;
-  place-items: center;
-  background-color: #8b4a6a;
-  border-radius: 3px;
-  transform: rotate(3deg);
-  padding-block: 0;
-  padding-inline: 8px;
-  font-size: 0.75rem;
-  font-weight: normal;
-  text-transform: uppercase;
-  color: #fff;
-}
-@container logo (max-height: 47px) {
-  .logo-ribbon {
-    block-size: 28cqb;
-    font-size: 25cqb;
-  }
-}
-
-.inner {
-  fill: #e17000;
-}
-
-.middle {
-  fill: #275937;
-}
-
-.outer {
-  fill: #80bc00;
-}
-
-@media screen and (max-width: 767px) {
-  :host([label]) {
-    grid-template-areas: "target label";
-    grid-template-columns: max-content minmax(130px, max-content);
-  }
-  :host([label]) .logo-wordmark {
-    display: none;
-  }
-  :host([label]) .logo-ribbon {
-    grid-area: label;
-  }
-  :host([label]) .logo-label {
-    margin-inline-start: 0;
-    text-wrap: balance;
-    overflow-wrap: normal;
-  }
-  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {
-    grid-area: label;
-  }
-}
-@media screen and (max-width: 480px) {
-  .logo-ribbon {
-    transform: rotate(3deg) translateY(-7px);
-  }
-}`;
-
-const DsoLogo$1 = ({ name }) => {
-    const splittedName = name.split("|");
-    return (h(Fragment, null, h("svg", { fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, h("path", { class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), h("path", { class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), h("path", { class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), h("div", { class: "logo-wordmark" }, h("span", { class: "logo-wordmark-omgevings" }, splittedName[0]), splittedName.length === 2 && h("span", { class: "logo-wordmark-loket" }, splittedName[1]))));
-};
-const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoLogoClick = createEvent(this, "dsoLogoClick", 7);
-        this.dsoLabelClick = createEvent(this, "dsoLabelClick", 7);
-        /**
-         * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a
-         * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be
-         * shown in bosgroen.
-         * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in
-         * bosgroen.
-         */
-        this.name = "Omgevings|loket";
-        this.handleLogoClick = (e) => {
-            this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl, isModifiedEvent: isModifiedEvent(e) });
-        };
-        this.handleLabelClick = (e) => {
-            this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl, isModifiedEvent: isModifiedEvent(e) });
-        };
-    }
-    render() {
-        return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
-    }
-    static get style() { return logoCss(); }
-}, [257, "dso-logo", {
-        "name": [513],
-        "logoUrl": [513, "logo-url"],
-        "label": [513],
-        "labelUrl": [513, "label-url"],
-        "ribbon": [513]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-logo"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-logo":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Logo);
-            }
-            break;
-    } });
-}
-
-const DsoLogo = Logo;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoLogo, defineCustomElement };
-//# sourceMappingURL=dso-logo.js.map
-
-//# sourceMappingURL=dso-logo.js.map
+import{proxyCustomElement as o,HTMLElement as l,createEvent as e,h as r,Fragment as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./is-modified-event.js";const s=({name:o})=>{const l=o.split("|");return r(t,null,r("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},r("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),r("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),r("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),r("div",{class:"logo-wordmark"},r("span",{class:"logo-wordmark-omgevings"},l[0]),2===l.length&&r("span",{class:"logo-wordmark-loket"},l[1])))},n=o(class extends l{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoLogoClick=e(this,"dsoLogoClick",7),this.dsoLabelClick=e(this,"dsoLabelClick",7),this.name="Omgevings|loket",this.handleLogoClick=o=>{this.dsoLogoClick.emit({originalEvent:o,url:this.logoUrl,isModifiedEvent:i(o)})},this.handleLabelClick=o=>{this.dsoLabelClick.emit({originalEvent:o,url:this.labelUrl,isModifiedEvent:i(o)})}}render(){return r(t,null,this.logoUrl?r("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},r(s,{name:this.name})):r(s,{name:this.name}),this.label&&(this.labelUrl?r("a",{class:"logo-label-url",href:this.labelUrl,onClick:this.handleLabelClick},r("span",{class:"logo-label"},this.label)):r("span",{class:"logo-label"},this.label)),this.ribbon&&r("div",{key:"609cde8cd31ab2b9591fae3ecebb31e44a8069a9",class:"logo-ribbon"},this.ribbon))}static get style(){return':host{block-size:var(--_dso-logo-block-size, 3rem);display:grid;grid-template-areas:"target wordmark label";grid-template-columns:repeat(3, max-content);grid-template-rows:100%;gap:16px;font-size:1.5rem;font-weight:500;align-items:center;container-type:size;container-name:logo}:host .logo-url,:host .logo-label-url{display:flex;align-items:center;gap:16px;text-decoration:none}:host .logo-url:hover,:host .logo-url:focus-visible,:host .logo-url:active,:host .logo-label-url:hover,:host .logo-label-url:focus-visible,:host .logo-label-url:active{text-decoration:underline}:host .logo-url,:host .logo-url:hover,:host .logo-url:focus,:host .logo-url:visited,:host .logo-label-url,:host .logo-label-url:hover,:host .logo-label-url:focus,:host .logo-label-url:visited{color:#275937}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])){grid-template-areas:"targetwordmark label"}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon{grid-area:targetwordmark}.logo-label-url{grid-area:label}.logo-target{grid-area:target;max-block-size:48px;max-inline-size:48px;inline-size:100%;display:block;aspect-ratio:1/1}.logo-wordmark{grid-area:wordmark}@container logo (max-height: 47px){.logo-wordmark,.logo-label{font-size:50cqb;line-height:1}}.logo-wordmark-omgevings{color:#39870c}.logo-wordmark-loket{color:#275937}.logo-label{grid-area:label;color:#275937;margin-inline-start:1rem}.logo-ribbon{grid-area:wordmark;place-self:start end;display:flex;place-items:center;background-color:#8b4a6a;border-radius:3px;transform:rotate(3deg);padding-block:0;padding-inline:8px;font-size:0.75rem;font-weight:normal;text-transform:uppercase;color:#fff}@container logo (max-height: 47px){.logo-ribbon{block-size:28cqb;font-size:25cqb}}.inner{fill:#e17000}.middle{fill:#275937}.outer{fill:#80bc00}@media screen and (max-width: 767px){:host([label]){grid-template-areas:"target label";grid-template-columns:max-content minmax(130px, max-content)}:host([label]) .logo-wordmark{display:none}:host([label]) .logo-ribbon{grid-area:label}:host([label]) .logo-label{margin-inline-start:0;text-wrap:balance;overflow-wrap:normal}:host([logo-url][ribbon]) .logo-label-url+.logo-ribbon{grid-area:label}}@media screen and (max-width: 480px){.logo-ribbon{transform:rotate(3deg) translateY(-7px)}}'}},[1,"dso-logo",{name:[513],logoUrl:[513,"logo-url"],label:[513],labelUrl:[513,"label-url"],ribbon:[513]}]),g=n,b=function(){"undefined"!=typeof customElements&&["dso-logo"].forEach((o=>{"dso-logo"===o&&(customElements.get(a(o))||customElements.define(a(o),n))}))};export{g as DsoLogo,b as defineCustomElement}

package/dist/components/dso-map-base-layers.js

@@ -1,115 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { i as i18n } from './i18n.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './icon-button.js';
-import { d as defineCustomElement$5 } from './info.js';
-import { d as defineCustomElement$4 } from './info-button.js';
-import { d as defineCustomElement$3 } from './scrollable.js';
-import { d as defineCustomElement$2 } from './selectable.js';
-import { v as v4 } from './v4.js';
-
-const translations = {
-    en: {
-        "dso-map-base-layers": {
-            background: "Background",
-        },
-    },
-    nl: {
-        "dso-map-base-layers": {
-            background: "Achtergrond",
-        },
-    },
-};
-
-const mapBaseLayersCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}`;
-
-const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoBaseLayerChange = createEvent(this, "dsoBaseLayerChange", 7);
-        this.selectableRefs = {};
-        /**
-         * To group the overlays together. Generally the default value suffices.
-         */
-        this.group = v4();
-        this.text = i18n(() => this.host, translations);
-    }
-    baseLayerChangeHandler(baseLayer) {
-        this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });
-    }
-    componentDidRender() {
-        this.baseLayers
-            .filter((l) => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
-            .forEach((o) => {
-            var _a;
-            (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
-        });
-        this.previousBaselayers = this.baseLayers;
-    }
-    render() {
-        for (const ref in this.selectableRefs) {
-            delete this.selectableRefs[ref];
-        }
-        return (h("fieldset", { key: 'b4e11afffa1cfeda374e2298e0a127c51733fb9d', class: "form-group dso-radios" }, h("legend", { key: '5d5d9deaa63fd457eca1503f460925ca4e51ba25', class: "sr-only" }, "Achtergrond"), h("div", { key: 'd804f723a44d4085a7e983d2587da5bde72b4fec', class: "dso-label-container" }, h("span", { key: 'da3e550984bbe1b3a055d09100cf3d37cab9fe25', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '419aebdce0570fba7d194c285858c2ced4e416ed', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
-    }
-    get host() { return this; }
-    static get style() { return mapBaseLayersCss(); }
-}, [257, "dso-map-base-layers", {
-        "group": [1],
-        "baseLayers": [16]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-map-base-layers", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-scrollable", "dso-selectable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-map-base-layers":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), MapBaseLayers);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "dso-info":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "dso-info-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-selectable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoMapBaseLayers = MapBaseLayers;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoMapBaseLayers, defineCustomElement };
-//# sourceMappingURL=dso-map-base-layers.js.map
-
-//# sourceMappingURL=dso-map-base-layers.js.map
+import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./i18n.js";import{d as n}from"./icon.js";import{d as r}from"./icon-button.js";import{d as l}from"./info.js";import{d}from"./info-button.js";import{d as c}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoBaseLayerChange=o(this,"dsoBaseLayerChange",7),this.selectableRefs={},this.group=m(),this.text=i((()=>this.host),f)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>!e.disabled&&!0===this.previousBaselayers?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"013836ef69dbf09eb10fb4424426f667c541ff7b",class:"form-group dso-radios"},t("legend",{key:"4c6b54e47138c7511e94df65fc4880250748a0c3",class:"sr-only"},"Achtergrond"),t("div",{key:"4870d66120554007784f5aef0ad6883a5101144a",class:"dso-label-container"},t("span",{key:"ead7e90fec69e6a44621454009d287ff654af649",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"3b605ea9150ed280398aff465ef9e7818789b677",class:"dso-field-container"},this.baseLayers.map((e=>t("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-base-layers","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-base-layers":customElements.get(a(e))||customElements.define(a(e),h);break;case"dso-icon":customElements.get(a(e))||n();break;case"dso-icon-button":customElements.get(a(e))||r();break;case"dso-info":customElements.get(a(e))||l();break;case"dso-info-button":customElements.get(a(e))||d();break;case"dso-scrollable":customElements.get(a(e))||c();break;case"dso-selectable":customElements.get(a(e))||b()}}))};export{p as DsoMapBaseLayers,u as defineCustomElement}