@aquera/nile-elements 0.1.35-beta-1.2 → 0.1.35

package/dist/src/nile-filter-chip/nile-filter-chip.css.js

@@ -1,110 +0,0 @@
-/**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-import { css } from 'lit';
-/**
- * FilterChip CSS
- */
-export const styles = css `
-
-
-  .filter-chips {
-    display: flex;
-    align-items: center;
-  }
-
-
-  .chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 8px;
-    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: 4px;
-    font-size: 14px;
-    background-color: var(--nile-filter-chip-background-default);
-    color: var(--nile-filter-chip-text-default);
-    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-    cursor: pointer;
-    gap: 6px;
-    margin-right: 6px;
-  }
-
-  .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background);
-  }
-
-  .chip:active {
-    background-color: var(--nile-filter-chip-active-background);
-    border-color: var(--nile-filter-chip-active-border-color-stroke);
-  }
-
-  .icon {
-    color: var(--nile-filter-chip-icon-color-default);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    position: relative;
-    top: 12px;
-  }
-
-  .label {
-    font-weight: 500;
-    color: var(--nile-filter-chip-label-color-default);
-  }
-
-  nile-badge::part(base) {
-    width: auto;
-    height: 14px;
-    border-radius: 100px;
-    padding: 6px;
-    gap: 10px;
-    font-size: 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
-  .chip-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .clear-all-container {
-    margin-left: 18px;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-
-  .value {
-    color: var(--nile-filter-chip-values-color-default);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 140px;
-  }
-
-  .close-icon {
-    color: var(--nile-filter-chip-close-icon-color-default);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: 2px;
-    border-radius: 50%;
-    transition: background-color 0.2s;
-  }
-
-  .close-icon:hover {
-    background-color: var(--nile-filter-chip-close-icon-hover-background);
-    color: var(--nile-filter-chip-close-icon-hover-color);
-  }
-`;
-export default [styles];
-//# sourceMappingURL=nile-filter-chip.css.js.map

package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FilterChip CSS\n */\n\nexport const styles = css`\n\n\n  .filter-chips {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .chip {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 8px;\n    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);\n    border-radius: 4px;\n    font-size: 14px;\n    background-color: var(--nile-filter-chip-background-default);\n    color: var(--nile-filter-chip-text-default);\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    cursor: pointer;\n    gap: 6px;\n    margin-right: 6px;\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background);\n  }\n\n  .chip:active {\n    background-color: var(--nile-filter-chip-active-background);\n    border-color: var(--nile-filter-chip-active-border-color-stroke);\n  }\n\n  .icon {\n    color: var(--nile-filter-chip-icon-color-default);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    position: relative;\n    top: 12px;\n  }\n\n  .label {\n    font-weight: 500;\n    color: var(--nile-filter-chip-label-color-default);\n  }\n\n  nile-badge::part(base) {\n    width: auto;\n    height: 14px;\n    border-radius: 100px;\n    padding: 6px;\n    gap: 10px;\n    font-size: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  .chip-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .clear-all-container {\n    margin-left: 18px;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n\n  .value {\n    color: var(--nile-filter-chip-values-color-default);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 140px;\n  }\n\n  .close-icon {\n    color: var(--nile-filter-chip-close-icon-color-default);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    padding: 2px;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n  }\n\n  .close-icon:hover {\n    background-color: var(--nile-filter-chip-close-icon-hover-background);\n    color: var(--nile-filter-chip-close-icon-hover-color);\n  }\n`;\n\nexport default [styles];\n\n "]}

package/dist/src/nile-filter-chip/nile-filter-chip.d.ts

@@ -1,35 +0,0 @@
-import { CSSResultArray, TemplateResult } from 'lit';
-import NileElement from '../internal/nile-element';
-/**
- * Nile filter-chip component.
- *
- * @tag nile-filter-chip
- */
-export declare class NileFilterChip extends NileElement {
-    label: string;
-    text: string;
-    extraCount: number;
-    editable: boolean;
-    closable: boolean;
-    icon: string;
-    removeIcon: string;
-    private static activeChips;
-    static get styles(): CSSResultArray;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private registerChip;
-    private unregisterChip;
-    private handleClose;
-    private handleClick;
-    private getLabelSlot;
-    private getValueSlot;
-    private getExtraCountSlot;
-    private getCloseIconSlot;
-    render(): TemplateResult;
-}
-export default NileFilterChip;
-declare global {
-    interface HTMLElementTagNameMap {
-        'nile-filter-chip': NileFilterChip;
-    }
-}

