@dso-toolkit/core 43.0.0 → 44.0.0

package/dist/types/components/image-overlay/image-overlay.d.ts

@@ -4,12 +4,17 @@ export declare class ImageOverlay implements ComponentInterface {
   host: HTMLElement;
   active: boolean;
   focused: boolean;
+  zoomable: boolean;
   buttonElement: HTMLButtonElement | undefined;
   wrapperElement: HTMLDivElement | undefined;
   trap: FocusTrap | undefined;
   private mutationObserver?;
+  private resizeObserver?;
+  loadListener(event: Event): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  initZoomableImage(): void;
+  setZoomable(imageElement: HTMLImageElement): void;
   render(): any;
   componentDidRender(): void;
 }

package/dist/types/components/info-button/info-button.d.ts

@@ -4,10 +4,12 @@ export interface InfoButtonToggleEvent {
   active: boolean;
 }
 export declare class InfoButton {
+  private button?;
   active?: boolean;
   secondary?: boolean;
   label: string;
   toggle: EventEmitter<InfoButtonToggleEvent>;
+  setFocus(): Promise<void>;
   private handleToggle;
   render(): any;
 }

package/dist/types/components/label/label.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 export declare class Label implements ComponentInterface {
-  private mutationObserver?;
+  private mutationObserver;
   private resizeObserver;
   private labelContent;
   private keydownListenerActive;
@@ -14,6 +14,7 @@ export declare class Label implements ComponentInterface {
   textHover?: boolean;
   textFocus?: boolean;
   truncatedContent?: string | null;
+  labelText?: string;
   removeClick: EventEmitter<MouseEvent>;
   watchTruncate(truncate: boolean): void;
   watchTooltipActive(): void;

package/dist/types/components/label/label.template.d.ts

@@ -1,2 +1,2 @@
 import { Label } from '@dso-toolkit/sources';
-export declare function labelTemplate({ status, label, button, compact, truncate, symbol }: Label): import("lit-html").TemplateResult<1>;
+export declare function labelTemplate({ status, label, removable, onRemoveClick, compact, truncate, symbol }: Label): import("lit-html").TemplateResult<1>;

package/dist/types/components/ozon-content/nodes/{illustratie.node.d.ts → figuur.node.d.ts}

@@ -1,5 +1,5 @@
 import { OzonContentNode } from '../ozon-content-node.interface';
-export declare class OzonContentIllustratieNode implements OzonContentNode {
+export declare class OzonContentFiguurNode implements OzonContentNode {
   name: string[];
   render(node: Element): any;
 }

package/dist/types/components/ozon-content/nodes/inline-tekst-afbeelding.node.d.ts

@@ -0,0 +1,5 @@
+import { OzonContentNode } from '../ozon-content-node.interface';
+export declare class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {
+  name: string[];
+  render(node: Element): any;
+}

package/dist/types/components/ozon-content/ozon-content.d.ts

@@ -19,8 +19,12 @@ export declare class OzonContent implements ComponentInterface {
    *
    * **Do not** use this without an accessible companion element! `interactive` is only
    * meant to ease the use of the companion element for mouse/touch users.
+   *
+   * * `true`: Interactive anchor-look-alike
+   * * `"sub"`: Interactive anchor-look-alike for sub navigation
+   * * `false | undefined`: Disabled
    */
-  interactive: boolean;
+  interactive: 'sub' | '' | boolean;
   state: OzonContentNodeState;
   anchorClick: EventEmitter<OzonContentAnchorClick>;
   /**

package/dist/types/components/toggletip/toggletip.d.ts

@@ -5,9 +5,7 @@ export declare class Toggletip {
   position: "top" | "right" | "bottom" | "left";
   small?: boolean;
   secondary?: boolean;
-  infoButton: HTMLDsoInfoButtonElement;
-  button: HTMLButtonElement;
-  componentDidRender(): void;
+  infoButton?: HTMLDsoInfoButtonElement;
   click: () => void;
   open: () => void;
   close: () => void;

package/dist/types/components/viewer-grid/viewer-grid.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { FocusTrap } from "focus-trap";
 export declare type MainSize = "small" | "medium" | "large";
+export declare type LabelSizeMap = {
+  [key in MainSize]: string;
+};
 export interface ViewerGridChangeSizeEvent {
   /**
    * Indicates whether it's before or after the animation
@@ -13,6 +16,7 @@ export interface FilterpanelEvent {
   originalEvent: MouseEvent;
 }
 export declare class ViewerGrid {
+  private sizeLabelMap;
   filterpanelOpen: boolean;
   overlayOpen: boolean;
   /**

package/dist/types/components.d.ts

@@ -35,6 +35,10 @@ export namespace Components {
           * Shows progress indicator when fetching results.
          */
         "loading": boolean;
+        /**
+          * To delay progress indicator showing (in ms).
+         */
+        "loadingDelayed"?: number;
         /**
           * To override progress indicator's default loading label.
          */
@@ -166,6 +170,7 @@ export namespace Components {
         "active"?: boolean;
         "label": string;
         "secondary"?: boolean;
+        "setFocus": () => Promise<void>;
     }
     interface DsoLabel {
         "compact"?: boolean;
@@ -199,9 +204,9 @@ export namespace Components {
          */
         "inline": boolean;
         /**
-          * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.  **Do not** use this without an accessible companion element! `interactive` is only meant to ease the use of the companion element for mouse/touch users.
+          * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.  **Do not** use this without an accessible companion element! `interactive` is only meant to ease the use of the companion element for mouse/touch users.  * `true`: Interactive anchor-look-alike * `"sub"`: Interactive anchor-look-alike for sub navigation * `false | undefined`: Disabled
          */
-        "interactive": boolean;
+        "interactive": 'sub' | '' | boolean;
     }
     interface DsoPagination {
         /**
@@ -531,6 +536,10 @@ declare namespace LocalJSX {
           * Shows progress indicator when fetching results.
          */
         "loading"?: boolean;
+        /**
+          * To delay progress indicator showing (in ms).
+         */
+        "loadingDelayed"?: number;
         /**
           * To override progress indicator's default loading label.
          */
@@ -726,9 +735,9 @@ declare namespace LocalJSX {
          */
         "inline"?: boolean;
         /**
-          * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.  **Do not** use this without an accessible companion element! `interactive` is only meant to ease the use of the companion element for mouse/touch users.
+          * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.  **Do not** use this without an accessible companion element! `interactive` is only meant to ease the use of the companion element for mouse/touch users.  * `true`: Interactive anchor-look-alike * `"sub"`: Interactive anchor-look-alike for sub navigation * `false | undefined`: Disabled
          */
-        "interactive"?: boolean;
+        "interactive"?: 'sub' | '' | boolean;
         "onAnchorClick"?: (event: CustomEvent<OzonContentAnchorClick>) => void;
         /**
           * These events are only emitted when the component is `interactive`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "43.0.0",
+  "version": "44.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",
@@ -17,13 +17,7 @@
   "scripts": {
     "clear": "rimraf dist && rimraf loader",
     "build": "stencil build",
-    "start": "yarn clear && cross-env DSO_ENV=development yarn node scripts/start.js",
-    "watch": "yarn clear && cross-env DSO_ENV=development yarn node scripts/watch.js",
-    "build-www": "cross-env DSO_ENV=production yarn bin_build-storybook --static-dir ./dist,../sources/storybook-assets --output-dir ./www",
-    "bin_stencil": "stencil",
-    "bin_start-storybook": "start-storybook",
-    "bin_cypress": "cypress",
-    "bin_build-storybook": "build-storybook"
+    "watch": "yarn clear && cross-env DSO_ENV=development yarn node scripts/watch.js"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
@@ -40,19 +34,11 @@
     "@dso-toolkit/sources": "0.0.0",
     "@stencil/react-output-target": "^0.3.1",
     "@stencil/sass": "1.5.2",
-    "@storybook/addon-a11y": "6.5.9",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/web-components": "6.5.9",
     "@types/concurrently": "^7.0.0",
     "@types/debounce": "^1.2.1",
     "@types/sass": "^1.43.1",
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13.7.2",
-    "@whitespace/storybook-addon-html": "5.0.0",
     "babel-loader": "^8.2.5",
     "cheerio": "1.0.0-rc.10",
     "concurrently": "^7.1.0",

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

@@ -1,17 +0,0 @@
-import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { iconTemplate } from '../icon/icon.template';
-export function anchorTemplate({ icon, iconMode, label, modifier, url }) {
-  return html `<a
-    href=${url}
-    class=${ifDefined(modifier)}
-    target=${ifDefined((modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern')) ? '_blank' : undefined)}
-    rel=${ifDefined((modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern')) ? 'noopener noreferrer' : undefined)}
-  >${icon && iconMode !== 'after'
-    ? iconTemplate(icon)
-    : nothing}${label}${(modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern'))
-    ? html `<span class="sr-only">(Opent andere website in nieuw tabblad)</span>`
-    : nothing}${icon && iconMode === 'after'
-    ? iconTemplate(icon)
-    : nothing}</a>`;
-}

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

@@ -1,48 +0,0 @@
-import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { iconTemplate } from '../icon/icon.template';
-export function buttonTemplate(button) {
-  return 'url' in button
-    ? anchorElement(button)
-    : buttonElement(button);
-}
-function anchorElement({ url, label, modifier, id, icon, iconMode }) {
-  return html `
-    <a
-      href=${url}
-      class=${ifDefined(modifier)}
-      ?id=${id}
-    >
-      ${icon && !iconMode
-    ? iconTemplate(icon)
-    : nothing}<span class=${ifDefined(iconMode === 'only' ? 'sr-only' : undefined)}>${label}</span>${(modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern'))
-    ? html `<span class="sr-only">(Opent andere website in nieuw tabblad)</span>`
-    : nothing}${icon && iconMode
-    ? iconTemplate(icon)
-    : nothing}
-    </a>
-  `;
-}
-function buttonElement({ variant, label, type, modifier, id, disabled, icon, iconMode, ariaDescribedby, ariaExpanded, ariaHaspopup, ariaRoledescription, onClick }) {
-  type !== null && type !== void 0 ? type : (type = 'button');
-  const className = variant ? `dso-${variant}` : modifier;
-  return html `
-    <button
-      type=${type}
-      id=${ifDefined(id)}
-      class=${ifDefined(className)}
-      ?disabled=${disabled}
-      aria-describedby=${ifDefined(ariaDescribedby)}
-      aria-expanded=${ifDefined(ariaExpanded)}
-      aria-haspopup=${ifDefined(ariaHaspopup)}
-      aria-roledescription=${ifDefined(ariaRoledescription)}
-      @click=${ifDefined(onClick)}
-    >
-      ${icon && !iconMode
-    ? iconTemplate(icon)
-    : nothing}<span class=${ifDefined(iconMode === 'only' ? 'sr-only' : undefined)}>${label}</span>${icon && iconMode
-    ? iconTemplate(icon)
-    : nothing}
-    </button>
-  `;
-}

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

@@ -1,42 +0,0 @@
-import { html } from 'lit-html';
-function contextLabelTemplate(label, content, children) {
-  return html `
-    <div class="dso-context-wrapper">
-      <span class="dso-context-label">
-        ${label}
-      </span>
-      <div class="dso-context-container">
-        ${content}
-      </div>
-    </div>
-    ${children}
-  `;
-}
-function contextFieldsetTemplate(label, content, children) {
-  return html `
-    <fieldset>
-      <legend class="sr-only">
-        ${label}
-      </legend>
-      <div class="dso-context-wrapper">
-        <span class="dso-context-label" aria-hidden="true">
-          ${label}
-        </span>
-        <div class="dso-context-container">
-          ${content}
-        </div>
-      </div>
-      ${children}
-    </fieldset>
-  `;
-}
-export function contextTemplate({ label, type, content, children }) {
-  switch (type) {
-    case 'label':
-      return contextLabelTemplate(label, content, children);
-    case 'legend':
-      return contextFieldsetTemplate(label, content, children);
-    default:
-      throw new TypeError('type can only be label or legend');
-  }
-}

package/dist/collection/components/definition-list/definition-list.template.js

@@ -1,36 +0,0 @@
-import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { listTemplate } from '../list/list.template';
-function definitionTemplate({ term, descriptions }, useSrOnlyColon) {
-  return html `
-    <dt>
-      ${term}${useSrOnlyColon
-    ? html `<span class="sr-only">:</span>`
-    : ':'}
-    </dt>
-    ${descriptions.map(description => html `
-      <dd>${definitionContentTemplate(description)}</dd>
-    `)}
-  `;
-}
-function definitionContentTemplate(description) {
-  if ('content' in description) {
-    if (typeof description.content === 'string') {
-      return unsafeHTML(description.content);
-    }
-    return description.content;
-  }
-  return listTemplate(description.list);
-}
-export function definitionListTemplate({ modifier, definitions, useSrOnlyColon }) {
-  return html `
-    <dl class=${ifDefined(modifier)}>
-      ${definitions.map(definition => (modifier === null || modifier === void 0 ? void 0 : modifier.split(' ').includes('dso-columns'))
-    ? html `
-            <div>${definitionTemplate(definition, useSrOnlyColon)}</div>
-          `
-    : definitionTemplate(definition, useSrOnlyColon))}
-    </dl>
-  `;
-}

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

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

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

@@ -1,7 +0,0 @@
-import { html } from 'lit-html';
-import { labelTemplate } from '../label/label.template';
-export function labelGroupTemplate({ labels }) {
-  return html `<div class="dso-label-group">
-    ${labels.map(labels => labelTemplate(labels))}
-  </div>`;
-}

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

@@ -1,44 +0,0 @@
-// Keep in sync with packages\css\src\components\list\list.template.ts (https://github.com/dso-toolkit/dso-toolkit/issues/1438)
-import { Type } from '@dso-toolkit/sources';
-import { html, nothing } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map.js';
-function ul(children, modifier) {
-  return html `
-    <ul class="${classMap({
-    'list-group': modifier === 'group',
-    'dso-columns-list': modifier === 'columns',
-    'dso-img-list': modifier === 'img-list'
-  })}">
-      ${children}
-    </ul>
-  `;
-}
-function ol(children, modifier) {
-  return html `
-    <ol class="${classMap({
-    'list-group': modifier === 'group',
-    'dso-columns-list': modifier === 'columns',
-    'dso-img-list': modifier === 'img-list'
-  })}">
-      ${children}
-    </ol>
-  `;
-}
-export function listTemplate({ type, items, modifier }) {
-  const children = html `
-    ${items.map(item => html `
-      <li class="${classMap({ 'list-group-item': modifier === 'group' })}">
-        ${modifier === 'img-list' ?
-    html `
-            <img src=${item.imgSrc} />
-          `
-    : nothing}
-        ${item.text}
-      </li>
-    `)}
-  `;
-  if (type === Type.Ol) {
-    return ol(children, modifier);
-  }
-  return ul(children, modifier);
-}

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-document-header.example-template.js

@@ -1,22 +0,0 @@
-import { AlertType } from "@dso-toolkit/sources";
-import { documentHeaderTemplate } from '@dso-toolkit/css/src/components/document-header/document-header.template';
-import { status, features, statusContent } from '@dso-toolkit/css/src/components/document-header/document-header.content';
-import { alertTemplate } from '../../alert/alert.template';
-import { viewerGridTemplate } from '../templates/viewer-grid.template';
-export function viewerGridDocumentHeaderExampleTemplate({ documentHeaderFeaturesOpen, documentHeaderFeatureAction, documentHeaderStatusOpen }) {
-  return viewerGridTemplate({
-    main: documentHeaderTemplate({
-      title: 'Omgevingsplan gemeente Gouda',
-      type: 'Een omgevingsplan waar de omgeving mooier van wordt',
-      owner: 'Gemeente Gouda',
-      features,
-      featureAction: documentHeaderFeatureAction,
-      featuresOpen: documentHeaderFeaturesOpen,
-      statusContentOpen: documentHeaderStatusOpen,
-      status: status(documentHeaderFeaturesOpen, documentHeaderFeatureAction),
-      statusContent
-    }),
-    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
-  });
-}
-;

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-document-list.example-template.js

@@ -1,12 +0,0 @@
-import { AlertType } from "@dso-toolkit/sources";
-import { documentListStatusDemoContentMapper } from '@dso-toolkit/css/src/components/document-list/document-list.mapper';
-import { documentListTemplate } from '@dso-toolkit/css/src/components/document-list/document-list.template';
-import { alertTemplate } from "../../alert/alert.template";
-import { viewerGridTemplate } from '../templates/viewer-grid.template';
-export function viewerGridDocumentListExampleTemplate(documentList) {
-  return viewerGridTemplate({
-    main: documentListTemplate({ items: documentList.items.map(item => (Object.assign(Object.assign({}, item), { status: documentListStatusDemoContentMapper(item.status) }))) }),
-    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
-  });
-}
-;

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-filterblok.example-template.js

@@ -1,60 +0,0 @@
-import { AlertType } from "@dso-toolkit/sources";
-import { html } from "lit-html";
-import { alertTemplate } from "../../alert/alert.template";
-import { buttonTemplate } from "../../button/button.template";
-import { contextTemplate } from "../../context/context.template";
-import { labelGroupTemplate } from "../../label-group/label-group.template";
-import { viewerGridTemplate } from "../templates/viewer-grid.template";
-export function viewerGridFilterblokExampleTemplate() {
-  const activeFilters = [
-    {
-      label: "Geldend",
-      status: "bright",
-    },
-    {
-      label: "Regels",
-      status: "bright",
-    },
-    {
-      label: "Tuin",
-      status: "bright",
-    },
-    {
-      label: "Woongebied",
-      status: "bright",
-    },
-    {
-      label: "Geluidzone",
-      status: "bright",
-    },
-    {
-      label: "Thema: milieu algemeen",
-      status: "bright",
-    },
-  ];
-  return viewerGridTemplate({
-    main: html `
-      <section class="dso-filterblok">
-        <div class="dso-highlight-box">
-          ${contextTemplate({
-      type: "label",
-      label: html `<h3>Uw keuzes</h3>`,
-      content: buttonTemplate({
-        variant: "tertiary",
-        label: "Alle opties",
-        icon: {
-          icon: "pencil",
-        },
-      }),
-      children: html `
-              <p class="dso-filterblok-address">Achterwillenseweg 9a, Gouda</p>
-              ${labelGroupTemplate({ labels: activeFilters })}
-            `,
-    })}
-        </div>
-      </section>
-    `,
-    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
-  });
-}
-;

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-tiles.example-template.js

@@ -1,17 +0,0 @@
-import { AlertType } from "@dso-toolkit/sources";
-import { html } from "lit-html";
-import { alertTemplate } from "../../alert/alert.template";
-import { tileGridTemplate } from "@dso-toolkit/css/src/components/tile-grid/tile-grid.template";
-import { tileTemplate } from "@dso-toolkit/css/src/components/tile/tile.template";
-import { viewerGridTemplate } from "../templates/viewer-grid.template";
-export function viewerGridTilesExampleTemplate(tiles) {
-  return viewerGridTemplate({
-    main: html `
-      <h2>Thema's</h2>
-      <p>Bekijk regels en beleid rond een bepaald thema.</p>
-      ${tileGridTemplate({ children: html `${tiles.map(tile => tileTemplate(tile))}` })}
-    `,
-    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
-  });
-}
-;

package/dist/dso-toolkit/p-04b8814d.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as s,F as i,g as e}from"./p-c62606a3.js";import{c as l}from"./p-4070c1e5.js";let r=class{constructor(s){o(this,s),this.removeClick=t(this,"removeClick",7),this.resizeObserver=new ResizeObserver((()=>this.truncateLabel())),this.keydownListenerActive=!1,this.keyDownListener=o=>{"Escape"==o.key&&(this.textHover=!1,this.textFocus=!1)}}watchTruncate(o){o?this.startTruncate():this.stopTruncate()}watchTooltipActive(){this.keydownListenerActive||!this.textHover&&!this.textFocus||(document.addEventListener("keydown",this.keyDownListener),this.keydownListenerActive=!0),this.textHover||this.textFocus||(document.removeEventListener("keydown",this.keyDownListener),this.keydownListenerActive=!1)}truncateLabel(){setTimeout((()=>{var o;this.labelContent&&(this.truncatedContent=(o=this.labelContent).scrollWidth>o.clientWidth?this.host.innerText:void 0)}))}componentDidLoad(){this.truncate&&this.startTruncate()}disconnectedCallback(){this.stopTruncate()}startTruncate(){this.mutationObserver=new MutationObserver((()=>{this.truncateLabel()})),this.mutationObserver.observe(this.host,{attributes:!0,subtree:!0}),this.resizeObserver.observe(this.host),this.truncateLabel()}stopTruncate(){var o;document.removeEventListener("keydown",this.keyDownListener),null===(o=this.mutationObserver)||void 0===o||o.disconnect(),this.resizeObserver.unobserve(this.host),this.truncatedContent=void 0,this.keydownListenerActive=!1}render(){const o=this.status&&r.statusMap.get(this.status);return s(i,null,s("span",{id:"toggle-anchor",class:l("dso-label",{[`dso-label-${this.status}`]:this.status,"dso-compact":this.compact&&!this.removable,"dso-hover":this.removeHover||this.removeFocus})},s("slot",{name:"symbol"}),o&&s("span",{class:"sr-only"},o,": "),s("span",{class:l("dso-label-content",{"dso-truncate":!!this.truncate}),ref:o=>this.labelContent=o,tabindex:this.truncate&&this.truncatedContent?0:-1,onMouseEnter:()=>this.textHover=!0,onMouseLeave:()=>this.textHover=!1,onFocus:()=>this.textFocus=!0,onBlur:()=>this.textFocus=!1},s("slot",null)),this.removable&&s("button",{type:"button",onClick:o=>this.removeClick.emit(o),onMouseEnter:()=>this.removeHover=!0,onMouseLeave:()=>this.removeHover=!1,onFocus:()=>this.removeFocus=!0,onBlur:()=>this.removeFocus=!1},s("span",{class:"sr-only"},"Verwijder"),s("dso-icon",{icon:"times"}))),s("dso-tooltip",{stateless:!0,for:"toggle-anchor",active:!!this.truncatedContent&&(this.textHover||this.textFocus),position:"top"},this.truncatedContent))}get host(){return e(this)}static get watchers(){return{truncate:["watchTruncate"],textHover:["watchTooltipActive"],textFocus:["watchTooltipActive"]}}};r.statusMap=new Map([["info","Opmerking"],["success","Gelukt"],["warning","Waarschuwing"],["danger","Fout"]]),r.style=":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}.dso-label:not(.dso-label-bright){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:16px;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-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.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:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:184px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}";export{r as dso_label}

package/dist/dso-toolkit/p-14fc5767.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,F as i,g as o}from"./p-c62606a3.js";let h=class{constructor(s){t(this,s),this.active=!1,this.label="Toelichting",this.position="right",this.click=()=>{this.active?this.close():this.open()},this.open=()=>{this.active=!0,this.host.addEventListener("keydown",this.keyDownListener),this.host.addEventListener("focusout",this.focusOutListener)},this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener),this.host.removeEventListener("keydown",this.keyDownListener),this.active=!1},this.focusOutListener=t=>{this.host.contains(t.relatedTarget)||this.close()},this.keyDownListener=t=>{t.defaultPrevented||"Escape"!=t.key||(this.close(),this.button.focus(),t.preventDefault())}}componentDidRender(){var t,s,i;const o=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("dso-info-button");if(!o)throw Error("dso-info-button not found");this.infoButton=o;const h=null===(i=null===(s=this.infoButton)||void 0===s?void 0:s.shadowRoot)||void 0===i?void 0:i.querySelector("button");if(!h)throw Error("button not found");this.button=h}render(){return s(i,null,s("dso-info-button",{id:"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary}),s("dso-tooltip",{stateless:!0,descriptive:!0,for:"toggle",active:this.active,position:this.position,small:this.small},s("slot",null)))}get host(){return o(this)}};h.style="*,*::after,*::before{box-sizing:border-box}:host(:focus){outline:none}";export{h as dso_toggletip}