@dso-toolkit/core 83.1.0 → 84.1.0

package/dist/bundle/dso-logo.js

@@ -1,16 +1,156 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, t as transformTag } from './p-BeWimuZg.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
 
-const logoCss = ":host {\n  block-size: var(--_dso-logo-block-size, 3rem);\n  display: grid;\n  grid-template-areas: \"target wordmark label\";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n:host .logo-url,\n:host .logo-label-url {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-decoration: none;\n}\n:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus-visible,\n:host .logo-label-url:active {\n  text-decoration: underline;\n}\n:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,\n:host .logo-label-url,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus,\n:host .logo-label-url:visited {\n  color: #275937;\n}\n\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\n  grid-template-areas: \"targetwordmark label\";\n}\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) .logo-url,\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) .logo-ribbon {\n  grid-area: targetwordmark;\n}\n\n.logo-label-url {\n  grid-area: label;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding-block: 0;\n  padding-inline: 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  :host([label]) {\n    grid-template-areas: \"target label\";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n    grid-area: label;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}";
+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 H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoLogoClick = createEvent(this, "dsoLogoClick", 7);
         this.dsoLabelClick = createEvent(this, "dsoLabelClick", 7);
@@ -31,9 +171,9 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends H {
     }
     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: '25100f9a1520b25402d3606e13d50d72e4b42147', class: "logo-ribbon" }, this.ribbon)));
+            (!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; }
+    static get style() { return logoCss(); }
 }, [257, "dso-logo", {
         "name": [513],
         "logoUrl": [513, "logo-url"],
@@ -48,8 +188,8 @@ function defineCustomElement$1() {
     const components = ["dso-logo"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-logo":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Logo);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), Logo);
             }
             break;
     } });

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

@@ -1 +1 @@
-{"file":"dso-logo.js","mappings":"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","names":["DsoLogo","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n:host {\r\n  block-size: var(--_dso-logo-block-size, #{units.$ru6});\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: units.$ru3;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include link.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url,\r\n  .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding-block: 0;\r\n  padding-inline: 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Prop,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n  const splittedName = name.split(\"|\");\r\n  return (\r\n    <>\r\n      <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n        <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n        <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n        <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n      </svg>\r\n      <div class=\"logo-wordmark\">\r\n        <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n        {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a\r\n   * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n   * shown in bosgroen.\r\n   * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n   * bosgroen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  name = \"Omgevings|loket\";\r\n  /**\r\n   * The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo name={this.name} />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo name={this.name} />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-logo.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;AC3HF,MAAMA,SAAO,GAA0C,CAAC,EAAE,IAAI,EAAE,KAAI;IAClE,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpC,IAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,EAAA,EACpE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,EAAG,CAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,EAAG,CAAA,EACpE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAAE,YAAY,CAAC,CAAC,CAAC,CAAQ,EAC7D,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,qBAAqB,EAAE,EAAA,YAAY,CAAC,CAAC,CAAC,CAAQ,CACpF,CACL;AAEP,CAAC;MAOY,IAAI,iBAAAC,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;AALjB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAME;;;;;;AAMG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAG,iBAAiB;AAuChB,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,CAAa,KAAI;YAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;AACvG,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,CAAa,KAAI;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;AACzG,SAAC;AAyBF;IAvBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,OAAO,IACX,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,EAAA,EACnE,CAAC,CAAAF,SAAO,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAC1B,KAEJ,CAAC,CAAAA,SAAO,EAAC,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC7B,EAEA,IAAI,CAAC,KAAK;AACT,aAAC,CAAC,IAAI,CAAC,QAAQ,IACb,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,KAE5C,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAC3E,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC,EACH,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,MAAM,CAAO,CAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DsoLogo","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n:host {\r\n  block-size: var(--_dso-logo-block-size, #{units.$ru6});\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: units.$ru3;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include link.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url,\r\n  .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding-block: 0;\r\n  padding-inline: 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Prop,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n  const splittedName = name.split(\"|\");\r\n  return (\r\n    <>\r\n      <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n        <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n        <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n        <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n      </svg>\r\n      <div class=\"logo-wordmark\">\r\n        <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n        {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a\r\n   * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n   * shown in bosgroen.\r\n   * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n   * bosgroen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  name = \"Omgevings|loket\";\r\n  /**\r\n   * The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo name={this.name} />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo name={this.name} />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
+import { p as proxyCustomElement, H, e as createEvent, h, t as transformTag } from './p-BeWimuZg.js';
 import { i as i18n } from './p-C0ZvZbHD.js';
-import { d as defineCustomElement$6 } from './p-CXctuPtC.js';
-import { d as defineCustomElement$5 } from './p-CWK4j8Tr.js';
-import { d as defineCustomElement$4 } from './p--8xOEWb7.js';
-import { d as defineCustomElement$3 } from './p-DcPjXXDp.js';
-import { d as defineCustomElement$2 } from './p-CAiNl6nx.js';
+import { d as defineCustomElement$6 } from './p-DMYengW8.js';
+import { d as defineCustomElement$5 } from './p-DzcyUrLK.js';
+import { d as defineCustomElement$4 } from './p-BCedLSX_.js';
+import { d as defineCustomElement$3 } from './p-DKYkKOQE.js';
+import { d as defineCustomElement$2 } from './p-BMJkixUi.js';
 import { v as v4 } from './p-C_akviUd.js';
 
 const translations = {
@@ -20,12 +20,14 @@ const translations = {
     },
 };
 
-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:inset(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 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 H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoBaseLayerChange = createEvent(this, "dsoBaseLayerChange", 7);
         this.selectableRefs = {};
@@ -51,13 +53,13 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7a2f2b49ef2ccabe6ebc3e0e5c7ed76c5b72a746', class: "form-group dso-radios" }, h("legend", { key: 'a19b169cc43a70f2e38ceba818bf450952339ff8', class: "sr-only" }, "Achtergrond"), h("div", { key: '64c795570bab8cb5b3992edc2dac4dd6569a5f11', class: "dso-label-container" }, h("span", { key: '1824e0e617af0ef91df2bdf978bbf16645038a62', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'f5d41837ed502d2adea72f7ddaebf01f499ef251', 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))))));
+        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; }
+    static get style() { return mapBaseLayersCss(); }
 }, [257, "dso-map-base-layers", {
         "group": [1],
-        "baseLayers": [16, "base-layers"]
+        "baseLayers": [16]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -66,32 +68,32 @@ function defineCustomElement$1() {
     const components = ["dso-map-base-layers", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-selectable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-map-base-layers":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MapBaseLayers);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), MapBaseLayers);
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }
             break;
         case "dso-icon-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
         case "dso-info":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "dso-info-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "dso-selectable":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

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

@@ -1 +1 @@
-{"file":"dso-map-base-layers.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/map-base-layers/map-base-layers.i18n.ts","src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-base-layers\": {\r\n      background: \"Background\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-base-layers\": {\r\n      background: \"Achtergrond\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-inline-size: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-block-end: units.$u1;\r\n    max-inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-base-layers.i18n\";\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapBaseLayersElement;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"background\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-base-layers.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/map-base-layers/map-base-layers.i18n.ts","src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-base-layers\": {\r\n      background: \"Background\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-base-layers\": {\r\n      background: \"Achtergrond\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-inline-size: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-block-end: units.$u1;\r\n    max-inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-base-layers.i18n\";\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapBaseLayersElement;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"background\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}