@dso-toolkit/core 27.4.0 → 29.0.0

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

@@ -58,8 +58,8 @@ export class Label {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'info' | 'success' | 'warning' | 'danger'",
-        "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+        "original": "'primary' | 'info' | 'success' | 'warning' | 'danger' | 'bright'",
+        "resolved": "\"bright\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
         "references": {}
       },
       "required": false,
@@ -97,9 +97,8 @@ export class Label {
     }]; }
 }
 Label.statusMap = new Map([
-  ['primary', 'Primair'],
-  ['info', 'Info'],
-  ['success', 'Succes'],
+  ['info', 'Opmerking'],
+  ['success', 'Gelukt'],
   ['warning', 'Waarschuwing'],
-  ['danger', 'Gevaar']
+  ['danger', 'Fout']
 ]);

package/dist/collection/components/ozon-content/ozon-content.css

@@ -0,0 +1,100 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+dso-ozon-content {
+  display: block;
+}
+
+.noot {
+  text-decoration: none;
+}
+.noot:not(.dso-open) + .od-Al {
+  display: none;
+}
+.noot.dso-open + .od-Al {
+  display: block;
+}
+.noot + .od-Al {
+  margin: 4px 0;
+  padding: 8px 32px 8px 8px;
+  position: relative;
+}
+.noot + .od-Al > a {
+  display: block;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  width: 24px;
+}
+.noot + .od-Al > a::before {
+  background: var(--dso-icon, var(--di-times-zwart)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+  content: "";
+  display: block;
+}
+.noot + .od-Al {
+  background-color: #ebf3e6;
+}
+
+.od-Term {
+  font-weight: 700;
+}
+
+.od-Definitie,
+.od-Tussenkop {
+  font-style: italic;
+}
+
+.od-Inhoud,
+.od-Inhoud > .od-Lijst,
+.od-IntIoRef,
+.od-Lidnr,
+.od-LiNr,
+.od-Opschrift,
+.od-Tussenkop {
+  display: inline;
+}
+
+.od-Al,
+.od-Lijstaanhef {
+  margin-bottom: 0.75em;
+}
+
+.od-IntIoRef {
+  border-bottom: 1px dotted;
+}
+
+.od-LiNummer {
+  float: left;
+  min-width: 0.7em;
+  padding-right: 0.3em;
+  text-align: right;
+}
+
+.od-Figuur img {
+  margin-left: 25px;
+  max-width: 100%;
+  height: auto;
+}
+
+.od-Figuur .od-Bijschrift {
+  font-size: 0.75rem;
+  margin-left: 25px;
+  padding-bottom: 2.5rem;
+}
+
+.od-Tabel thead {
+  font-weight: 600;
+}
+
+.od-Kadertekst {
+  border: 1px solid #e5e5e5;
+  margin-bottom: 1rem;
+  padding: 1rem;
+}

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

@@ -0,0 +1,2 @@
+// Sync interfaces with readme.md
+export {};

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

@@ -0,0 +1,80 @@
+import { h, Event, Component, Prop, Listen } from '@stencil/core';
+import { OzonContentTransformer } from './ozon-content.transformer';
+export class OzonContent {
+  handleClick(event) {
+    this.transformer.handleClickEvent(event);
+  }
+  componentWillLoad() {
+    this.transformer = new OzonContentTransformer(this.anchorClick);
+  }
+  componentWillRender() {
+    this.transformer.setContent(this.content);
+  }
+  render() {
+    return h("div", { class: "dso-rich-content", ref: el => this.container = el });
+  }
+  componentDidRender() {
+    var _a;
+    const content = this.transformer.content;
+    if (this.container && content) {
+      this.container.replaceChildren(...Array.from(content));
+    }
+    else {
+      (_a = this.container) === null || _a === void 0 ? void 0 : _a.replaceChildren();
+    }
+  }
+  static get is() { return "dso-ozon-content"; }
+  static get originalStyleUrls() { return {
+    "$": ["ozon-content.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ozon-content.css"]
+  }; }
+  static get properties() { return {
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "content",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "anchorClick",
+      "name": "anchorClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ContentAnchor",
+        "resolved": "ContentAnchor",
+        "references": {
+          "ContentAnchor": {
+            "location": "import",
+            "path": "./ozon-content.interfaces"
+          }
+        }
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,9 @@
+import { html } from 'lit-html';
+export function ozonContentTemplate({ content, onAnchorClick }) {
+  return html `
+    <dso-ozon-content
+      .content=${content}
+      @anchorClick=${onAnchorClick}
+    ></dso-ozon-content>
+  `;
+}

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

@@ -0,0 +1,91 @@
+import isURL from 'validator/es/lib/isURL';
+function transformDescriptionNote(body) {
+  body.querySelectorAll('a.noot > div.noot_popup').forEach((e, index) => {
+    const contentElement = e.querySelector('.od-Al');
+    const ozonPopupElement = contentElement === null || contentElement === void 0 ? void 0 : contentElement.parentElement;
+    const anchorElement = ozonPopupElement === null || ozonPopupElement === void 0 ? void 0 : ozonPopupElement.parentElement;
+    const supElement = document.createElement('sup');
+    supElement.replaceChildren(...Array.from(anchorElement.childNodes));
+    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.replaceChildren(supElement);
+    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.after(contentElement);
+    ozonPopupElement === null || ozonPopupElement === void 0 ? void 0 : ozonPopupElement.remove();
+    const id = (index + 1).toString(10);
+    const [termId, contentId] = [`dso-ozon-term-${id}`, `dso-ozon-content-${id}`];
+    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.setAttribute('id', termId);
+    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.setAttribute('aria-controls', contentId);
+    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.setAttribute('aria-expanded', 'false');
+    contentElement === null || contentElement === void 0 ? void 0 : contentElement.setAttribute('id', contentId);
+  });
+  return body;
+}
+function transformDocumentComponent(body) {
+  body.querySelectorAll('span[data-verwijst-naar-documentcomponent]').forEach(e => {
+    const a = document.createElement('a');
+    a.href = `#${e.getAttribute('data-verwijst-naar-documentcomponent')}`;
+    a.replaceChildren(...Array.from(e.childNodes));
+    e.replaceWith(a);
+  });
+  return body;
+}
+const transformers = [transformDescriptionNote, transformDocumentComponent];
+export class OzonContentTransformer {
+  constructor(anchorClick) {
+    this.anchorClick = anchorClick;
+    this.domParser = new DOMParser();
+    this.eventHandlers = [this.handleValidUrls, this.handleDescriptionNoteClick, this.handleContentAnchor];
+  }
+  setContent(content) {
+    this.content = transformers.reduce((c, t) => t(c), this.domParser.parseFromString(content, 'text/html').body).children;
+  }
+  handleClickEvent(event) {
+    this.eventHandlers.some(h => h.bind(this)(event.composedPath(), event));
+  }
+  handleDescriptionNoteClick(composedPath, event) {
+    var _a;
+    const containerIndex = composedPath.findIndex(this.isHostElement);
+    if (containerIndex === -1) {
+      return false;
+    }
+    const anchorElement = (_a = composedPath
+      .slice(0, containerIndex)) === null || _a === void 0 ? void 0 : _a.find((e) => e instanceof HTMLAnchorElement && e.classList.contains('noot'));
+    if (!anchorElement) {
+      return false;
+    }
+    event.preventDefault();
+    const open = anchorElement.classList.contains('dso-open');
+    if (open) {
+      anchorElement.classList.remove('dso-open');
+      anchorElement.setAttribute('aria-expanded', 'false');
+    }
+    else {
+      anchorElement.classList.add('dso-open');
+      anchorElement.setAttribute('aria-expanded', 'true');
+    }
+    return true;
+  }
+  handleContentAnchor(composedPath, event) {
+    if (composedPath.some(e => e instanceof HTMLAnchorElement)) {
+      event.preventDefault();
+      const anchor = composedPath.find((e) => e instanceof HTMLAnchorElement);
+      const href = anchor.href;
+      this.anchorClick.emit({
+        href,
+        documentComponent: href.substr(href.indexOf('#') + 1),
+        originalEvent: event
+      });
+      return true;
+    }
+    return false;
+  }
+  handleValidUrls(composedPath) {
+    var _a;
+    const containerIndex = composedPath.findIndex(this.isHostElement);
+    if (containerIndex === -1) {
+      return false;
+    }
+    return (_a = composedPath.slice(0, containerIndex)) === null || _a === void 0 ? void 0 : _a.some(e => e instanceof HTMLAnchorElement && isURL(e.href));
+  }
+  isHostElement(value) {
+    return value instanceof HTMLElement && value.tagName === 'DSO-OZON-CONTENT';
+  }
+}

package/dist/collection/icon/dso-icon-sass-function.js

@@ -13,7 +13,7 @@ export const dsoIcon = {
     }
     const iconAlias = sassIconAlias.getValue();
     const iconPath = resolve(iconsPath, `${iconAlias}.svg`);
-    const icon = readFileSync(iconPath).toString('UTF-8');
+    const icon = readFileSync(iconPath).toString('utf-8');
     const style = getStyle(iconAlias, sassVariant instanceof sass.types.String ? sassVariant.getValue() : null);
     const svg = style ? bundleSvgStyle(icon, style) : icon;
     const dataUri = svgToDataUri(svg);
@@ -29,7 +29,7 @@ function getStyle(icon, variant) {
   const css = sass
     .renderSync({ file: stylesheetPath })
     .css
-    .toString('UTF-8');
+    .toString('utf-8');
   const selector = `${icon}${variant ? `:${variant}` : ''}`;
   const regex = styleRegex(selector);
   return (_b = (_a = css.match(regex)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;

package/dist/custom-elements/index.d.ts

@@ -92,6 +92,12 @@ export const DsoMapOverlays: {
   new (): DsoMapOverlays;
 };
 
+interface DsoOzonContent extends Components.DsoOzonContent, HTMLElement {}
+export const DsoOzonContent: {
+  prototype: DsoOzonContent;
+  new (): DsoOzonContent;
+};
+
 interface DsoProgressBar extends Components.DsoProgressBar, HTMLElement {}
 export const DsoProgressBar: {
   prototype: DsoProgressBar;