package/dist/src/nile-filter-chip/nile-filter-chip.js

@@ -1,128 +0,0 @@
-var NileFilterChip_1;
-import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
-import { styles } from './nile-filter-chip.css';
-/**
- * Nile filter-chip component.
- *
- * @tag nile-filter-chip
- */
-let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.text = '';
-        this.extraCount = 0;
-        this.editable = false;
-        this.closable = false;
-        this.icon = '';
-        this.removeIcon = '';
-    }
-    static get styles() {
-        return [styles];
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.registerChip();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.unregisterChip();
-    }
-    registerChip() {
-        NileFilterChip_1.activeChips.push(this);
-    }
-    unregisterChip() {
-        NileFilterChip_1.activeChips = NileFilterChip_1.activeChips.filter((chip) => chip !== this);
-    }
-    handleClose(event) {
-        event.stopPropagation();
-        this.dispatchEvent(new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } }));
-        this.remove();
-    }
-    handleClick() {
-        this.dispatchEvent(new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } }));
-    }
-    getLabelSlot() {
-        return html `
-      <slot name="label">
-        <span class="label">${this.label}:</span>
-      </slot>
-    `;
-    }
-    getValueSlot() {
-        return html `
-      <slot name="value">
-        <span class="value">${this.text}</span>
-      </slot>
-    `;
-    }
-    getExtraCountSlot() {
-        return html `
-      <slot name="suffix">
-        ${this.extraCount
-            ? html `
-              <nile-badge variant="primary" pilltype="pill-color">
-                +${this.extraCount}
-              </nile-badge>
-            `
-            : html ``}
-      </slot>
-    `;
-    }
-    getCloseIconSlot() {
-        return html `
-      ${this.closable
-            ? html `
-            <span class="close-icon" @click="${this.handleClose}">
-              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
-            </span>
-          `
-            : html ``}
-    `;
-    }
-    render() {
-        return html `
-      <div class="chip" @click="${this.handleClick}">
-        <slot name="icon">
-          ${this.icon ? html `<span class="icon">${this.icon}</span>` : html ``}
-        </slot>
-        ${this.getLabelSlot()}
-        <slot name="content"></slot>
-        ${this.getValueSlot()}
-        ${this.getExtraCountSlot()}
-        ${this.getCloseIconSlot()}
-      </div>
-    `;
-    }
-};
-NileFilterChip.activeChips = [];
-__decorate([
-    property({ type: String })
-], NileFilterChip.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], NileFilterChip.prototype, "text", void 0);
-__decorate([
-    property({ type: Number })
-], NileFilterChip.prototype, "extraCount", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileFilterChip.prototype, "editable", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileFilterChip.prototype, "closable", void 0);
-__decorate([
-    property({ type: String })
-], NileFilterChip.prototype, "icon", void 0);
-__decorate([
-    property({ type: String })
-], NileFilterChip.prototype, "removeIcon", void 0);
-NileFilterChip = NileFilterChip_1 = __decorate([
-    customElement('nile-filter-chip')
-], NileFilterChip);
-export { NileFilterChip };
-export default NileFilterChip;
-//# sourceMappingURL=nile-filter-chip.js.map

