@dso-toolkit/core 55.0.0 → 56.1.0

package/dist/components/dso-badge.js

@@ -1,35 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.m.js';
-
-const badgeCss = ":host{display:inline-block}*,*::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}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#000}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#000}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
-
-const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.status = undefined;
-  }
-  render() {
-    return (h("span", { class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", null)));
-  }
-  static get style() { return badgeCss; }
-}, [1, "dso-badge", {
-    "status": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-badge"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-badge":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Badge);
-      }
-      break;
-  } });
-}
+import { B as Badge, d as defineCustomElement$1 } from './badge.js';
 
 const DsoBadge = Badge;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-badge.js.map

@@ -1 +1 @@
-{"file":"dso-badge.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,qgCAAqgC;;MCQzgC,KAAK;;;;;;;EAOhB,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IACvE,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-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.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-document-component.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoDocumentComponent extends Components.DsoDocumentComponent, HTMLElement {}
+export const DsoDocumentComponent: {
+  prototype: DsoDocumentComponent;
+  new (): DsoDocumentComponent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-document-component.js

@@ -0,0 +1,8 @@
+import { D as DocumentComponent, d as defineCustomElement$1 } from './document-component.js';
+
+const DsoDocumentComponent = DocumentComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoDocumentComponent, defineCustomElement };
+
+//# sourceMappingURL=dso-document-component.js.map

package/dist/components/dso-document-component.js.map

@@ -0,0 +1 @@
+{"file":"dso-document-component.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-header.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './dropdown-menu.js';
 import { d as defineCustomElement$2 } from './icon.js';

package/dist/components/dso-image-overlay.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
 import { d as defineCustomElement$2 } from './icon.js';
 

package/dist/components/dso-label.js

@@ -1,164 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.m.js';
-import { d as debounce_1 } from './index3.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const labelCss = ":host{display:inline-block;max-width:100%}*,*::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}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%;padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-label-info{background-color:#6ca4d9;color:#000}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#000}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
-
-const resizeObserver = new ResizeObserver(debounce_1.debounce((entries) => {
-  entries.forEach(({ target }) => {
-    if (isDsoLabelComponent(target)) {
-      target._truncateLabel();
-    }
-  });
-}, 150));
-function isDsoLabelComponent(element) {
-  return element.tagName === "DSO-LABEL";
-}
-function hasEllipses(el) {
-  return el.scrollWidth > el.clientWidth;
-}
-const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.dsoRemoveClick = createEvent(this, "dsoRemoveClick", 7);
-    this.keydownListenerActive = false;
-    this.keyDownListener = (event) => {
-      if (event.key === "Escape") {
-        this.textHover = false;
-        this.textFocus = false;
-      }
-    };
-    this.compact = undefined;
-    this.removable = undefined;
-    this.status = undefined;
-    this.removeHover = undefined;
-    this.removeFocus = undefined;
-    this.truncate = undefined;
-    this.textHover = undefined;
-    this.textFocus = undefined;
-    this.isTruncated = undefined;
-    this.labelText = null;
-  }
-  watchTruncate(truncate) {
-    if (truncate) {
-      this.startTruncate();
-    }
-    else {
-      this.stopTruncate();
-    }
-  }
-  watchTooltipActive() {
-    if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {
-      document.addEventListener("keydown", this.keyDownListener);
-      this.keydownListenerActive = true;
-    }
-    if (!this.textHover && !this.textFocus) {
-      document.removeEventListener("keydown", this.keyDownListener);
-      this.keydownListenerActive = false;
-    }
-  }
-  /**
-   * @internal
-   */
-  async _truncateLabel() {
-    setTimeout(() => {
-      this.isTruncated = this.labelContent && hasEllipses(this.labelContent);
-    });
-  }
-  syncLabelText() {
-    this.labelText = this.host.textContent;
-  }
-  componentDidLoad() {
-    if (this.truncate) {
-      this.startTruncate();
-    }
-    if (this.removable) {
-      this.startMutationObserver();
-    }
-  }
-  disconnectedCallback() {
-    this.stopTruncate();
-  }
-  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
-  startMutationObserver() {
-    if (this.mutationObserver) {
-      return;
-    }
-    this.mutationObserver = new MutationObserver((entries) => entries.forEach(() => this.syncLabelText()));
-    this.mutationObserver.observe(this.host, {
-      characterData: true,
-      subtree: true,
-      attributes: true,
-    });
-    this.labelText = this.host.textContent;
-  }
-  startTruncate() {
-    resizeObserver.observe(this.host);
-    this.startMutationObserver();
-    this._truncateLabel();
-  }
-  stopTruncate() {
-    document.removeEventListener("keydown", this.keyDownListener);
-    resizeObserver.unobserve(this.host);
-    this.isTruncated = undefined;
-    this.keydownListenerActive = false;
-  }
-  render() {
-    return (h(Fragment, null, h("span", { "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
-        [`dso-label-${this.status}`]: this.status,
-        "dso-compact": this.compact && !this.removable,
-        "dso-hover": this.removeHover || this.removeFocus,
-      }) }, h("slot", { name: "symbol" }), h("span", { class: clsx("dso-label-content", {
-        "dso-truncate": !!this.truncate,
-      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), this.isTruncated && (h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "truncate": ["watchTruncate"],
-    "textHover": ["watchTooltipActive"],
-    "textFocus": ["watchTooltipActive"]
-  }; }
-  static get style() { return labelCss; }
-}, [1, "dso-label", {
-    "compact": [4],
-    "removable": [4],
-    "status": [1],
-    "truncate": [4],
-    "removeHover": [32],
-    "removeFocus": [32],
-    "textHover": [32],
-    "textFocus": [32],
-    "isTruncated": [32],
-    "labelText": [32],
-    "_truncateLabel": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-label", "dso-icon", "dso-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-label":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Label);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "dso-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { L as Label, d as defineCustomElement$1 } from './label.js';
 
 const DsoLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-label.js.map

@@ -1 +1 @@
-{"file":"dso-label.js","mappings":"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","names":["debounce"],"sources":["./src/components/label/label.scss?tag=dso-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-width: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { debounce } from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150)\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private keydownListenerActive = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated?: boolean;\r\n\r\n  @State()\r\n  labelText: string | null = null;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Watch(\"textHover\")\r\n  @Watch(\"textFocus\")\r\n  watchTooltipActive() {\r\n    if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {\r\n      document.addEventListener(\"keydown\", this.keyDownListener);\r\n      this.keydownListenerActive = true;\r\n    }\r\n\r\n    if (!this.textHover && !this.textFocus) {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.keydownListenerActive = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    if (this.mutationObserver) {\r\n      return;\r\n    }\r\n\r\n    this.mutationObserver = new MutationObserver((entries) => entries.forEach(() => this.syncLabelText()));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.labelText = this.host.textContent;\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    document.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n    resizeObserver.unobserve(this.host);\r\n    this.isTruncated = undefined;\r\n    this.keydownListenerActive = false;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-label.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}