@dso-toolkit/core 72.0.0 → 72.2.0

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

@@ -0,0 +1,160 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+::slotted([slot=heading]) {
+  display: flex !important;
+  align-items: center !important;
+  margin-block-end: 0 !important;
+  margin-block-start: 0 !important;
+  color: #fff !important;
+  line-height: 1.375 !important;
+}
+
+:host {
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-color: #000;
+  --_dso-button-primary-hover-background-color: #ccc;
+  --_dso-button-primary-hover-border-color: #ccc;
+  --_dso-button-primary-hover-color: #000;
+  --_dso-button-primary-active-background-color: #999;
+  --_dso-button-primary-active-border-color: #999;
+  --_dso-button-primary-active-color: #000;
+  --_dso-button-primary-disabled-background-color: #fff;
+  --_dso-button-primary-disabled-border-color: #fff;
+  --_dso-button-primary-disabled-color: #b2b2b2;
+  --_dso-button-secondary-background-color: #fff;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-color: #000;
+  --_dso-button-secondary-hover-background-color: #ccc;
+  --_dso-button-secondary-hover-border-color: #ccc;
+  --_dso-button-secondary-hover-color: #000;
+  --_dso-button-secondary-active-background-color: #999;
+  --_dso-button-secondary-active-border-color: #999;
+  --_dso-button-secondary-active-color: #000;
+  --_dso-button-secondary-disabled-background-color: #fff;
+  --_dso-button-secondary-disabled-border-color: #fff;
+  --_dso-button-secondary-disabled-color: #b2b2b2;
+  display: block;
+  filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));
+}
+
+:host([popover]) {
+  margin: 0 !important;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  overflow: unset;
+}
+
+.onboarding-tip {
+  font-family: Asap, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  line-break: auto;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: break-word;
+  word-spacing: normal;
+  word-wrap: normal;
+  white-space: normal;
+  font-size: 14px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 410;
+}
+@media screen and (max-width: 360px) {
+  .onboarding-tip {
+    padding-inline-start: 8px !important;
+  }
+}
+
+.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;
+}
+
+.onboarding-tip-inner {
+  --link-color: #fff;
+  --link-hover-color: #b2b2b2;
+  --link-visited-color: #7f7f7f;
+  max-inline-size: min(360px, 100vw - 2 * 8px);
+  max-block-size: 40vh;
+  overflow: auto;
+  padding-block: 32px 8px;
+  padding-inline: 8px;
+  border-radius: 4px;
+  display: block;
+  font-size: 1rem;
+  position: relative;
+  z-index: 2;
+}
+.onboarding-tip-inner {
+  background-color: #2b5780;
+  border-color: #2b5780;
+  color: #fff;
+}
+
+.onboarding-tip-arrow {
+  border-start-start-radius: 4px;
+  position: absolute;
+  block-size: 20px;
+  inline-size: 20px;
+  background: #2b5780;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.onboarding-tip-content-wrapper {
+  padding-inline: 16px;
+  padding-block-end: 16px;
+}
+
+.onboarding-tip-content-heading {
+  display: flex;
+}
+.onboarding-tip-content-heading dso-icon {
+  margin-inline-end: 8px;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=onboarding-tip.interfaces.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,196 @@
+import { arrow, autoUpdate, computePosition, hide, offset, flip, shift } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
+export class OnboardingTip {
+    constructor() {
+        /**
+         * Where to place the Onboarding Tip relative to its reference element.
+         */
+        this.placement = "right";
+    }
+    componentDidRender() {
+        if (!this.host.matches(":popover-open")) {
+            this.host.showPopover();
+        }
+        if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {
+            this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.host.matches(":popover-open")) {
+            this.host.hidePopover();
+        }
+        (_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, placement) {
+        // Get half the arrow box's hypotenuse length
+        const arrowLength = tipArrowRef.offsetWidth;
+        const floatingOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+        const padding = 5;
+        return autoUpdate(referenceElement, tipRef, () => {
+            computePosition(referenceElement, tipRef, {
+                strategy: "fixed",
+                middleware: [
+                    offset(floatingOffset),
+                    flip({
+                        padding,
+                    }),
+                    shift({
+                        padding,
+                    }),
+                    arrow({
+                        padding: padding + arrowLength,
+                        element: tipArrowRef,
+                    }),
+                    hide({
+                        padding: 42,
+                    }),
+                ],
+                placement,
+            }).then(({ x, y, middlewareData, placement: computedPlacement }) => {
+                if (middlewareData.hide) {
+                    Object.assign(tipRef.style, {
+                        visibility: middlewareData.hide.referenceHidden ? "hidden" : "visible",
+                    });
+                }
+                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: '81f55bb9189b1e006db917d0563d67701710f519', popover: "manual" }, h("div", { key: 'eed3544de4a3a2b592c4ae418a582e87b2ee0133', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '5847872cf4e5b918c525d62a3d592a765a8e8154', class: "onboarding-tip-inner" }, h("div", { key: 'c35d3a3fe5e926dde418019e1b8b209e6223d504', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '1911891c6aff456fc4e43f80b687f87d1ba1df9d', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3050474a5736b09709e114f1397b8160cb5b9868', icon: "light-bulb" }), h("slot", { key: '86c668f6602ba615db80c4338edc1157cdaa9999', name: "heading" }))), h("button", { key: '65d9ec9d3e84a409fa18ebd4d6343377a6e25126', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'ec8eb3a63525d2736debd7986ce5546619315553', icon: "times" }), h("span", { key: '99e9048e8003e211488c7fdd2eeda4a32c740b3a', class: "sr-only" }, "Sluiten")), h("slot", { key: '886ba7c055fc303d0186dec7ca30c90d2c6c2943' }))), h("div", { key: 'e838baea223b335370a4d0f14f300fa6d48853a7', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+    }
+    get headingSlottedElement() {
+        return this.host.querySelector("[slot='heading']");
+    }
+    get referenceElement() {
+        const id = this.host.id;
+        if (!id) {
+            console.warn("Unable to find reference. Onboarding Tip has no [id] attribute.");
+            return;
+        }
+        const rootNode = this.host.getRootNode();
+        if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+            console.warn(`rootNode is not instance of Document or ShadowRoot`);
+            return;
+        }
+        const reference = rootNode.querySelector(`[aria-describedby="${id}`);
+        if (!reference) {
+            console.warn(`Unable to find reference element with aria-describedby ${id}`);
+            return;
+        }
+        return reference;
+    }
+    static get is() { return "dso-onboarding-tip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["onboarding-tip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["onboarding-tip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "attribute": "placement",
+                "mutable": false,
+                "complexType": {
+                    "original": "OnboardingTipPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "OnboardingTipPlacement": {
+                            "location": "import",
+                            "path": "./onboarding-tip.interfaces",
+                            "id": "src/components/onboarding-tip/onboarding-tip.interfaces.ts::OnboardingTipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to place the Onboarding Tip relative to its reference element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"right\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoClose",
+                "name": "dsoClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user closes the Onboarding Tip."
+                },
+                "complexType": {
+                    "original": "OnboardingTipCloseEvent",
+                    "resolved": "OnboardingTipCloseEvent",
+                    "references": {
+                        "OnboardingTipCloseEvent": {
+                            "location": "import",
+                            "path": "./onboarding-tip.interfaces",
+                            "id": "src/components/onboarding-tip/onboarding-tip.interfaces.ts::OnboardingTipCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=onboarding-tip.js.map

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

@@ -0,0 +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, hide, offset, Placement, flip, shift } from \"@floating-ui/dom\";\r\nimport { h, Component, Element, Prop, ComponentInterface, Event, EventEmitter, Host } 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  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    placement: Placement,\r\n  ) {\r\n    // Get half the arrow box's hypotenuse length\r\n    const arrowLength = tipArrowRef.offsetWidth;\r\n    const floatingOffset = Math.sqrt(2 * arrowLength ** 2) / 2;\r\n    const padding = 5;\r\n\r\n    return autoUpdate(referenceElement, tipRef, () => {\r\n      computePosition(referenceElement, tipRef, {\r\n        strategy: \"fixed\",\r\n        middleware: [\r\n          offset(floatingOffset),\r\n          flip({\r\n            padding,\r\n          }),\r\n          shift({\r\n            padding,\r\n          }),\r\n          arrow({\r\n            padding: padding + arrowLength,\r\n            element: tipArrowRef,\r\n          }),\r\n          hide({\r\n            padding: 42,\r\n          }),\r\n        ],\r\n        placement,\r\n      }).then(({ x, y, middlewareData, placement: computedPlacement }) => {\r\n        if (middlewareData.hide) {\r\n          Object.assign(tipRef.style, {\r\n            visibility: middlewareData.hide.referenceHidden ? \"hidden\" : \"visible\",\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\">\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"]}

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

@@ -55,9 +55,9 @@ label.dso-primary.download::after {
 a.dso-primary,
 button.dso-primary,
 label.dso-primary {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
+  background-color: var(--_dso-button-primary-background-color, #39870c);
+  border-color: var(--_dso-button-primary-border-color, #39870c);
+  color: var(--_dso-button-primary-color, #fff);
 }
 a.dso-primary,
 button.dso-primary,
@@ -73,25 +73,25 @@ label.dso-primary {
 a.dso-primary:hover,
 button.dso-primary:hover,
 label.dso-primary:hover {
-  background-color: #275937;
-  border-color: #275937;
-  color: #fff;
+  background-color: var(--_dso-button-primary-hover-background-color, #275937);
+  border-color: var(--_dso-button-primary-hover-border-color, #275937);
+  color: var(--_dso-button-primary-hover-color, #fff);
 }
 a.dso-primary:active,
 button.dso-primary:active,
 label.dso-primary:active {
-  background-color: #173521;
-  border-color: #173521;
-  color: #fff;
+  background-color: var(--_dso-button-primary-active-background-color, #173521);
+  border-color: var(--_dso-button-primary-active-border-color, #173521);
+  color: var(--_dso-button-primary-active-color, #fff);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
 button.dso-primary[disabled]:hover,
 label.dso-primary[disabled],
 label.dso-primary[disabled]:hover {
-  background-color: #afcf9d;
-  border-color: #afcf9d;
-  color: #fff;
+  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
+  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-primary-disabled-color, #fff);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -238,9 +238,9 @@ label.dso-secondary.download::after {
 a.dso-secondary,
 button.dso-secondary,
 label.dso-secondary {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -256,25 +256,25 @@ label.dso-secondary {
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
-  background-color: #d7e7ce;
-  border-color: #39870c;
-  color: #39870c;
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
+  color: var(--_dso-button-secondary-hover-color, #39870c);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
 label.dso-secondary:active {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
+  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
+  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  color: var(--_dso-button-secondary-active-color, #fff);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
 button.dso-secondary[disabled]:hover,
 label.dso-secondary[disabled],
 label.dso-secondary[disabled]:hover {
-  background-color: #fff;
-  border-color: #afcf9d;
-  color: #afcf9d;
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,

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

@@ -26,7 +26,7 @@ export class OzonContent {
             urlResolver: this.urlResolver,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '1e3413dc949ad16b20ac3209da2fe7a52f6c2fea' }, transformed);
+        return h(Fragment, { key: '65ffbfbf7a622e4adc07cba9aaacbcdf0334927d' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }
@@ -44,6 +44,7 @@ export class OzonContent {
         return {
             "content": {
                 "type": "string",
+                "attribute": "content",
                 "mutable": false,
                 "complexType": {
                     "original": "OzonContentInputType",
@@ -64,11 +65,11 @@ export class OzonContent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "content",
                 "reflect": false
             },
             "inline": {
                 "type": "boolean",
+                "attribute": "inline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -83,12 +84,12 @@ export class OzonContent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inline",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "mark": {
                 "type": "unknown",
+                "attribute": "mark",
                 "mutable": false,
                 "complexType": {
                     "original": "OzonContentMarkFunction",
@@ -112,6 +113,7 @@ export class OzonContent {
             },
             "urlResolver": {
                 "type": "unknown",
+                "attribute": "url-resolver",
                 "mutable": false,
                 "complexType": {
                     "original": "OzonContentUrlResolver",

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

@@ -1 +1 @@
-{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EAET,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,QAAQ,EAER,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAY/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAgCf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAiBH;IA1BC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;YACzC,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL;QACE,mBAAY;QACZ,4BAAqB;QACrB,sBAAe;QACf,oBAAa,CACZ,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Prop,\r\n  State,\r\n  Fragment,\r\n  JSX,\r\n  Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport {\r\n  OzonContentAnchorClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkFunction,\r\n  OzonContentMarkItemHighlightEvent,\r\n  OzonContentUrlResolver,\r\n} from \"./ozon-content.interfaces\";\r\n\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: OzonContentMarkFunction;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  urlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n      urlResolver: this.urlResolver,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EAET,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,QAAQ,EAER,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAY/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAgCf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAiBH;IA1BC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;YACzC,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL;QACE,mBAAY;QACZ,4BAAqB;QACrB,sBAAe;QACf,oBAAa,CACZ,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Prop,\r\n  State,\r\n  Fragment,\r\n  JSX,\r\n  Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport {\r\n  OzonContentAnchorClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkFunction,\r\n  OzonContentMarkItemHighlightEvent,\r\n  OzonContentUrlResolver,\r\n} from \"./ozon-content.interfaces\";\r\n\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: OzonContentMarkFunction;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  urlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n      urlResolver: this.urlResolver,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/pagination/pagination.js

@@ -154,6 +154,7 @@ export class Pagination {
         return {
             "totalPages": {
                 "type": "number",
+                "attribute": "total-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -168,11 +169,11 @@ export class Pagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total-pages",
                 "reflect": false
             },
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -187,11 +188,11 @@ export class Pagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current-page",
                 "reflect": false
             },
             "formatHref": {
                 "type": "unknown",
+                "attribute": "format-href",
                 "mutable": false,
                 "complexType": {
                     "original": "(page: number) => string",