package/dist/src/nile-filter-chip/nile-filter-chip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-filter-chip.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-filter-chip.css';\n\n/**\n * Nile filter-chip component.\n *\n * @tag nile-filter-chip\n */\n@customElement('nile-filter-chip')\nexport class NileFilterChip extends NileElement {\n  @property({ type: String }) label = '';\n  @property({ type: String }) text = '';\n  @property({ type: Number }) extraCount: number = 0;\n  @property({ type: Boolean }) editable = false;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) removeIcon = '';\n\n  private static activeChips: NileFilterChip[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.registerChip();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unregisterChip();\n  }\n\n  private registerChip() {\n    NileFilterChip.activeChips.push(this);\n  }\n\n  private unregisterChip() {\n    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(\n      (chip) => chip !== this\n    );\n  }\n\n  private handleClose(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } })\n    );\n    this.remove();\n  }\n\n  private handleClick() {\n    this.dispatchEvent(\n      new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } })\n    );\n  }\n\n  private getLabelSlot(): TemplateResult {\n    return html`\n      <slot name=\"label\">\n        <span class=\"label\">${this.label}:</span>\n      </slot>\n    `;\n  }\n\n  private getValueSlot(): TemplateResult {\n    return html`\n      <slot name=\"value\">\n        <span class=\"value\">${this.text}</span>\n      </slot>\n    `;\n  }\n\n  private getExtraCountSlot(): TemplateResult {\n    return html`\n      <slot name=\"suffix\">\n        ${this.extraCount\n          ? html`\n              <nile-badge variant=\"primary\" pilltype=\"pill-color\">\n                +${this.extraCount}\n              </nile-badge>\n            `\n          : html``}\n      </slot>\n    `;\n  }\n\n  private getCloseIconSlot(): TemplateResult {\n    return html`\n      ${this.closable\n        ? html`\n            <span class=\"close-icon\" @click=\"${this.handleClose}\">\n              <nile-icon name=\"${this.removeIcon || 'close'}\" size=\"12\"></nile-icon>\n            </span>\n          `\n        : html``}\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"chip\" @click=\"${this.handleClick}\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : html``}\n        </slot>\n        ${this.getLabelSlot()}\n        <slot name=\"content\"></slot>\n        ${this.getValueSlot()}\n        ${this.getExtraCountSlot()}\n        ${this.getCloseIconSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default NileFilterChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-filter-chip': NileFilterChip;\n  }\n}\n"]}

package/dist/src/nile-filter-chip/nile-filter-chip.test.d.ts

@@ -1 +0,0 @@
-import './nile-filter-chip';

package/dist/src/nile-filter-chip/nile-filter-chip.test.js

