@dso-toolkit/core 45.0.0 → 45.1.0

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

@@ -0,0 +1,26 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+export function accordionTemplate({ variant, reverseAlign, allowMultipleOpen, dsoToggleSection, sections }) {
+  return html `
+    <dso-accordion
+      variant=${ifDefined(variant)}
+      ?reverse-align=${reverseAlign}
+      ?allow-multiple-open=${allowMultipleOpen}
+      @dsoToggleSection=${dsoToggleSection}
+    >
+      ${sections.map(section => html `
+        <dso-accordion-section
+          ?open=${ifDefined(section.open)}
+          handle-title=${section.handleTitle}
+          handle-url=${ifDefined(section.handleUrl)}
+          state=${ifDefined(section.state)}
+          status=${ifDefined(section.status)}
+          icon=${ifDefined(section.icon)}
+          attachment-count=${ifDefined(section.attachmentCount)}
+        >
+          ${unsafeHTML(section.content)}
+        </dso-accordion-section>`)}
+    </dso-accordion>
+  `;
+}

package/dist/collection/components/accordion/components/accordion-section.css

@@ -0,0 +1,221 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+:host {
+  display: block;
+}
+:host .dso-section-handle {
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.375em;
+  margin: 0;
+  position: relative;
+}
+:host .dso-section-handle > a:active {
+  text-decoration: none;
+}
+:host .dso-section-handle a {
+  text-decoration: none;
+}
+:host .dso-section-handle a:hover, :host .dso-section-handle a:focus {
+  text-decoration: none;
+}
+:host .dso-section-handle a:active {
+  text-decoration: underline;
+}
+:host .dso-section-handle .dso-status {
+  font-weight: 400;
+  text-decoration: underline;
+}
+:host .dso-section-handle > button,
+:host .dso-section-handle > a {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  font-family: Asap, sans-serif;
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.375em;
+  margin: 0;
+  padding: 12px 16px 12px;
+  width: 100%;
+  word-break: break-word;
+}
+:host .dso-section-handle > button dso-icon,
+:host .dso-section-handle > a dso-icon {
+  flex-shrink: 0;
+}
+:host .dso-section-handle > button > .dso-section-handle-addons:first-child,
+:host .dso-section-handle > button > dso-icon:first-child,
+:host .dso-section-handle > a > .dso-section-handle-addons:first-child,
+:host .dso-section-handle > a > dso-icon:first-child {
+  margin-right: 8px;
+}
+:host .dso-section-handle > button > dso-icon:last-child,
+:host .dso-section-handle > a > dso-icon:last-child {
+  margin-left: auto;
+}
+:host .dso-section-handle > button > .dso-section-handle-addons:last-child,
+:host .dso-section-handle > a > .dso-section-handle-addons:last-child {
+  margin-left: auto;
+}
+:host .dso-section-handle > button > .dso-section-handle-addons:last-child dso-icon,
+:host .dso-section-handle > a > .dso-section-handle-addons:last-child dso-icon {
+  margin-left: 16px;
+}
+
+:host(:not([open])) .dso-section-body {
+  display: none;
+}
+
+.dso-section-body {
+  background-color: #fff;
+  border-top: 0;
+  margin-top: -4px;
+  padding: 20px 16px 16px;
+}
+
+:host(.dso-accordion-default) .dso-section-handle {
+  background-color: #fff;
+  border: 1px solid #8b4a6a;
+  border-radius: 4px;
+}
+:host(.dso-accordion-default) .dso-section-handle a,
+:host(.dso-accordion-default) .dso-section-handle button {
+  color: #8b4a6a;
+}
+:host(.dso-accordion-default) .dso-section-handle a:hover, :host(.dso-accordion-default) .dso-section-handle a:active, :host(.dso-accordion-default) .dso-section-handle a.active,
+:host(.dso-accordion-default) .dso-section-handle button:hover,
+:host(.dso-accordion-default) .dso-section-handle button:active,
+:host(.dso-accordion-default) .dso-section-handle button.active {
+  color: #8b4a6a;
+}
+:host(.dso-accordion-default) .dso-section-body {
+  border: 1px solid #8b4a6a;
+  border-radius: 0 0 4px 4px;
+}
+
+:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle {
+  background-color: #8b4a6a;
+  border-radius: 4px;
+}
+:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
+:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
+  color: #fff;
+}
+:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #fff;
+  --dso-icon: var(--di-paperclip-wit);
+}
+
+:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body {
+  background-color: #d1b7c4;
+}
+
+:host(.dso-accordion-compact) .dso-section-handle {
+  border: 1px solid transparent;
+}
+:host(.dso-accordion-compact) .dso-section-handle a,
+:host(.dso-accordion-compact) .dso-section-handle button {
+  color: #39870c;
+}
+:host(.dso-accordion-compact) .dso-section-handle a:hover, :host(.dso-accordion-compact) .dso-section-handle a:active, :host(.dso-accordion-compact) .dso-section-handle a.active,
+:host(.dso-accordion-compact) .dso-section-handle button:hover,
+:host(.dso-accordion-compact) .dso-section-handle button:active,
+:host(.dso-accordion-compact) .dso-section-handle button.active {
+  color: #39870c;
+}
+:host(.dso-accordion-compact),
+:host(.dso-accordion-compact) .dso-section-body {
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+:host(.dso-accordion-compact):last-child {
+  border-bottom: 1px solid #ccc;
+}
+:host(.dso-accordion-compact) + dso-accordion-section {
+  margin-top: 0;
+}
+:host(.dso-accordion-compact) .dso-section-body {
+  margin-top: 0;
+}
+
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle {
+  background-color: transparent;
+}
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
+  color: #39870c;
+}
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a:hover, :host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a:active, :host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a.active,
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button:hover,
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button:active,
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button.active {
+  color: #39870c;
+}
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #666;
+  --dso-icon: var(--di-paperclip-grijs);
+}
+
+:host(.dso-accordion-compact.dso-nested-accordion[open]) > .dso-section-body {
+  padding-bottom: 0;
+}
+:host(.dso-accordion-compact.dso-nested-accordion[open]) > .dso-section-body dso-accordion-section:last-child {
+  border-bottom: 0;
+}
+
+:host(.dso-accordion-conclusion) .dso-section-handle {
+  background-color: #f2f2f2;
+  border: 1px solid #f2f2f2;
+}
+:host(.dso-accordion-conclusion) .dso-section-handle a,
+:host(.dso-accordion-conclusion) .dso-section-handle button {
+  color: #191919;
+}
+:host(.dso-accordion-conclusion) .dso-section-handle a:hover, :host(.dso-accordion-conclusion) .dso-section-handle a:active, :host(.dso-accordion-conclusion) .dso-section-handle a.active,
+:host(.dso-accordion-conclusion) .dso-section-handle button:hover,
+:host(.dso-accordion-conclusion) .dso-section-handle button:active,
+:host(.dso-accordion-conclusion) .dso-section-handle button.active {
+  background-color: #e5e5e5;
+  color: #191919;
+}
+:host(.dso-accordion-conclusion) .dso-section-body {
+  border: 2px solid #f2f2f2;
+}
+
+:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle {
+  background-color: #f2f2f2;
+}
+:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
+:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
+  color: #191919;
+}
+:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #666;
+  --dso-icon: var(--di-paperclip-grijs);
+}
+
+:host(.dso-accordion-conclusion.dso-nested-accordion[open]) {
+  background-color: #fff;
+  border: 2px solid #f2f2f2;
+}

