kritzel-stencil 0.0.155 → 0.0.156

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -1,310 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { ObjectHelper } from "../../../helpers/object.helper";
-import { KritzelHTMLHelper } from "../../../helpers/html.helper";
-export class KritzelPortal {
-    host;
-    anchor;
-    anchorChanged(newValue) {
-        if (newValue) {
-            this.openPortal();
-            this.calculatePosition();
-            if (this.autoFocus) {
-                this.focusFirstElement();
-            }
-        }
-        else {
-            this.closePortal();
-        }
-    }
-    offsetX;
-    offsetY;
-    autoFocus = true;
-    close;
-    handleOutsideClick(event) {
-        event.stopPropagation();
-        const isLastPortal = this.lastAddedPortal === this.portal;
-        if (!isLastPortal)
-            return;
-        const target = event.target;
-        if (!this.host.contains(target)) {
-            this.close.emit();
-            this.closePortal();
-        }
-    }
-    handleKeyDown(event) {
-        event.stopPropagation();
-        const isLastPortal = this.lastAddedPortal === this.portal;
-        if (!isLastPortal)
-            return;
-        if (event.key === 'Escape') {
-            this.anchor.focus();
-            this.close.emit();
-            this.closePortal();
-        }
-        if (event.key === 'Tab') {
-            this.trapFocus(event);
-        }
-        if (event.key === 'Enter') {
-            const activeElement = this.getDeepActiveElement();
-            if (activeElement?.click) {
-                event.preventDefault();
-                activeElement.click();
-            }
-        }
-    }
-    handleResize() {
-        this.calculatePosition();
-    }
-    handleWindowScroll() {
-        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
-        if (!isInViewport) {
-            this.anchor?.blur();
-            this.closePortal();
-            return;
-        }
-        this.calculatePosition();
-    }
-    portal;
-    id = `portal-${ObjectHelper.generateUUID()}`;
-    defaultOffset = 0;
-    minLeft = 0;
-    focusFirstElement() {
-        requestAnimationFrame(() => {
-            this.firstFocusableElement?.focus?.();
-        });
-    }
-    getDeepActiveElement() {
-        let activeEl = document.activeElement;
-        while (activeEl?.shadowRoot?.activeElement) {
-            activeEl = activeEl.shadowRoot.activeElement;
-        }
-        return activeEl;
-    }
-    trapFocus(event) {
-        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
-        if (focusableElements.length === 0)
-            return;
-        const firstFocusable = focusableElements[0];
-        const lastFocusable = focusableElements[focusableElements.length - 1];
-        const activeElement = this.getDeepActiveElement();
-        if (event.shiftKey) {
-            /* shift + tab */
-            if (activeElement === firstFocusable) {
-                lastFocusable.focus();
-                event.preventDefault();
-            }
-        }
-        else {
-            /* tab */
-            if (activeElement === lastFocusable) {
-                firstFocusable.focus();
-                event.preventDefault();
-            }
-        }
-    }
-    get firstFocusableElement() {
-        const slotEl = this.host.shadowRoot?.querySelector('slot');
-        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
-        if (!firstAssigned)
-            return null;
-        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
-        return focusable[0] ?? firstAssigned;
-    }
-    get lastAddedPortal() {
-        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
-        return portals.length ? portals[portals.length - 1] : null;
-    }
-    calculateLeft() {
-        if (!this.anchor || !this.portal)
-            return 0;
-        const refRect = this.anchor.getBoundingClientRect();
-        const portalRect = this.portal.getBoundingClientRect();
-        const offset = this.offsetX ?? this.defaultOffset;
-        let left = refRect.left + offset;
-        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
-        if (left < this.minLeft)
-            left = this.minLeft;
-        if (left > maxLeft)
-            left = maxLeft;
-        return Math.round(left + window.scrollX);
-    }
-    calculateTop() {
-        if (!this.anchor || !this.portal)
-            return 0;
-        const refRect = this.anchor.getBoundingClientRect();
-        const portalRect = this.portal.getBoundingClientRect();
-        const offset = this.offsetY ?? this.defaultOffset;
-        let top = refRect.bottom + offset;
-        if (top + portalRect.height > window.innerHeight) {
-            top = refRect.top - portalRect.height - offset;
-        }
-        return Math.round(top + window.scrollY);
-    }
-    openPortal() {
-        this.portal = document.createElement('div');
-        this.portal.setAttribute('id', this.id);
-        this.portal.style.zIndex = '1';
-        this.portal.style.position = 'absolute';
-        this.portal.style.top = '0px';
-        this.portal.style.left = '0px';
-        this.portal.appendChild(this.host);
-        document.body.append(this.portal);
-    }
-    closePortal() {
-        const portal = document.getElementById(this.id);
-        if (!portal)
-            return;
-        document.body.removeChild(portal);
-        this.host.remove();
-    }
-    calculatePosition() {
-        if (!this.anchor || !this.portal)
-            return;
-        const top = this.calculateTop();
-        const left = this.calculateLeft();
-        this.portal.style.top = `${top}px`;
-        this.portal.style.left = `${left}px`;
-    }
-    render() {
-        return (h(Host, { key: '9c5cdf7126ff1148dd2364cce9d2524862e27d13', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '209a77246fedcea0c24882605487452ff5cc62ce' })));
-    }
-    static get is() { return "kritzel-portal"; }
-    static get encapsulation() { return "shadow"; }
-    static get properties() {
-        return {
-            "anchor": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "offsetX": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "offset-x"
-            },
-            "offsetY": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "offset-y"
-            },
-            "autoFocus": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "auto-focus",
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "close",
-                "name": "close",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "anchor",
-                "methodName": "anchorChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleOutsideClick",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "resize",
-                "method": "handleResize",
-                "target": "window",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "scroll",
-                "method": "handleWindowScroll",
-                "target": "window",
-                "capture": true,
-                "passive": true
-            }];
-    }
-}
-//# sourceMappingURL=kritzel-portal.js.map

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kritzel-portal.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-portal/kritzel-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() anchor: HTMLElement;\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.openPortal();\r\n      this.calculatePosition();\r\n      if (this.autoFocus) {\r\n        this.focusFirstElement();\r\n      }\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Prop() offsetX: number;\r\n  @Prop() offsetY: number;\r\n  @Prop() autoFocus: boolean = true;\r\n\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    if (event.key === 'Escape') {\r\n      this.anchor.focus();\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n\r\n    if (event.key === 'Tab') {\r\n      this.trapFocus(event);\r\n    }\r\n\r\n    if (event.key === 'Enter') {\r\n      const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n      if (activeElement?.click) {\r\n        event.preventDefault();\r\n        activeElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  @Listen('scroll', { target: 'window', capture: true })\r\n  handleWindowScroll() {\r\n    const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n    if (!isInViewport) {\r\n      this.anchor?.blur();\r\n      this.closePortal();\r\n      return;\r\n    }\r\n\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private portal: HTMLElement;\r\n  private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n  private defaultOffset = 0;\r\n  private minLeft = 0;\r\n\r\n  private focusFirstElement() {\r\n    requestAnimationFrame(() => {\r\n      this.firstFocusableElement?.focus?.();\r\n    });\r\n  }\r\n\r\n  private getDeepActiveElement(): Element {\r\n    let activeEl = document.activeElement;\r\n    while (activeEl?.shadowRoot?.activeElement) {\r\n      activeEl = activeEl.shadowRoot.activeElement;\r\n    }\r\n    return activeEl;\r\n  }\r\n\r\n  private trapFocus(event: KeyboardEvent) {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length === 0) return;\r\n\r\n    const firstFocusable = focusableElements[0];\r\n    const lastFocusable = focusableElements[focusableElements.length - 1];\r\n    const activeElement = this.getDeepActiveElement();\r\n\r\n    if (event.shiftKey) {\r\n      /* shift + tab */\r\n      if (activeElement === firstFocusable) {\r\n        lastFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    } else {\r\n      /* tab */\r\n      if (activeElement === lastFocusable) {\r\n        firstFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    }\r\n  }\r\n\r\n  private get firstFocusableElement(): HTMLElement | null {\r\n    const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n    if (!firstAssigned) return null;\r\n\r\n    const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);\r\n    return focusable[0] ?? firstAssigned;\r\n  }\r\n\r\n  private get lastAddedPortal(): HTMLElement | null {\r\n    const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n    return portals.length ? portals[portals.length - 1] : null;\r\n  }\r\n\r\n  private calculateLeft() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n\r\n    const offset = this.offsetX ?? this.defaultOffset;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n    if (left < this.minLeft) left = this.minLeft;\r\n    if (left > maxLeft) left = maxLeft;\r\n\r\n    return Math.round(left + window.scrollX);\r\n  }\r\n\r\n  private calculateTop() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n    const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private openPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', this.id);\r\n    this.portal.style.zIndex = '1';\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    this.portal.appendChild(this.host);\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private closePortal() {\r\n    const portal = document.getElementById(this.id);\r\n    if (!portal) return;\r\n    document.body.removeChild(portal);\r\n    this.host.remove();\r\n  }\r\n\r\n  private calculatePosition() {\r\n    if (!this.anchor || !this.portal) return;\r\n    const top = this.calculateTop();\r\n    const left = this.calculateLeft();\r\n    this.portal.style.top = `${top}px`;\r\n    this.portal.style.left = `${left}px`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css

@@ -1,78 +0,0 @@
-:host {
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-family: sans-serif;
-  z-index: 1;
-  padding: var(--kritzel-split-button-padding, 4px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
-  gap: var(--kritzel-split-button-gap, 4px);
-}
-
-:host(.mobile){
-  --kritzel-split-button-hover-background-color: transparent;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: all;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.split-main-button,
-.split-menu-button {
-  height: auto;
-  display: flex;
-  align-items: center;
-  padding: var(--kritzel-split-button-padding, 8px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  font-size: var(--kritzel-split-button-font-size, 14px);
-}
-
-.split-main-button:hover,
-.split-menu-button:hover {
-  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.split-main-button:focus,
-.split-menu-button:focus {
-  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.split-main-button {
-  gap: var(--kritzel-split-button-gap, 4px);
-}
-
-.split-menu-button {
-  border-left: none;
-  justify-content: center;
-}
-
-.split-divider {
-  width: var(--kritzel-split-button-divider-width, 1px);
-  height: 24px;
-  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}