@@ -1,80 +0,0 @@
-import { fixture, expect, html, oneEvent } from '@open-wc/testing';
-import './nile-filter-chip';
-import { NileFilterChip } from './nile-filter-chip';
-describe('<nile-filter-chip>', () => {
-    afterEach(() => {
-        NileFilterChip.activeChips = [];
-    });
-    it('registers and unregisters itself in activeChips', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip label="L" text="T"></nile-filter-chip>
-    `);
-        expect(NileFilterChip.activeChips).to.include(el);
-        el.remove();
-        await el.updateComplete;
-        expect(NileFilterChip.activeChips).to.not.include(el);
-    });
-    it('renders fallback label and text', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip label="MyLabel" text="MyText"></nile-filter-chip>
-    `);
-        const label = el.shadowRoot.querySelector('.label');
-        const value = el.shadowRoot.querySelector('.value');
-        expect(label.textContent).to.equal('MyLabel:');
-        expect(value.textContent.trim()).to.equal('MyText');
-    });
-    it('renders slotted label and value over fallback', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip>
-        <span slot="label">SLOT-LBL</span>
-        <span slot="value">SLOT-VAL</span>
-      </nile-filter-chip>
-    `);
-        const slottedLabel = el.querySelector('[slot="label"]');
-        const slottedValue = el.querySelector('[slot="value"]');
-        expect(slottedLabel.textContent).to.equal('SLOT-LBL');
-        expect(slottedValue.textContent).to.equal('SLOT-VAL');
-    });
-    it('renders an icon when the `icon` property is set', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip icon="★" label="L" text="T"></nile-filter-chip>
-    `);
-        const iconSpan = el.shadowRoot.querySelector('.icon');
-        expect(iconSpan).to.exist;
-        expect(iconSpan.textContent).to.equal('★');
-    });
-    it('does not render a badge when extraCount is zero', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip extraCount="0" label="L" text="T"></nile-filter-chip>
-    `);
-        expect(el.shadowRoot.querySelector('nile-badge')).to.be.null;
-    });
-    it('renders a +badge when extraCount > 0', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip extraCount="5" label="L" text="T"></nile-filter-chip>
-    `);
-        const badge = el.shadowRoot.querySelector('nile-badge');
-        expect(badge).to.exist;
-        expect(badge.textContent).to.contain('+5');
-    });
-    it('dispatches `nile-click` on chip click', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip label="L" text="T"></nile-filter-chip>
-    `);
-        const chip = el.shadowRoot.querySelector('.chip');
-        setTimeout(() => chip.click());
-        const ev = await oneEvent(el, 'nile-click');
-        expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });
-    });
-    it('dispatches `nile-close` on close icon click and removes itself', async () => {
-        const el = await fixture(html `
-      <nile-filter-chip closable extraCount="2" text="TT"></nile-filter-chip>
-    `);
-        const closeIcon = el.shadowRoot.querySelector('.close-icon');
-        setTimeout(() => closeIcon.click());
-        const ev = await oneEvent(el, 'nile-close');
-        expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });
-        expect(document.body.contains(el)).to.be.false;
-    });
-});
-//# sourceMappingURL=nile-filter-chip.test.js.map

package/dist/src/nile-filter-chip/nile-filter-chip.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-filter-chip.test.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, html, oneEvent } from '@open-wc/testing';\nimport './nile-filter-chip';\nimport { NileFilterChip } from './nile-filter-chip';\n\ndescribe('<nile-filter-chip>', () => {\n  afterEach(() => {\n    (NileFilterChip as any).activeChips = [];\n  });\n\n  it('registers and unregisters itself in activeChips', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    expect((NileFilterChip as any).activeChips).to.include(el);\n    el.remove();\n    await el.updateComplete;\n    expect((NileFilterChip as any).activeChips).to.not.include(el);\n  });\n\n  it('renders fallback label and text', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"MyLabel\" text=\"MyText\"></nile-filter-chip>\n    `);\n    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;\n    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;\n    expect(label.textContent).to.equal('MyLabel:');\n    expect(value.textContent!.trim()).to.equal('MyText');\n  });\n\n  it('renders slotted label and value over fallback', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip>\n        <span slot=\"label\">SLOT-LBL</span>\n        <span slot=\"value\">SLOT-VAL</span>\n      </nile-filter-chip>\n    `);\n    const slottedLabel = el.querySelector('[slot=\"label\"]')! as HTMLElement;\n    const slottedValue = el.querySelector('[slot=\"value\"]')! as HTMLElement;\n    expect(slottedLabel.textContent).to.equal('SLOT-LBL');\n    expect(slottedValue.textContent).to.equal('SLOT-VAL');\n  });\n\n  it('renders an icon when the `icon` property is set', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip icon=\"★\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;\n    expect(iconSpan).to.exist;\n    expect(iconSpan.textContent).to.equal('★');\n  });\n\n  it('does not render a badge when extraCount is zero', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip extraCount=\"0\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;\n  });\n\n  it('renders a +badge when extraCount > 0', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip extraCount=\"5\" label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;\n    expect(badge).to.exist;\n    expect(badge.textContent).to.contain('+5');\n  });\n\n\n\n  it('dispatches `nile-click` on chip click', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip label=\"L\" text=\"T\"></nile-filter-chip>\n    `);\n    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;\n    setTimeout(() => chip.click());\n    const ev = await oneEvent(el, 'nile-click');\n    expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });\n  });\n\n  it('dispatches `nile-close` on close icon click and removes itself', async () => {\n    const el = await fixture<NileFilterChip>(html`\n      <nile-filter-chip closable extraCount=\"2\" text=\"TT\"></nile-filter-chip>\n    `);\n    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;\n    setTimeout(() => closeIcon.click());\n    const ev = await oneEvent(el, 'nile-close');\n    expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });\n    expect(document.body.contains(el)).to.be.false;\n  });\n\n \n});\n"]}

package/dist/src/nile-tooltip/nile-tooltip-utils.d.ts

