@openproject/primer-view-components 0.0.0-20230808124600

package/app/components/primer/alpha/toggle_switch.css.json

@@ -0,0 +1,40 @@
+{
+  "name": "alpha/toggle_switch",
+  "selectors": [
+    ".ToggleSwitch",
+    ".ToggleSwitch.ToggleSwitch",
+    ".ToggleSwitch--checked .ToggleSwitch-statusOn",
+    ".ToggleSwitch--checked .ToggleSwitch-statusOff",
+    ".ToggleSwitch-track",
+    ".ToggleSwitch-track:focus",
+    ".ToggleSwitch-track:focus-visible",
+    ".ToggleSwitch-track:hover",
+    ".ToggleSwitch-track:active",
+    ".ToggleSwitch-track:before",
+    ".ToggleSwitch-track *",
+    ".ToggleSwitch-track[aria-pressed=true][disabled]",
+    ".ToggleSwitch-track[aria-pressed=true]",
+    ".ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover",
+    ".ToggleSwitch-track[aria-pressed=true]:not([disabled]):active",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[disabled]",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-icons",
+    ".ToggleSwitch-lineIcon",
+    ".ToggleSwitch-circleIcon",
+    ".ToggleSwitch-knob",
+    ".ToggleSwitch-status",
+    ".ToggleSwitch-statusIcon",
+    ".ToggleSwitch--small .ToggleSwitch-status",
+    ".ToggleSwitch--small .ToggleSwitch-track",
+    ".ToggleSwitch--disabled .ToggleSwitch-status",
+    ".ToggleSwitch-statusOn",
+    ".ToggleSwitch-statusOff",
+    ".ToggleSwitch--statusAtEnd",
+    ".ToggleSwitch--statusAtEnd .ToggleSwitch-status"
+  ]
+}

package/app/components/primer/alpha/toggle_switch.d.ts

@@ -0,0 +1,30 @@
+declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    private toggling;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): Promise<void>;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private submitForm;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+    }
+}
+export {};

package/app/components/primer/alpha/toggle_switch.js

@@ -0,0 +1,165 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.toggling = false;
+    }
+    get src() {
+        const src = this.getAttribute('src');
+        if (!src)
+            return null;
+        const link = this.ownerDocument.createElement('a');
+        link.href = src;
+        return link.href;
+    }
+    get csrf() {
+        const csrfElement = this.querySelector('[data-csrf]');
+        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+    }
+    get csrfField() {
+        // the authenticity token is passed into the element and is not generated in js land
+        return this.getAttribute('csrf-field') || 'authenticity_token';
+    }
+    isRemote() {
+        return this.src != null;
+    }
+    async toggle() {
+        if (this.toggling)
+            return;
+        this.toggling = true;
+        if (this.isDisabled()) {
+            return;
+        }
+        if (!this.isRemote()) {
+            this.performToggle();
+            this.toggling = false;
+            return;
+        }
+        // toggle immediately to tell screen readers the switch was clicked
+        this.performToggle();
+        this.setLoadingState();
+        try {
+            await this.submitForm();
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                // because we toggle immediately when the switch is clicked, toggle back to the
+                // old state on failure
+                this.setErrorState(error.message || 'An error occurred, please try again.');
+                this.performToggle();
+            }
+            return;
+        }
+        finally {
+            this.toggling = false;
+        }
+        this.setSuccessState();
+    }
+    turnOn() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-pressed', 'true');
+        this.classList.add('ToggleSwitch--checked');
+    }
+    turnOff() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-pressed', 'false');
+        this.classList.remove('ToggleSwitch--checked');
+    }
+    isOn() {
+        return this.switch.getAttribute('aria-pressed') === 'true';
+    }
+    isOff() {
+        return !this.isOn();
+    }
+    isDisabled() {
+        return this.switch.getAttribute('disabled') != null;
+    }
+    disable() {
+        this.switch.setAttribute('disabled', 'disabled');
+    }
+    enable() {
+        this.switch.removeAttribute('disabled');
+    }
+    performToggle() {
+        if (this.isOn()) {
+            this.turnOff();
+        }
+        else {
+            this.turnOn();
+        }
+    }
+    setLoadingState() {
+        this.errorIcon.setAttribute('hidden', 'hidden');
+        this.loadingSpinner.removeAttribute('hidden');
+        const event = new CustomEvent('toggleSwitchLoading', { bubbles: true });
+        this.dispatchEvent(event);
+    }
+    setSuccessState() {
+        const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
+        this.dispatchEvent(event);
+        this.setFinishedState(false);
+    }
+    setErrorState(message) {
+        const event = new CustomEvent('toggleSwitchError', { bubbles: true, detail: message });
+        this.dispatchEvent(event);
+        this.setFinishedState(true);
+    }
+    setFinishedState(error) {
+        if (error) {
+            this.errorIcon.removeAttribute('hidden');
+        }
+        this.loadingSpinner.setAttribute('hidden', 'hidden');
+    }
+    async submitForm() {
+        const body = new FormData();
+        if (this.csrf) {
+            body.append(this.csrfField, this.csrf);
+        }
+        body.append('value', this.isOn() ? '1' : '0');
+        if (!this.src)
+            throw new Error('invalid src');
+        let response;
+        try {
+            response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest'
+                },
+                body
+            });
+        }
+        catch (error) {
+            throw new Error('A network error occurred, please try again.');
+        }
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+if (!window.customElements.get('toggle-switch')) {
+    window.ToggleSwitchElement = ToggleSwitchElement;
+    window.customElements.define('toggle-switch', ToggleSwitchElement);
+}

