@dso-toolkit/core 79.0.1 → 80.0.0

package/dist/collection/components/mark-bar/mark-bar.css

@@ -34,7 +34,6 @@
   background-image: none;
   border: 1px solid #275937;
   border-radius: 4px;
-  border-width: 1px;
   box-shadow: none;
   display: block;
   font-size: 1rem;
@@ -98,20 +97,10 @@
   margin-inline-start: 8px;
   color: #666;
 }
-.dso-mark-bar .dso-mark-bar-input button {
-  background-color: transparent;
-  border: 0;
-  box-shadow: none;
-  color: #39870c;
-  font-size: 0;
-  block-size: 2.5rem;
-  padding: 8px;
+.dso-mark-bar .dso-mark-bar-input dso-icon-button {
   position: absolute;
-  inset-inline-end: 0;
-  text-align: center;
-  inset-block-start: 0;
-  inline-size: 2.5rem;
-  cursor: pointer;
+  inset-inline-end: 8px;
+  inset-block-start: 8px;
 }
 
 .dso-button-container {
@@ -126,15 +115,11 @@
   border-start-end-radius: 4px;
   border-end-end-radius: 4px;
 }
-.dso-button-container button {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  color: #39870c;
+.dso-button-container dso-icon-button {
+  --dso-icon-button-tertiary-border: 0;
   cursor: pointer;
 }
-.dso-button-container button:disabled {
+.dso-button-container dso-icon-button:disabled {
   color: #ccc;
   cursor: default;
 }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -14,14 +14,14 @@ export class MarkBar {
                 value: e.target.value,
             });
         };
-        this.handleNext = (e) => {
-            this.dsoNext.emit({ originalEvent: e });
+        this.handleNext = (originalEvent) => {
+            this.dsoNext.emit({ originalEvent });
         };
-        this.handlePrevious = (e) => {
-            this.dsoPrevious.emit({ originalEvent: e });
+        this.handlePrevious = (originalEvent) => {
+            this.dsoPrevious.emit({ originalEvent });
         };
-        this.handleClear = (e) => {
-            this.dsoClear.emit({ originalEvent: e });
+        this.handleClear = (originalEvent) => {
+            this.dsoClear.emit({ originalEvent });
         };
         this.handleKeyDown = (e) => {
             if (e.key === "Enter") {
@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '2f51683143ed7aa90d6f0044dbf24d596d49e74f', class: "dso-mark-bar" }, h("div", { key: '1b87e93d4ce02bdcae6e815d3cd9bb968faa57be', class: "dso-mark-bar-input" }, h("input", { key: '96356e9e9267ee62d28a36c2340b3958376d682d', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '0da995f04b6511ec4124c9fa057cefcab0a20fe3', htmlFor: "search-input" }, h("dso-icon", { key: 'aa8bc72680f66e606f97adb8226533901bde6754', class: "dso-search-icon", icon: "search" }), h("span", { key: 'ef559fce9b3d6b9d30e5460c6f28f30247afbc74', class: "label-text" }, this.label)), h("button", { key: '101773deeea9de62c7b829ec788b4aa340976be0', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'b89bdc25831d8120eff3ebbb6ceba176b1af94ba', icon: "times" }), h("span", { key: '1dbdcf998680aa61f577f607404f02e9665c14fd', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7e5043c8f809bdec3b57b033c1369582d79d7249', class: "dso-button-container" }, h("span", { key: '027b49834f3d580243e23403077840abf9ba6ad4', class: "divider" }), h("button", { key: 'd38ebf15cd7a998505d1df8c0724c65d33e715f6', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'eb3411f5cf1007511acbadd112dbb0449eef19da', icon: "chevron-up", class: "hydrated" }), h("span", { key: '2542f599f27907a0ffa4256ae4221e4e0dfc7b44', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '90ccd55aa3c165c72d270bf93dd78b81a7a262bd' }, current, "/", totalCount), h("button", { key: '3dd64af25d3c4886aea790fb1537bd1e251db5bf', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '9aaaed878d2514e31d454e864082f9e25474cb04', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a5a142f4bee91e8bbf491801e8b4a54b2340cbc4', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '7524d95167087c5bc8d8422f61342e18d557928d', class: "dso-mark-bar" }, h("div", { key: '070d9c6e249d092396f8490a646eed354eef4085', class: "dso-mark-bar-input" }, h("input", { key: '2d04e65225ef386e2b2f1da9ea5b49c790bc6935', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cd9ceaaa1588854ff9acee780ad3e5cbec21a042', htmlFor: "search-input" }, h("dso-icon", { key: '39e04611ffa4d34cc5006e3343dfcab487effb28', class: "dso-search-icon", icon: "search" }), h("span", { key: 'ee908ad3d089c2dc87f6fd9b824d7f0b028bda59', class: "label-text" }, this.label)), h("dso-icon-button", { key: '29ccb6ee59663b2b362401143b6737b3e93a4967', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '2225312304f8e6da25b002f0e478d9bb52566571', class: "dso-button-container" }, h("span", { key: '6c92c8114c21d7ba0fff9823b691bda55a8981bb', class: "divider" }), h("dso-icon-button", { key: '3bc144595cb03249c5ad9da40d4db8feb75537c4', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '80ea007d94361aad098aecfd1db2f4653d19126b' }, current, "/", totalCount), h("dso-icon-button", { key: 'd51bda40ac64d33912d9d29d3457306617a07765', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"mark-bar.js","sourceRoot":"","sources":["../../../../src/components/mark-bar/mark-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  MarkBarClearEvent,\r\n  MarkBarFocusOptions,\r\n  MarkBarInputEvent,\r\n  MarkBarPaginationEvent,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"mark-bar.js","sourceRoot":"","sources":["../../../../src/components/mark-bar/mark-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAcpG,MAAM,OAAO,OAAO;IALpB;QAYE;;WAEG;QAEH,UAAK,GAAG,oBAAoB,CAAC;QAoDrB,gBAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC,EAAE,CAAC;gBAC5C,OAAO;YACT,CAAC;YAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,aAAa,EAAE,CAAC;gBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aACtB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,aAAyC,EAAE,EAAE;YACjE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,aAAyB,EAAE,EAAE;YACrD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,aAAyB,EAAE,EAAE;YAClD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC3C,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;KAoDH;IArHC;;OAEG;IAEH,KAAK,CAAC,QAAQ,CAAC,UAA+B,EAAE;;QAC9C,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;QAE3B,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAyDD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QAExC,OAAO,CACL,4DAAK,KAAK,EAAC,cAAc;YACvB,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,8DACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAC,GAAG,EACf,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAC/C;gBACF,8DAAO,OAAO,EAAC,cAAc;oBAC3B,iEAAU,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAY;oBAC3D,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CACtC;gBACR,wEACE,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,oBAAoB,EAC1B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC3D,CACE;YACN,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,6DAAM,KAAK,EAAC,SAAS,GAAG;gBACxB,wEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,qBAAqB,EAC3B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC9D,QAAQ,EAAE,OAAO,IAAI,CAAC,GACtB;gBACF;oBACG,OAAO;;oBAAG,UAAU,CAChB;gBACP,wEACE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,uBAAuB,EAC7B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1D,QAAQ,EAAE,OAAO,IAAI,UAAU,GAC/B,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  MarkBarClearEvent,\r\n  MarkBarFocusOptions,\r\n  MarkBarInputEvent,\r\n  MarkBarPaginationEvent,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (originalEvent: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent });\r\n  };\r\n\r\n  private handlePrevious = (originalEvent: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent });\r\n  };\r\n\r\n  private handleClear = (originalEvent: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Zoekopdracht legen\"\r\n            onDsoClick={(e) => this.handleClear(e.detail.originalEvent)}\r\n          />\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <dso-icon-button\r\n            icon=\"chevron-up\"\r\n            variant=\"tertiary\"\r\n            label=\"Vorig zoekresultaat\"\r\n            onDsoClick={(e) => this.handlePrevious(e.detail.originalEvent)}\r\n            disabled={current <= 1}\r\n          />\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <dso-icon-button\r\n            icon=\"chevron-down\"\r\n            variant=\"tertiary\"\r\n            label=\"Volgend zoekresultaat\"\r\n            onDsoClick={(e) => this.handleNext(e.detail.originalEvent)}\r\n            disabled={current >= totalCount}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/modal/modal.css

@@ -280,7 +280,8 @@ button::-moz-focus-inner {
     padding-inline: 32px;
   }
 }
-
-.dso-close dso-icon {
-  color: #39870c;
+.dso-modal .dso-header dso-icon-button {
+  position: absolute;
+  inset-block-start: 22px;
+  inset-inline-end: 17px;
 }

package/dist/collection/components/modal/modal.js

@@ -65,7 +65,7 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '5eaf8af4a00b6cea08b9872f996c9a7f0e50e17d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '54dfc35e622941cceeb9b1b1db6e9f61fb1ee54b', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '970b0770174b51254db71bbb4ea22bdade8523b2' }, h("div", { key: 'e8ac2cb14083dbb5d548fa3850d90b1233c5262e', class: "dso-body", tabIndex: 0 }, h("slot", { key: '781818fbf88305b194650eb940ee73022c07ada8', name: "body" }))), this.hasFooter && (h("div", { key: '0ea3d9327df101d07b19f171c8f7ce1cf1b96d3b', class: "dso-footer" }, h("slot", { key: 'c42adf6d3d293ab3bfc3278125bc99932ed3d55b', name: "footer" }))))));
+        return (h("dialog", { key: 'de1737260a980f446d06374029b9706ca2484a8c', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'bd24834f32196c0776560ad328d3a1da477b6a1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'ad44ea43206fbbec83bd869a6ea2908594f2da3b' }, h("div", { key: 'c66ef72ed44dd5f9ae430ed127c7f0abbc645dc3', class: "dso-body", tabIndex: 0 }, h("slot", { key: '46a6c88d08d803b4dac2a717e97bc61d093b1d1d', name: "body" }))), this.hasFooter && (h("div", { key: 'fdce7c7c4c544caf56b5cc5633d2274d74f6624f', class: "dso-footer" }, h("slot", { key: 'cfe41eb2402d36cf717c537bd155e1d2417e28df', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user:\r\n   * - clicks the close button\r\n   * - dismisses the Modal with the Escape button\r\n   * - clicks or taps outside the Modal\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  private handleDialogClick(e: MouseEvent) {\r\n    if (!this.closable) {\r\n      return;\r\n    }\r\n\r\n    if (e.target === this.htmlDialogElement) {\r\n      this.dsoClose.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  private blockEscapeKey = (e: KeyboardEvent) => {\r\n    if (e.key === \"Escape\") {\r\n      e.preventDefault();\r\n\r\n      if (this.closable) {\r\n        this.dsoClose.emit({ originalEvent: e });\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onClick={(e) => this.handleDialogClick(e)}\r\n        onKeyDown={(e) => this.blockEscapeKey(e)}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.closable && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQ5C,MAAM,OAAO,KAAK;IALlB;QAYE,WAAM,GAAG,EAAE,EAAE,CAAC;QAcd;;WAEG;QAEH,eAAU,GAAkB,QAAQ,CAAC;QAErC;;;;;;WAMG;QAEH,gBAAW,GAAoC,SAAS,CAAC;QAEzD;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAiBT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAiC3C,mBAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;KAgDH;IA7FC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,CAAC;IAID,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE,CAAC;YACxC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE,CAAC;gBACzC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;YAC1C,CAAC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,MAAA,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;IACzD,CAAC;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAYD,MAAM;;QACJ,OAAO,CACL,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,SAAS,gBACvB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACzC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;YAExC,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU;gBACpC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAC,YAAY;oBACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM;oBAC1C,IAAI,CAAC,QAAQ,IAAI,CAChB,uBACE,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC3D,CACH,CACG,CACP,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACf,CACR;gBAED;oBACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC;wBAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS;gBAEhB,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,YAAY;oBACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user:\r\n   * - clicks the close button\r\n   * - dismisses the Modal with the Escape button\r\n   * - clicks or taps outside the Modal\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  private handleDialogClick(e: MouseEvent) {\r\n    if (!this.closable) {\r\n      return;\r\n    }\r\n\r\n    if (e.target === this.htmlDialogElement) {\r\n      this.dsoClose.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  private blockEscapeKey = (e: KeyboardEvent) => {\r\n    if (e.key === \"Escape\") {\r\n      e.preventDefault();\r\n\r\n      if (this.closable) {\r\n        this.dsoClose.emit({ originalEvent: e });\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onClick={(e) => this.handleDialogClick(e)}\r\n        onKeyDown={(e) => this.blockEscapeKey(e)}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.closable && (\r\n                <dso-icon-button\r\n                  id=\"close-modal\"\r\n                  icon=\"times\"\r\n                  variant=\"tertiary\"\r\n                  label={this.text(\"close\")}\r\n                  onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n                />\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/onboarding-tip/onboarding-tip.css

@@ -94,32 +94,9 @@
 }
 
 .dso-close {
-  -webkit-appearance: button;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  block-size: 32px;
-  inline-size: 32px;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  text-align: center;
-}
-.dso-close[disabled] {
-  cursor: default;
-}
-.dso-close::-moz-focus-inner {
-  border: 0;
-  padding: 0;
+  inset-block-start: 4px;
+  inset-inline-end: 4px;
 }
 
 .onboarding-tip-inner {
@@ -138,10 +115,29 @@
   z-index: 2;
 }
 .onboarding-tip-inner {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #2b5780;
-  border-color: #2b5780;
   color: #fff;
 }
+.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.onboarding-tip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 @media screen and (max-width: 991px) {
   .onboarding-tip-inner {
     max-block-size: unset;

package/dist/collection/components/onboarding-tip/onboarding-tip.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-tip.interfaces.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type OnboardingTipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\r\n\r\nexport interface OnboardingTipCloseEvent {\r\n  originalEvent?: MouseEvent | Event;\r\n}\r\n"]}
+{"version":3,"file":"onboarding-tip.interfaces.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface OnboardingTipCloseEvent {\r\n  originalEvent?: MouseEvent | Event;\r\n}\r\n"]}

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -1,5 +1,5 @@
-import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
 import { Host, h } from "@stencil/core";
+import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
 export class OnboardingTip {
     constructor() {
         /**
@@ -7,116 +7,38 @@ export class OnboardingTip {
          */
         this.placement = "right";
         this.ready = false;
+        this.popoverOpen = false;
     }
     componentDidRender() {
-        if (!this.host.matches(":popover-open")) {
+        if (!this.host.isConnected) {
+            return;
+        }
+        if (!this.popoverOpen) {
             this.host.showPopover();
+            this.popoverOpen = true;
         }
         if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {
-            this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);
+            this.cleanUp = positionTooltip({
+                referenceElement: this.referenceElement,
+                tipRef: this.host,
+                tipArrowRef: this.tipArrowRef,
+                placementTip: `${this.placement}-start`,
+                topPositionSmallViewPort: true,
+                halfMainAxisOffset: true,
+            });
         }
     }
     disconnectedCallback() {
         var _a;
-        if (this.host.matches(":popover-open")) {
+        if (this.popoverOpen) {
             this.host.hidePopover();
+            this.popoverOpen = false;
         }
         (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
         this.cleanUp = undefined;
     }
-    /**
-     * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated
-     * only using the passed arguments.
-     */
-    static positionTip(referenceElement, tipRef, tipArrowRef, position) {
-        const padding = 5;
-        return autoUpdate(referenceElement, tipRef, () => {
-            const arrowLength = tipArrowRef.offsetWidth;
-            // Get half the arrow box's hypotenuse length
-            const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
-            // 1.5 times the diagonal of the arrow box
-            const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
-            // Same as media-query-breakpoints.$screen-md-min
-            const smallViewport = document.body.clientWidth < 992;
-            // Only use top and bottom placement when the viewport is small
-            const placement = smallViewport ? "top" : `${position}-start`;
-            computePosition(referenceElement, tipRef, {
-                strategy: "fixed",
-                middleware: [
-                    offset({
-                        mainAxis: mainAxisOffset,
-                        alignmentAxis: -arrowPadding,
-                    }),
-                    flip({
-                        padding,
-                    }),
-                    shift({
-                        padding,
-                    }),
-                    arrow({
-                        padding: arrowPadding,
-                        element: tipArrowRef,
-                    }),
-                    hide({
-                        padding: arrowPadding + arrowLength + padding,
-                    }),
-                ],
-                placement,
-            }).then(({ x, y, middlewareData, placement: computedPlacement }) => {
-                if (middlewareData.hide) {
-                    // Tooltip needs to be visible at all times on small viewports
-                    const disappear = !smallViewport && middlewareData.hide.referenceHidden;
-                    Object.assign(tipRef.style, {
-                        // Both of these properties have a CSS transition
-                        visibility: disappear ? "hidden" : "visible",
-                        opacity: disappear ? 0 : 1,
-                    });
-                }
-                Object.assign(tipRef.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                });
-                const side = computedPlacement.split("-")[0];
-                const staticSide = side
-                    ? {
-                        top: "bottom",
-                        right: "left",
-                        bottom: "top",
-                        left: "right",
-                    }[side]
-                    : "top";
-                let angle;
-                switch (staticSide) {
-                    default:
-                    case "top":
-                        angle = 45;
-                        break;
-                    case "right":
-                        angle = 135;
-                        break;
-                    case "bottom":
-                        angle = 225;
-                        break;
-                    case "left":
-                        angle = 315;
-                        break;
-                }
-                if (middlewareData.arrow && staticSide) {
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    Object.assign(tipArrowRef.style, {
-                        right: "",
-                        bottom: "",
-                        left: arrowX ? `${arrowX}px` : "",
-                        top: arrowY ? `${arrowY}px` : "",
-                        [staticSide]: `${-arrowLength / 2}px`,
-                        transform: `rotate(${angle}deg)`,
-                    });
-                }
-            });
-        });
-    }
     render() {
-        return (h(Host, { key: '9e95f4aac90d260519b2a7ff6a73611425e80029', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f3fae0538f18ba45cf4d3a5900c770bf2fd78b22', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '0da06e61c4e0b4871549495651186a1816ffd32f', class: "onboarding-tip-inner" }, h("div", { key: '808d9c41199361e12d657740a4f90d8b03be0e84', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '7beef1ae7f1b6ce1c65e5a4a6397ddd1737874e3', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'b01ba0de8b8763db7f8fce1a8d8d910b904bc267', icon: "light-bulb" }), h("slot", { key: 'cb162bbc40af0eb2f2d4f41a9a68c0a7c42d87c3', name: "heading" }))), h("button", { key: '34b22883f094f6cfcc800f6a821fbdf9244c3eb4', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: '123f94baa5049a3eef447b83ec544cf4aa957aa0', icon: "times" }), h("span", { key: 'e61ed7ac4c826b55d562e419bbb2db7d04507f95', class: "sr-only" }, "Sluiten")), h("slot", { key: '96faa01f5381ae5ba3e16cf3af25ec66f45f4ea7' }))), h("div", { key: 'e88ab7543ef36c0a9265848a789cdcf45dff10a5', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'c8639f6cb933ffaeee99bb60690c345f5f23980d', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '9db53c2f3220584e349ab63815d3bee8a29a1047', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '1d9757090851d54afe53f0b845f771190a4d5229', class: "onboarding-tip-inner" }, h("div", { key: '10d3c7714505c0cb86a876bc4e135b1ba3f18288', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'f67ea4caa88837b5a83c23b01b2da605ca576d64', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '30f9e1edd995e2df9d0d96e89125f215a5e9e94f', icon: "light-bulb" }), h("slot", { key: '11df6fa2d4d57eec21305dacc92b2c8659277697', name: "heading" }))), h("dso-icon-button", { key: '5c739c4472cf3ae4884dfe354ba7c377ffebce93', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'c078afed2b9cbe7b7ea5b34c44800b37357905d7' }))), h("div", { key: '162158dac5546d0e293b97cb88a039e56393170d', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");
@@ -132,7 +54,7 @@ export class OnboardingTip {
             console.warn(`rootNode is not instance of Document or ShadowRoot`);
             return;
         }
-        const reference = rootNode.querySelector(`[aria-describedby="${id}`);
+        const reference = rootNode.querySelector(`[aria-describedby="${id}"]`);
         if (!reference) {
             console.warn(`Unable to find reference element with aria-describedby ${id}`);
             return;
@@ -158,13 +80,13 @@ export class OnboardingTip {
                 "attribute": "placement",
                 "mutable": false,
                 "complexType": {
-                    "original": "OnboardingTipPlacement",
+                    "original": "TooltipPlacement",
                     "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                     "references": {
-                        "OnboardingTipPlacement": {
+                        "TooltipPlacement": {
                             "location": "import",
-                            "path": "./onboarding-tip.interfaces",
-                            "id": "src/components/onboarding-tip/onboarding-tip.interfaces.ts::OnboardingTipPlacement"
+                            "path": "../../functional-components/tooltip/tooltip.interfaces",
+                            "id": "src/functional-components/tooltip/tooltip.interfaces.ts::TooltipPlacement"
                         }
                     }
                 },
@@ -183,7 +105,8 @@ export class OnboardingTip {
     }
     static get states() {
         return {
-            "ready": {}
+            "ready": {},
+            "popoverOpen": {}
         };
     }
     static get events() {

package/dist/collection/components/onboarding-tip/onboarding-tip.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\nimport { Side } from \"@floating-ui/utils\";\r\nimport { Placement } from \"@popperjs/core\";\r\nimport { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { OnboardingTipCloseEvent, OnboardingTipPlacement } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: OnboardingTipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.matches(\":popover-open\")) {\r\n      this.host.showPopover();\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.host.matches(\":popover-open\")) {\r\n      this.host.hidePopover();\r\n    }\r\n\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  /**\r\n   * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated\r\n   * only using the passed arguments.\r\n   */\r\n  private static positionTip(\r\n    referenceElement: HTMLElement,\r\n    tipRef: HTMLDsoOnboardingTipElement,\r\n    tipArrowRef: HTMLDivElement,\r\n    position: Side,\r\n  ) {\r\n    const padding = 5;\r\n    return autoUpdate(referenceElement, tipRef, () => {\r\n      const arrowLength = tipArrowRef.offsetWidth;\r\n\r\n      // Get half the arrow box's hypotenuse length\r\n      const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;\r\n\r\n      // 1.5 times the diagonal of the arrow box\r\n      const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;\r\n\r\n      // Same as media-query-breakpoints.$screen-md-min\r\n      const smallViewport = document.body.clientWidth < 992;\r\n\r\n      // Only use top and bottom placement when the viewport is small\r\n      const placement: Placement = smallViewport ? \"top\" : `${position}-start`;\r\n\r\n      computePosition(referenceElement, tipRef, {\r\n        strategy: \"fixed\",\r\n        middleware: [\r\n          offset({\r\n            mainAxis: mainAxisOffset,\r\n            alignmentAxis: -arrowPadding,\r\n          }),\r\n          flip({\r\n            padding,\r\n          }),\r\n          shift({\r\n            padding,\r\n          }),\r\n          arrow({\r\n            padding: arrowPadding,\r\n            element: tipArrowRef,\r\n          }),\r\n          hide({\r\n            padding: arrowPadding + arrowLength + padding,\r\n          }),\r\n        ],\r\n        placement,\r\n      }).then(({ x, y, middlewareData, placement: computedPlacement }) => {\r\n        if (middlewareData.hide) {\r\n          // Tooltip needs to be visible at all times on small viewports\r\n          const disappear = !smallViewport && middlewareData.hide.referenceHidden;\r\n          Object.assign(tipRef.style, {\r\n            // Both of these properties have a CSS transition\r\n            visibility: disappear ? \"hidden\" : \"visible\",\r\n            opacity: disappear ? 0 : 1,\r\n          });\r\n        }\r\n\r\n        Object.assign(tipRef.style, {\r\n          left: `${x}px`,\r\n          top: `${y}px`,\r\n        });\r\n\r\n        const side = computedPlacement.split(\"-\")[0];\r\n\r\n        const staticSide = side\r\n          ? {\r\n              top: \"bottom\",\r\n              right: \"left\",\r\n              bottom: \"top\",\r\n              left: \"right\",\r\n            }[side]\r\n          : \"top\";\r\n\r\n        let angle;\r\n        switch (staticSide) {\r\n          default:\r\n          case \"top\":\r\n            angle = 45;\r\n            break;\r\n          case \"right\":\r\n            angle = 135;\r\n            break;\r\n          case \"bottom\":\r\n            angle = 225;\r\n            break;\r\n          case \"left\":\r\n            angle = 315;\r\n            break;\r\n        }\r\n\r\n        if (middlewareData.arrow && staticSide) {\r\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n          Object.assign(tipArrowRef.style, {\r\n            right: \"\",\r\n            bottom: \"\",\r\n            left: arrowX ? `${arrowX}px` : \"\",\r\n            top: arrowY ? `${arrowY}px` : \"\",\r\n            [staticSide]: `${-arrowLength / 2}px`,\r\n            transform: `rotate(${angle}deg)`,\r\n          });\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                <dso-icon icon=\"times\"></dso-icon>\r\n                <span class=\"sr-only\">Sluiten</span>\r\n              </button>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: TooltipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  @State()\r\n  popoverOpen = false;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (!this.popoverOpen) {\r\n      this.host.showPopover();\r\n      this.popoverOpen = true;\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.referenceElement,\r\n        tipRef: this.host,\r\n        tipArrowRef: this.tipArrowRef,\r\n        placementTip: `${this.placement}-start`,\r\n        topPositionSmallViewPort: true,\r\n        halfMainAxisOffset: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.popoverOpen) {\r\n      this.host.hidePopover();\r\n      this.popoverOpen = false;\r\n    }\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <dso-icon-button\r\n                class=\"dso-close\"\r\n                label=\"Sluiten\"\r\n                variant=\"tertiary\"\r\n                icon=\"times\"\r\n                onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n              />\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: TooltipClean | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"]}