@@ -1,18 +0,0 @@
-export declare function isInViewport(element: HTMLElement): boolean;
-export declare function getValidTooltipPosition(triggerRect: DOMRect, tooltipRect: DOMRect, originalPlacement: string, distance: number, skidding: number, caretSize: number, viewportWidth: number, viewportHeight: number): {
-    top: number;
-    left: number;
-    placement: string;
-};
-export interface CaretPositionInput {
-    placement: string;
-    tooltipRect: DOMRect;
-    triggerRect: DOMRect;
-    caretSize: number;
-    left: number;
-    top: number;
-}
-export declare function getCaretPosition({ placement, tooltipRect, triggerRect, caretSize, left, top }: CaretPositionInput): {
-    caretLeft: number;
-    caretTop: number;
-};

package/dist/src/nile-tooltip/nile-tooltip-utils.js

@@ -1,216 +0,0 @@
-export function isInViewport(element) {
-    const rect = element.getBoundingClientRect();
-    return (rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-}
-export function getValidTooltipPosition(triggerRect, tooltipRect, originalPlacement, distance, skidding, caretSize, viewportWidth, viewportHeight) {
-    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-    const getCandidatePosition = (placement) => {
-        let top = 0;
-        let left = 0;
-        switch (placement) {
-            case 'top':
-                top = triggerRect.top - tooltipRect.height - distance;
-                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
-                break;
-            case 'top-start': {
-                top = triggerRect.top - tooltipRect.height - distance;
-                const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-                left = Math.max(triggerRect.left + skidding, centeredLeft);
-                break;
-            }
-            case 'top-end': {
-                top = triggerRect.top - tooltipRect.height - distance;
-                const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-                const maxLeft = triggerRect.right - tooltipRect.width + skidding;
-                left = Math.min(centeredLeft, maxLeft);
-                break;
-            }
-            case 'bottom':
-                top = triggerRect.bottom + distance;
-                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
-                break;
-            case 'bottom-start': {
-                top = triggerRect.bottom + distance;
-                const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-                left = Math.max(triggerRect.left + skidding, centeredLeft);
-                break;
-            }
-            case 'bottom-end': {
-                top = triggerRect.bottom + distance;
-                const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-                const maxLeft = triggerRect.right - tooltipRect.width + skidding;
-                left = Math.min(centeredLeft, maxLeft);
-                break;
-            }
-            case 'left':
-                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
-                left = triggerRect.left - tooltipRect.width - distance;
-                break;
-            case 'left-start': {
-                const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-                top = triggerCenterY - tooltipRect.height / 2;
-                left = triggerRect.left - tooltipRect.width - distance;
-                if (top < triggerRect.top) {
-                    top = triggerRect.top;
-                }
-                break;
-            }
-            case 'left-end': {
-                const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-                top = triggerCenterY - tooltipRect.height / 2;
-                left = triggerRect.left - tooltipRect.width - distance;
-                if (top + tooltipRect.height > triggerRect.bottom) {
-                    top = triggerRect.bottom - tooltipRect.height;
-                }
-                break;
-            }
-            case 'right':
-                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
-                left = triggerRect.right + distance;
-                break;
-            case 'right-start': {
-                const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-                top = triggerCenterY - tooltipRect.height / 2;
-                left = triggerRect.right + distance;
-                if (top < triggerRect.top) {
-                    top = triggerRect.top;
-                }
-                break;
-            }
-            case 'right-end': {
-                const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-                top = triggerCenterY - tooltipRect.height / 2;
-                left = triggerRect.right + distance;
-                if (top + tooltipRect.height > triggerRect.bottom) {
-                    top = triggerRect.bottom - tooltipRect.height;
-                }
-                break;
-            }
-            default:
-                top = triggerRect.top - tooltipRect.height - distance;
-                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
-        }
-        return { top, left };
-    };
-    const candidateFits = (top, left) => top >= 0 &&
-        left >= 0 &&
-        top + tooltipRect.height <= viewportHeight &&
-        left + tooltipRect.width <= viewportWidth;
-    let placement = originalPlacement;
-    let candidate = getCandidatePosition(placement);
-    if (!candidateFits(candidate.top, candidate.left)) {
-        if (['top', 'top-start', 'top-end'].includes(originalPlacement)) {
-            placement = 'bottom';
-        }
-        else if (['bottom', 'bottom-start', 'bottom-end'].includes(originalPlacement)) {
-            placement = 'top';
-        }
-        else if (['right', 'right-start', 'right-end'].includes(originalPlacement)) {
-            placement = 'left';
-        }
-        else if (['left', 'left-start', 'left-end'].includes(originalPlacement)) {
-            placement = 'right';
-        }
-        candidate = getCandidatePosition(placement);
-        const leftCandidate = getCandidatePosition('left');
-        const bottomCandidate = getCandidatePosition('bottom');
-        const topCandidate = getCandidatePosition('top');
-        if (!candidateFits(leftCandidate.top, leftCandidate.left) &&
-            !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
-            !candidateFits(topCandidate.top, topCandidate.left)) {
-            placement = 'right';
-            candidate = getCandidatePosition(placement);
-        }
-        else {
-            const rightCandidate = getCandidatePosition('right');
-            if (!candidateFits(rightCandidate.top, rightCandidate.left) &&
-                !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
-                !candidateFits(topCandidate.top, topCandidate.left)) {
-                placement = 'left';
-                candidate = getCandidatePosition(placement);
-            }
-        }
-    }
-    if (candidate.left < 0) {
-        candidate.left = 5;
-    }
-    else if (candidate.left + tooltipRect.width > viewportWidth) {
-        candidate.left = viewportWidth - tooltipRect.width - 5;
-    }
-    if (candidate.top < 0) {
-        candidate.top = 5;
-    }
-    else if (candidate.top + tooltipRect.height > viewportHeight) {
-        candidate.top = viewportHeight - tooltipRect.height - 5;
-    }
-    return { ...candidate, placement };
-}
-export function getCaretPosition({ placement, tooltipRect, triggerRect, caretSize, left, top }) {
-    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-    const [primaryPlacement, secondaryPlacement] = placement.split('-');
-    let caretLeft = 0;
-    let caretTop = 0;
-    switch (primaryPlacement) {
-        case 'top':
-            caretTop = tooltipRect.height - caretSize;
-            caretLeft = triggerCenterX - left - caretSize;
-            if (placement === 'top-end') {
-                caretLeft = triggerCenterX - left - caretSize;
-            }
-            else if (secondaryPlacement === 'start') {
-                caretLeft = triggerCenterX - left - caretSize;
-            }
-            else if (secondaryPlacement === 'end') {
-                caretLeft = tooltipRect.width - 2 * caretSize + 8;
-            }
-            caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
-            break;
-        case 'bottom':
-            caretTop = -caretSize;
-            caretLeft = triggerCenterX - left - caretSize;
-            break;
-        case 'left':
-            caretLeft = tooltipRect.width - caretSize;
-            if (secondaryPlacement === 'start') {
-                const computedCaretTop = triggerCenterY - top - caretSize;
-                const minCaretTop = triggerRect.top - top;
-                caretTop = Math.max(computedCaretTop, minCaretTop);
-            }
-            else if (secondaryPlacement === 'end') {
-                const computedCaretTop = triggerCenterY - top - caretSize;
-                const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
-                caretTop = Math.min(computedCaretTop, maxCaretTop);
-            }
-            else {
-                caretTop = triggerCenterY - top - caretSize;
-            }
-            caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
-            break;
-        case 'right':
-            caretLeft = -caretSize;
-            if (secondaryPlacement === 'start') {
-                const computedCaretTop = triggerCenterY - top - caretSize;
-                const minCaretTop = triggerRect.top - top;
-                caretTop = Math.max(computedCaretTop, minCaretTop);
-            }
-            else if (secondaryPlacement === 'end') {
-                const computedCaretTop = triggerCenterY - top - caretSize;
-                const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
-                caretTop = Math.min(computedCaretTop, maxCaretTop);
-            }
-            else {
-                caretTop = triggerCenterY - top - caretSize;
-            }
-            caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
-            break;
-        default:
-            caretLeft = tooltipRect.width / 2 - caretSize;
-            caretTop = tooltipRect.height / 2 - caretSize;
-    }
-    return { caretLeft, caretTop };
-}
-//# sourceMappingURL=nile-tooltip-utils.js.map