package/dist/collection/components/accordion/components/accordion-section.js

@@ -0,0 +1,292 @@
+import { h, Component, Host, Element, State, Prop, Fragment, Method, forceUpdate } from '@stencil/core';
+export class AccordionSection {
+  constructor() {
+    this.heading = 'h2';
+    this.open = false;
+    this.hasNestedSection = false;
+  }
+  componentWillLoad() {
+    const accordion = this.host.parentElement;
+    if (isAccordion(accordion)) {
+      this.accordion = accordion;
+      accordion.getState().then(state => {
+        this.accordionState = state;
+        forceUpdate(this.host);
+      });
+    }
+  }
+  componentDidLoad() {
+    this.hasNestedSection = this.host.querySelector('dso-accordion') !== null;
+  }
+  /** Toggle this section */
+  async toggleSection() {
+    var _a;
+    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host);
+  }
+  async toggle(e) {
+    var _a;
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e);
+  }
+  render() {
+    if (!this.accordionState) {
+      return;
+    }
+    const { variant, reverseAlign } = this.accordionState;
+    const hasAddons = this.status || this.state || this.icon || this.attachmentCount;
+    return (h(Host, { class: {
+        'dso-accordion-section': true,
+        ['dso-accordion-' + variant]: true,
+        'dso-nested-accordion': this.hasNestedSection,
+      } },
+      h(Handle, { heading: this.heading },
+        h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign
+          ? (h(Fragment, null,
+            hasAddons && (h("div", { class: "dso-section-handle-addons" },
+              h(HandleIcon, { icon: this.icon }))),
+            h("span", null, this.handleTitle),
+            h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' })))
+          : (h(Fragment, null,
+            h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' }),
+            this.state && h("span", { class: "sr-only" }, stateMap[this.state]),
+            h("span", null, this.handleTitle),
+            hasAddons && (h("div", { class: "dso-section-handle-addons" },
+              this.status && h("span", { class: "dso-status" }, this.status),
+              h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))),
+      h("div", { class: "dso-section-body", style: this.open ? {} : { display: 'none' } },
+        h("slot", null))));
+  }
+  static get is() { return "dso-accordion-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["accordion-section.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["accordion-section.css"]
+  }; }
+  static get properties() { return {
+    "handleTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "handle-title",
+      "reflect": false
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AccordionHeading",
+        "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\"",
+        "references": {
+          "AccordionHeading": {
+            "location": "import",
+            "path": "../accordion.interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "'h2'"
+    },
+    "handleUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When set the handle will render as a `<a>`. When undefined it renders as a `<button>`"
+      },
+      "attribute": "handle-url",
+      "reflect": false
+    },
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AccordionSectionState",
+        "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\" | undefined",
+        "references": {
+          "AccordionSectionState": {
+            "location": "import",
+            "path": "../accordion.interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "`state` takes precedence over `attachmentCount` and `icon`"
+      },
+      "attribute": "state",
+      "reflect": false
+    },
+    "attachmentCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "`attachmentCount` takes precedence over `icon`"
+      },
+      "attribute": "attachment-count",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "status": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": false
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasNestedSection": {}
+  }; }
+  static get methods() { return {
+    "toggleSection": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle this section",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+function isAccordion(element) {
+  return element instanceof HTMLElement && 'getState' in element;
+}
+const Handle = ({ heading }, children) => {
+  switch (heading) {
+    default:
+    case 'h2':
+      return h("h2", { class: "dso-section-handle" }, children);
+    case 'h3':
+      return h("h3", { class: "dso-section-handle" }, children);
+    case 'h4':
+      return h("h4", { class: "dso-section-handle" }, children);
+    case 'h5':
+      return h("h5", { class: "dso-section-handle" }, children);
+  }
+};
+const HandleElement = ({ handleUrl, onClick, open }, children) => {
+  if (handleUrl) {
+    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+  }
+  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+};
+const HandleIcon = ({ state, icon, attachmentCount }) => {
+  if (state) {
+    return h(HandleStateIcon, { state: state });
+  }
+  if (attachmentCount) {
+    return h("dso-attachments-counter", { count: attachmentCount });
+  }
+  if (icon) {
+    return h("dso-icon", { icon: icon });
+  }
+};
+const stateMap = {
+  success: 'succes:',
+  info: 'info:',
+  warning: 'waarschuwing:',
+  danger: 'fout:'
+};
+const HandleStateIcon = ({ state }) => {
+  if (state === 'danger') {
+    return (h("dso-icon", { icon: "status-danger" }));
+  }
+  if (state === 'success') {
+    return (h("dso-icon", { icon: "status-success" }));
+  }
+  if (state === 'info') {
+    return (h("dso-icon", { icon: "status-info" }));
+  }
+  if (state === 'warning') {
+    return (h("dso-icon", { icon: "status-warning" }));
+  }
+};

package/dist/collection/components/alert/alert.css

@@ -10,12 +10,6 @@
 }
 :host {
   display: block;
-  --di-status-success: url("data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z' fill='white'/%3e %3c/svg%3e");
-  --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e");
-  --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
-  --di-status-info: url("data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.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' fill='white'/%3e %3c/svg%3e");
-  --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
-  --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
 }
 
 :host(:not(:first-child)) {
@@ -49,61 +43,30 @@
 .alert:not(:first-child) {
   margin-top: 24px;
 }
-.alert::before {
-  content: "";
-  left: 15px;
-  position: absolute;
-  top: 15px;
-}
 .alert.alert-success {
   color: #191919;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
 }
-.alert.alert-success::before {
-  background: var(--dso-icon, var(--di-status-success)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 32px;
-  vertical-align: top;
-  width: 32px;
-}
 .alert.alert-danger {
   color: #191919;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
 }
-.alert.alert-danger::before {
-  background: var(--dso-icon, var(--di-status-danger)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 32px;
-  vertical-align: top;
-  width: 32px;
-}
 .alert.alert-warning {
   color: #191919;
   background-color: #f8f6cc;
   border-color: #f8f6cc;
 }
-.alert.alert-warning::before {
-  background: var(--dso-icon, var(--di-status-warning)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 32px;
-  vertical-align: top;
-  width: 32px;
-}
 .alert.alert-info {
   color: #191919;
   background-color: #e1ecf7;
   border-color: #e1ecf7;
 }
-.alert.alert-info::before {
-  background: var(--dso-icon, var(--di-status-info)) no-repeat;
-  background-position: center;
-  background-size: cover;
+.alert dso-icon {
+  left: 15px;
+  position: absolute;
+  top: 15px;
   height: 32px;
-  vertical-align: top;
   width: 32px;
 }

package/dist/collection/components/alert/alert.js

@@ -7,6 +7,7 @@ export class Alert {
       throw new Error(`Invalid status ${this.status}`);
     }
     return (h("div", { class: clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined },
+      h("dso-icon", { icon: 'status-' + this.status }),
       h("span", { class: "sr-only" },
         status,
         ":"),

package/dist/collection/components/attachments-counter/attachments-counter.css

@@ -1,7 +1,5 @@
 :host {
   display: inline-block;
-  --di-paperclip-grijs: url("data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e");
-  --di-paperclip-wit: url("data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e");
 }
 
 *,
@@ -27,14 +25,4 @@
   font-weight: 400;
   text-decoration: none;
   white-space: nowrap;
-}
-.dso-attachments::after {
-  background: var(--dso-icon, var(--di-paperclip-grijs)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-  content: "";
-  display: inline-block;
 }

package/dist/collection/components/attachments-counter/attachments-counter.js

@@ -6,7 +6,8 @@ export class AttachmentsCounter {
       " ",
       h("span", { class: "sr-only" },
         "bijlage",
-        this.count !== 1 ? 'n' : '')));
+        this.count !== 1 ? 'n' : ''),
+      h("dso-icon", { icon: "paperclip" })));
   }
   static get is() { return "dso-attachments-counter"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/banner/banner.css

@@ -1,9 +1,5 @@
 :host {
   display: block;
-  --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e");
-  --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
-  --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
-  --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
 }
 
 *,