@dso-toolkit/core 31.0.0 → 32.1.0

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -0,0 +1,312 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+:host {
+  display: block;
+  --di-times: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
+  --di-times-wit: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.wrapper {
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+}
+.wrapper.visible {
+  visibility: visible;
+}
+
+.dimscreen {
+  background-color: #000;
+  height: 100%;
+  opacity: 0.4;
+  width: 100%;
+}
+
+.open-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;
+  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;
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  bottom: 16px;
+  font-family: Asap, sans-serif;
+  position: fixed;
+  right: 16px;
+}
+.open-button:focus, .open-button:focus-visible {
+  outline-offset: 2px;
+}
+.open-button:active {
+  outline: 0;
+}
+.open-button.extern::after, .open-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button:focus, .open-button:focus-visible {
+  outline-offset: 2px;
+}
+.open-button:active {
+  outline: 0;
+}
+.open-button.extern::after, .open-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button:hover {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.open-button:active {
+  background-color: #15301e;
+  border-color: #15301e;
+  color: #fff;
+}
+.open-button[disabled], .open-button[disabled]:hover {
+  background-color: #afcf9d;
+  border-color: #afcf9d;
+  color: #fff;
+}
+.open-button.btn-sm {
+  line-height: 16px;
+}
+.open-button.btn-sm dso-icon,
+.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.open-button.download::after {
+  background: var(--dso-icon, var(--di-download-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button.extern::after {
+  background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button dso-icon,
+.open-button svg.di {
+  margin-left: -8px;
+  margin-right: 8px;
+}
+.open-button span + dso-icon,
+.open-button span + svg.di {
+  margin-left: 8px;
+  margin-right: -8px;
+}
+.open-button:hover {
+  cursor: pointer;
+}
+.open-button.open {
+  display: none;
+}
+
+.close-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;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border-right: 0;
+  border-top: 0;
+  border-radius: 0 0 0 8px;
+  height: 40px;
+  min-width: 40px;
+  padding: 0;
+  position: fixed;
+  right: 0;
+  width: 40px;
+  top: 0;
+}
+.close-button:focus, .close-button:focus-visible {
+  outline-offset: 2px;
+}
+.close-button:active {
+  outline: 0;
+}
+.close-button.extern::after, .close-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.close-button:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.close-button[disabled], .close-button[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.close-button.btn-sm {
+  line-height: 16px;
+}
+.close-button.btn-sm dso-icon,
+.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.close-button.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.close-button.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.close-button.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.close-button.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.close-button dso-icon,
+.close-button svg.di {
+  margin-left: -8px;
+  margin-right: 8px;
+}
+.close-button span + dso-icon,
+.close-button span + svg.di {
+  margin-left: 8px;
+  margin-right: -8px;
+}
+.close-button::before {
+  background: var(--dso-icon, var(--di-times)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.close-button:hover, .close-button:active, .close-button:focus {
+  cursor: pointer;
+}
+.close-button:hover::before, .close-button:active::before, .close-button:focus::before {
+  background: var(--dso-icon, var(--di-times-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button.close {
+  display: none;
+}
+
+.iframe-container {
+  background-color: #fff;
+  border: 0;
+  border-left: 1px solid #ccc;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
+  height: 100%;
+  position: absolute;
+  right: -640px;
+  top: 0;
+  transition: right 0.5s;
+  width: 640px;
+}
+.iframe-container.open {
+  right: 0;
+}
+
+iframe {
+  border: 0;
+  height: 100%;
+  width: 100%;
+}

package/dist/collection/components/helpcenter-panel/helpcenter-panel.js

@@ -0,0 +1,92 @@
+import { h, Component, Fragment, Prop, State } from "@stencil/core";
+const maxCssTransitionMilliseconds = 500;
+export class HelpcenterPanel {
+  constructor() {
+    this.label = "Hulp nodig";
+    this.visibility = "hidden";
+    this.isOpen = "close";
+    this.slideState = "close";
+    this.loadIframe = false;
+    this.openClick = () => {
+      this.visibility = "visible";
+      this.slideState = "open";
+      setTimeout(() => {
+        this.isOpen = "open";
+      });
+      if (!this.loadIframe) {
+        setTimeout(() => {
+          this.loadIframe = true;
+        }, maxCssTransitionMilliseconds);
+      }
+    };
+    this.closeClick = () => {
+      this.isOpen = "close";
+      this.slideState = "close";
+      setTimeout(() => {
+        this.visibility = "hidden";
+      }, maxCssTransitionMilliseconds);
+    };
+  }
+  render() {
+    return (h(Fragment, null,
+      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` },
+        h("dso-icon", { icon: "help" }),
+        h("span", null, this.label)),
+      h("div", { class: `wrapper ${this.visibility}` },
+        h("div", { class: "dimscreen" }),
+        h("div", { class: `iframe-container ${this.slideState}` }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
+        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick },
+          h("span", { class: "sr-only" }, "sluiten")))));
+  }
+  static get is() { return "dso-helpcenter-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helpcenter-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helpcenter-panel.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "\"Hulp nodig\""
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "visibility": {},
+    "isOpen": {},
+    "slideState": {},
+    "loadIframe": {}
+  }; }
+}

package/dist/collection/components/helpcenter-panel/helpcenter-panel.template.js

@@ -0,0 +1,13 @@
+import { html } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { unsafeHTML } from "lit-html/directives/unsafe-html";
+export function helpcenterPanelTemplate({ label, url, content, }) {
+  return html `
+    ${unsafeHTML(content)}
+    <dso-helpcenter-panel
+      label=${ifDefined(label)}
+      url=${url}
+    ></dso-helpcenter-panel>
+    ${unsafeHTML(content)}
+  `;
+}

package/dist/collection/components/highlight-box/highlight-box.css

@@ -28,7 +28,7 @@
 }
 
 .dso-highlight-box {
-  background-color: #e5e5e5;
+  background-color: #f2f2f2;
   margin-top: 16px;
   padding: 16px;
   margin-bottom: 16px;

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

@@ -8,8 +8,10 @@ import balloon from '@dso-toolkit/sources/src/icons/balloon.svg';
 import bars from '@dso-toolkit/sources/src/icons/bars.svg';
 import buildings from '@dso-toolkit/sources/src/icons/buildings.svg';
 import calendar from '@dso-toolkit/sources/src/icons/calendar.svg';
+import call from '@dso-toolkit/sources/src/icons/call.svg';
 import caretDown from '@dso-toolkit/sources/src/icons/caret-down.svg';
 import check from '@dso-toolkit/sources/src/icons/check.svg';
+import checkCircle from '@dso-toolkit/sources/src/icons/check-circle.svg';
 import chevronDown from '@dso-toolkit/sources/src/icons/chevron-down.svg';
 import chevronLeft from '@dso-toolkit/sources/src/icons/chevron-left.svg';
 import chevronRight from '@dso-toolkit/sources/src/icons/chevron-right.svg';
@@ -19,6 +21,7 @@ import clock from '@dso-toolkit/sources/src/icons/clock.svg';
 import copy from '@dso-toolkit/sources/src/icons/copy.svg';
 import crown from '@dso-toolkit/sources/src/icons/crown.svg';
 import cultural from '@dso-toolkit/sources/src/icons/cultural.svg';
+import document from '@dso-toolkit/sources/src/icons/document.svg';
 import download from '@dso-toolkit/sources/src/icons/download.svg';
 import email from '@dso-toolkit/sources/src/icons/email.svg';
 import energy from '@dso-toolkit/sources/src/icons/energy.svg';
@@ -74,6 +77,7 @@ import sortAscending from '@dso-toolkit/sources/src/icons/sort-ascending.svg';
 import sortDescending from '@dso-toolkit/sources/src/icons/sort-descending.svg';
 import sort from '@dso-toolkit/sources/src/icons/sort.svg';
 import sound from '@dso-toolkit/sources/src/icons/sound.svg';
+import statusForbidden from '@dso-toolkit/sources/src/icons/status-forbidden.svg';
 import statusDanger from '@dso-toolkit/sources/src/icons/status-danger.svg';
 import statusInfo from '@dso-toolkit/sources/src/icons/status-info.svg';
 import statusSuccess from '@dso-toolkit/sources/src/icons/status-success.svg';
@@ -97,8 +101,10 @@ const icons = [
   { alias: 'bars', svg: bars },
   { alias: 'buildings', svg: buildings },
   { alias: 'calendar', svg: calendar },
+  { alias: 'call', svg: call },
   { alias: 'caret-down', svg: caretDown },
   { alias: 'check', svg: check },
+  { alias: 'check-circle', svg: checkCircle },
   { alias: 'chevron-down', svg: chevronDown },
   { alias: 'chevron-left', svg: chevronLeft },
   { alias: 'chevron-right', svg: chevronRight },
@@ -108,6 +114,7 @@ const icons = [
   { alias: 'copy', svg: copy },
   { alias: 'crown', svg: crown },
   { alias: 'cultural', svg: cultural },
+  { alias: 'document', svg: document },
   { alias: 'download', svg: download },
   { alias: 'email', svg: email },
   { alias: 'energy', svg: energy },
@@ -164,6 +171,7 @@ const icons = [
   { alias: 'sort', svg: sort },
   { alias: 'sound', svg: sound },
   { alias: 'status-danger', svg: statusDanger },
+  { alias: 'status-forbidden', svg: statusForbidden },
   { alias: 'status-info', svg: statusInfo },
   { alias: 'status-success', svg: statusSuccess },
   { alias: 'status-warning', svg: statusWarning },

package/dist/collection/components/info/info.css

@@ -4,7 +4,7 @@
 :host {
   --di-times-bosgroen: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;
-  background-color: #e5e5e5;
+  background-color: #f2f2f2;
   padding: 16px 32px 16px 16px;
   position: relative;
 }
@@ -13,11 +13,11 @@
   border-style: none;
   padding: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 8px;
+  top: 8px;
 }
 :host > button::before {
-  background: var(--dso-icon, var(--di-times-bosgroen)) no-repeat;
+  background: var(--dso-icon, var(--di-times-grijs90)) no-repeat;
   background-position: center;
   background-size: cover;
   height: 1.5em;

package/dist/collection/components/info-button/info-button.css

@@ -5,6 +5,8 @@
   display: inline-block;
   --di-info: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
   --di-info-active: url("data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
+  --di-info-secondary: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
+  --di-info-active-secondary: url("data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
 }
 
 *,
@@ -37,4 +39,10 @@ button {
 }
 button.dso-open, button:hover, button:active {
   --dso-icon: var(--di-info-active);
+}
+button.dso-info-secondary {
+  --dso-icon: var(--di-info-secondary);
+}
+button.dso-info-secondary.dso-open, button.dso-info-secondary:hover, button.dso-info-secondary:active {
+  --dso-icon: var(--di-info-active-secondary);
 }

package/dist/collection/components/info-button/info-button.js

@@ -9,7 +9,7 @@ export class InfoButton {
     this.toggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) },
+    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) },
       h("span", { class: "sr-only" }, this.label)));
   }
   static get is() { return "dso-info-button"; }
@@ -38,6 +38,23 @@ export class InfoButton {
       "attribute": "active",
       "reflect": true
     },
+    "secondary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary",
+      "reflect": false
+    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/info-button/info-button.template.js

@@ -1,9 +1,10 @@
 import { html } from 'lit-html';
-export function infoButtonTemplate({ label, active, onClick }) {
+export function infoButtonTemplate({ label, active, secondary, onClick }) {
   return html `
     <dso-info-button
       label=${label}
       ?active=${active}
+      ?secondary=${secondary}
       @toggle=${(e) => onClick(e.detail)}
     ></dso-info-button>
   `;

package/dist/collection/components/label/label.decorator.js

@@ -0,0 +1,6 @@
+import { html } from 'lit-html';
+export const decorator = (story, css) => html `
+  ${story()}
+
+  <style>${css}</style>
+`;

package/dist/collection/components/label/label.js

@@ -4,6 +4,7 @@ export class Label {
   render() {
     const status = this.status && Label.statusMap.get(this.status);
     return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) },
+      h("slot", { name: "symbol" }),
       status && (h("span", { class: "sr-only" },
         status,
         ": ")),

package/dist/collection/components/label/label.template.js

@@ -1,6 +1,7 @@
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function labelTemplate({ status, label, button, compact }) {
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+export function labelTemplate({ status, label, button, compact, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
@@ -8,6 +9,13 @@ export function labelTemplate({ status, label, button, compact }) {
       ?compact=${compact}
       ?removable=${button}
     >
+      ${symbol
+    ? html `
+          <span slot="symbol">
+            ${unsafeHTML(symbol)}
+          </span>
+        `
+    : nothing}
       ${label}
     </dso-label>
   `;

package/dist/collection/components/ozon-content/ozon-content.transformer.js

@@ -1,6 +1,6 @@
 import isURL from 'validator/es/lib/isURL';
 function transformDescriptionNote(body) {
-  body.querySelectorAll('.od-Al > div.noot').forEach((nootElement, index) => {
+  body.querySelectorAll('div.noot').forEach((nootElement, index) => {
     const contentElement = nootElement.nextElementSibling;
     if (!(contentElement instanceof HTMLDivElement && contentElement.classList.value === 'noot_popup')) {
       return;

package/dist/collection/components/toggletip/toggletip.js

@@ -46,7 +46,7 @@ export class Toggletip {
   }
   render() {
     return (h(Fragment, null,
-      h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active }),
+      h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }),
       h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small },
         h("slot", null))));
   }
@@ -111,6 +111,23 @@ export class Toggletip {
       },
       "attribute": "small",
       "reflect": false
+    },
+    "secondary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/toggletip/toggletip.template.js

@@ -1,11 +1,12 @@
 import { html } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-export function toggletipTemplate({ children, label, position, small, }) {
+export function toggletipTemplate({ children, label, position, small, secondary, }) {
   return html `<dso-toggletip
     label=${ifDefined(label)}
     position=${ifDefined(position)}
     ?small=${small}
+    ?secondary=${secondary}
     >${unsafeHTML(children)}</dso-toggletip
   >`;
 }