package/app/components/primer/alpha/tool_tip.d.ts

@@ -0,0 +1,26 @@
+import '@oddbird/popover-polyfill';
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+declare class ToolTipElement extends HTMLElement {
+    #private;
+    styles(): string;
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    get type(): 'description' | 'label';
+    set type(value: 'description' | 'label');
+    get direction(): Direction;
+    set direction(value: Direction);
+    get control(): HTMLElement | null;
+    set hiddenFromView(value: true | false);
+    get hiddenFromView(): true | false;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): Promise<void>;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ToolTipElement: typeof ToolTipElement;
+    }
+}
+export {};

package/app/components/primer/alpha/tool_tip.js

@@ -0,0 +1,427 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+import '@oddbird/popover-polyfill';
+import { getAnchoredPosition } from '@primer/behaviors';
+const TOOLTIP_ARROW_EDGE_OFFSET = 6;
+const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
+const TOOLTIP_OFFSET = 10;
+const DIRECTION_CLASSES = [
+    'tooltip-n',
+    'tooltip-s',
+    'tooltip-e',
+    'tooltip-w',
+    'tooltip-ne',
+    'tooltip-se',
+    'tooltip-nw',
+    'tooltip-sw'
+];
+function closeOpenTooltips(except) {
+    for (const tooltip of openTooltips) {
+        if (tooltip === except)
+            continue;
+        if (tooltip.matches(':popover-open')) {
+            tooltip.hidePopover();
+        }
+        else {
+            openTooltips.delete(tooltip);
+        }
+    }
+}
+function focusOutListener() {
+    closeOpenTooltips();
+}
+const tooltips = new Set();
+const openTooltips = new Set();
+class ToolTipElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ToolTipElement_instances.add(this);
+        _ToolTipElement_abortController.set(this, void 0);
+        _ToolTipElement_align.set(this, 'center');
+        _ToolTipElement_side.set(this, 'outside-bottom');
+        _ToolTipElement_allowUpdatePosition.set(this, false);
+    }
+    styles() {
+        return `
+      :host {
+        padding: .5em .75em !important;
+        font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        -webkit-font-smoothing: subpixel-antialiased;
+        color: var(--color-fg-on-emphasis) !important;
+        text-align: center;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: break-word;
+        white-space: pre;
+        background: var(--color-neutral-emphasis-plus) !important;
+        border-radius: 6px;
+        border: 0 !important;
+        opacity: 0;
+        max-width: 250px;
+        word-wrap: break-word;
+        white-space: normal;
+        width: max-content !important;
+        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        overflow: visible !important;
+      }
+
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--color-neutral-emphasis-plus);
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0
+      }
+
+      @keyframes tooltip-appear {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1
+        }
+      }
+
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: ""
+      }
+
+      :host(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%
+      }
+
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--color-neutral-emphasis-plus)
+      }
+    `;
+    }
+    get htmlFor() {
+        return this.getAttribute('for') || '';
+    }
+    set htmlFor(value) {
+        this.setAttribute('for', value);
+    }
+    get type() {
+        const type = this.getAttribute('data-type');
+        return type === 'label' ? 'label' : 'description';
+    }
+    set type(value) {
+        this.setAttribute('data-type', value);
+    }
+    get direction() {
+        return (this.getAttribute('data-direction') || 's');
+    }
+    set direction(value) {
+        this.setAttribute('data-direction', value);
+    }
+    get control() {
+        return this.ownerDocument.getElementById(this.htmlFor);
+    }
+    /* @deprecated */
+    set hiddenFromView(value) {
+        if (value && this.matches(':popover-open')) {
+            this.hidePopover();
+        }
+        else if (!value && this.matches(':not(:popover-open)')) {
+            this.showPopover();
+        }
+    }
+    /* @deprecated */
+    get hiddenFromView() {
+        return !this.matches(':popover-open');
+    }
+    connectedCallback() {
+        var _a, _b;
+        tooltips.add(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: 'open' });
+            const style = shadow.appendChild(document.createElement('style'));
+            style.textContent = this.styles();
+            shadow.appendChild(document.createElement('slot'));
+        }
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
+        __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
+        if (!this.control)
+            return;
+        this.setAttribute('role', 'tooltip');
+        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
+        this.addEventListener('mouseleave', this, { signal });
+        this.addEventListener('toggle', this, { signal });
+        this.control.addEventListener('mouseenter', this, { signal });
+        this.control.addEventListener('mouseleave', this, { signal });
+        this.control.addEventListener('focus', this, { signal });
+        this.control.addEventListener('mousedown', this, { signal });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore popoverTargetElement is not in the type definition
+        (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
+            signal
+        });
+        this.ownerDocument.addEventListener('focusout', focusOutListener);
+        this.ownerDocument.addEventListener('keydown', this, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        tooltips.delete(this);
+        openTooltips.delete(this);
+        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    async handleEvent(event) {
+        if (!this.control)
+            return;
+        const showing = this.matches(':popover-open');
+        // Ensures that tooltip stays open when hovering between tooltip and element
+        // WCAG Success Criterion 1.4.13 Hoverable
+        const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
+        const isMouseLeaveFromButton = event.type === 'mouseleave' &&
+            event.relatedTarget !== this.control &&
+            event.relatedTarget !== this;
+        const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
+        const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
+        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
+        const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
+        await Promise.resolve();
+        if (!showing && shouldShow && this.matches(':not(:popover-open)')) {
+            this.showPopover();
+        }
+        else if (showing && shouldHide && this.matches(':popover-open')) {
+            this.hidePopover();
+        }
+        if (event.type === 'toggle') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, event.newState === 'open');
+        }
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'id' || name === 'data-type') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
+        }
+        else if (name === 'data-direction') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
+        }
+    }
+}
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
+    if (isOpen) {
+        openTooltips.add(this);
+        this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
+        closeOpenTooltips(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
+    }
+    else {
+        openTooltips.delete(this);
+        this.classList.remove(...DIRECTION_CLASSES);
+        this.classList.add(TOOLTIP_SR_ONLY_CLASS);
+    }
+}, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
+    if (!this.id || !this.control)
+        return;
+    if (this.type === 'label') {
+        let labelledBy = this.control.getAttribute('aria-labelledby');
+        if (labelledBy) {
+            if (!labelledBy.split(' ').includes(this.id)) {
+                labelledBy = `${labelledBy} ${this.id}`;
+            }
+            else {
+                labelledBy = `${labelledBy}`;
+            }
+        }
+        else {
+            labelledBy = this.id;
+        }
+        this.control.setAttribute('aria-labelledby', labelledBy);
+        // Prevent duplicate accessible name announcements.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        let describedBy = this.control.getAttribute('aria-describedby');
+        if (describedBy) {
+            if (!describedBy.split(' ').includes(this.id)) {
+                describedBy = `${describedBy} ${this.id}`;
+            }
+            else {
+                describedBy = `${describedBy}`;
+            }
+        }
+        else {
+            describedBy = this.id;
+        }
+        this.control.setAttribute('aria-describedby', describedBy);
+    }
+}, _ToolTipElement_updateDirection = function _ToolTipElement_updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES);
+    const direction = this.direction;
+    if (direction === 'n') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+    else if (direction === 'ne') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+    else if (direction === 'e') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
+    }
+    else if (direction === 'se') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 's') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 'sw') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 'w') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
+    }
+    else if (direction === 'nw') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
+    if (!this.control)
+        return;
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !this.matches(':popover-open'))
+        return;
+    const position = getAnchoredPosition(this, this.control, {
+        side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
+        align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
+        anchorOffset: TOOLTIP_OFFSET
+    });
+    const anchorSide = position.anchorSide;
+    const align = position.anchorAlign;
+    this.style.setProperty('--tool-tip-position-top', `${position.top}px`);
+    this.style.setProperty('--tool-tip-position-left', `${position.left}px`);
+    let direction = 's';
+    if (anchorSide === 'outside-left') {
+        direction = 'w';
+    }
+    else if (anchorSide === 'outside-right') {
+        direction = 'e';
+    }
+    else if (anchorSide === 'outside-top') {
+        if (align === 'center') {
+            direction = 'n';
+        }
+        else if (align === 'start') {
+            direction = 'ne';
+        }
+        else {
+            direction = 'nw';
+        }
+    }
+    else {
+        if (align === 'center') {
+            direction = 's';
+        }
+        else if (align === 'start') {
+            direction = 'se';
+        }
+        else {
+            direction = 'sw';
+        }
+    }
+    this.classList.add(`tooltip-${direction}`);
+};
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id'];
+if (!window.customElements.get('tool-tip')) {
+    window.ToolTipElement = ToolTipElement;
+    window.customElements.define('tool-tip', ToolTipElement);
+}