@aquera/nile-elements 1.4.2-beta-1.0 → 1.4.3-beta-1.0

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

@@ -1,213 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * 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 { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
-import styles from './nile-css-tooltip.css';
-/**
- * Nile css-tooltip component - A comprehensive CSS-based tooltip with Tippy.js-like features.
- *
- * @tag nile-css-tooltip
- * @slot - The content that triggers the tooltip on hover
- *
- * @cssproperty --tooltip-bg-color - Background color of the tooltip (default: #333)
- * @cssproperty --tooltip-text-color - Text color of the tooltip (default: #fff)
- * @cssproperty --tooltip-font-size - Font size of the tooltip text (default: 14px)
- * @cssproperty --tooltip-font-weight - Font weight of the tooltip text (default: normal)
- * @cssproperty --tooltip-font-family - Font family of the tooltip text (default: inherit)
- * @cssproperty --tooltip-line-height - Line height of the tooltip text (default: 1.4)
- * @cssproperty --tooltip-padding - Padding inside the tooltip (default: 8px 12px)
- * @cssproperty --tooltip-border-radius - Border radius of the tooltip (default: 6px)
- * @cssproperty --tooltip-border-width - Border width (default: 0)
- * @cssproperty --tooltip-border-color - Border color (default: transparent)
- * @cssproperty --tooltip-border-style - Border style (default: solid)
- * @cssproperty --tooltip-offset - Distance from the trigger element (default: 10px)
- * @cssproperty --tooltip-arrow-size - Size of the tooltip arrow (default: 7px)
- * @cssproperty --tooltip-max-width - Maximum width of the tooltip (default: 350px)
- * @cssproperty --tooltip-min-width - Minimum width of the tooltip (default: none)
- * @cssproperty --tooltip-z-index - Z-index of the tooltip (default: 9999)
- * @cssproperty --tooltip-box-shadow - Box shadow of the tooltip (default: 0 4px 14px rgba(0,0,0,0.15))
- */
-let NileCssTooltip = class NileCssTooltip extends NileElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The text content to display in the tooltip
-         */
-        this.text = '';
-        /**
-         * Position of the tooltip relative to the trigger element
-         * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'}
-         */
-        this.position = 'top';
-        /**
-         * Animation type
-         * @type {'fade' | 'scale' | 'shift' | 'perspective'}
-         */
-        this.animation = 'scale';
-        /**
-         * Delay before showing the tooltip (in milliseconds)
-         */
-        this.delay = 0;
-        /**
-         * Duration of the show/hide animation (in milliseconds)
-         */
-        this.duration = 300;
-        /**
-         * Whether the tooltip is disabled
-         */
-        this.disabled = false;
-        /**
-         * Show arrow on the tooltip
-         */
-        this.arrow = true;
-        /**
-         * Interactive - whether tooltip stays open when hovering over it
-         */
-        this.interactive = false;
-        /**
-         * Theme variant
-         * @type {'dark' | 'light' | 'light-border' | 'custom'}
-         */
-        this.theme = 'dark';
-        /**
-         * Trigger event
-         * @type {'hover' | 'focus' | 'click' | 'manual'}
-         */
-        this.trigger = 'hover';
-        /**
-         * Whether to hide tooltip on click outside
-         */
-        this.hideOnClick = true;
-        /**
-         * Whether to allow HTML content (uses slot instead of text)
-         */
-        this.allowHTML = false;
-        /**
-         * Tooltip size preset
-         * @type {'small' | 'regular' | 'large'}
-         */
-        this.size = 'regular';
-        /**
-         * Whether to show the tooltip (for manual trigger)
-         */
-        this.visible = false;
-        /**
-         * Whether text should wrap or stay on one line
-         */
-        this.noWrap = false;
-        this.inset = false;
-    }
-    static get styles() {
-        return styles;
-    }
-    /**
-     * Render method
-     * @slot - The content that will trigger the tooltip on hover
-     * @slot tooltip-content - Custom HTML content for the tooltip (when allowHTML is true)
-     */
-    render() {
-        const tooltipClasses = [
-            'tooltip-content',
-            this.position,
-            `theme-${this.theme}`,
-            `size-${this.size}`,
-            `animation-${this.animation}`,
-            this.disabled ? 'disabled' : '',
-            !this.arrow ? 'no-arrow' : '',
-            this.interactive ? 'interactive' : '',
-            this.trigger === 'manual' ? 'manual' : '',
-            this.visible ? 'visible' : '',
-            this.noWrap ? 'no-wrap' : 'wrap',
-            this.inset ? 'inset' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const wrapperClasses = [
-            'tooltip-wrapper',
-            this.trigger === 'hover' ? 'hover' : '',
-            this.trigger === 'focus' ? 'focus' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const styleVars = [
-            this.delay > 0 ? `transition-delay: ${this.delay}ms;` : '',
-            this.duration !== 300 ? `--tooltip-duration: ${this.duration}ms;` : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return html `
-      <div class="${wrapperClasses}">
-        <slot></slot>
-        ${this.text || this.allowHTML
-            ? html `
-              <div class="${tooltipClasses}" style="${styleVars}">
-                ${this.allowHTML
-                ? html `<slot name="tooltip-content">${this.text}</slot>`
-                : this.text}
-              </div>
-            `
-            : ''}
-      </div>
-    `;
-    }
-};
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "text", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "position", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "animation", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "delay", void 0);
-__decorate([
-    property({ type: Number, attribute: 'duration', reflect: true })
-], NileCssTooltip.prototype, "duration", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileCssTooltip.prototype, "arrow", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "interactive", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "theme", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "trigger", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileCssTooltip.prototype, "hideOnClick", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileCssTooltip.prototype, "allowHTML", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "visible", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileCssTooltip.prototype, "noWrap", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileCssTooltip.prototype, "inset", void 0);
-NileCssTooltip = __decorate([
-    customElement('nile-css-tooltip')
-], NileCssTooltip);
-export { NileCssTooltip };
-export default NileCssTooltip;
-//# sourceMappingURL=nile-css-tooltip.js.map

package/dist/src/nile-css-tooltip/nile-css-tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-css-tooltip.js","sourceRoot":"","sources":["../../../src/nile-css-tooltip/nile-css-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport styles from './nile-css-tooltip.css';\n\n/**\n * Nile css-tooltip component - A comprehensive CSS-based tooltip with Tippy.js-like features.\n *\n * @tag nile-css-tooltip\n * @slot - The content that triggers the tooltip on hover\n * \n * @cssproperty --tooltip-bg-color - Background color of the tooltip (default: #333)\n * @cssproperty --tooltip-text-color - Text color of the tooltip (default: #fff)\n * @cssproperty --tooltip-font-size - Font size of the tooltip text (default: 14px)\n * @cssproperty --tooltip-font-weight - Font weight of the tooltip text (default: normal)\n * @cssproperty --tooltip-font-family - Font family of the tooltip text (default: inherit)\n * @cssproperty --tooltip-line-height - Line height of the tooltip text (default: 1.4)\n * @cssproperty --tooltip-padding - Padding inside the tooltip (default: 8px 12px)\n * @cssproperty --tooltip-border-radius - Border radius of the tooltip (default: 6px)\n * @cssproperty --tooltip-border-width - Border width (default: 0)\n * @cssproperty --tooltip-border-color - Border color (default: transparent)\n * @cssproperty --tooltip-border-style - Border style (default: solid)\n * @cssproperty --tooltip-offset - Distance from the trigger element (default: 10px)\n * @cssproperty --tooltip-arrow-size - Size of the tooltip arrow (default: 7px)\n * @cssproperty --tooltip-max-width - Maximum width of the tooltip (default: 350px)\n * @cssproperty --tooltip-min-width - Minimum width of the tooltip (default: none)\n * @cssproperty --tooltip-z-index - Z-index of the tooltip (default: 9999)\n * @cssproperty --tooltip-box-shadow - Box shadow of the tooltip (default: 0 4px 14px rgba(0,0,0,0.15))\n */\n@customElement('nile-css-tooltip')\nexport class NileCssTooltip extends NileElement {\n  /**\n   * The text content to display in the tooltip\n   */\n  @property({type: String, reflect: true, attribute: true})text: string = '';\n\n  /**\n   * Position of the tooltip relative to the trigger element\n   * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'}\n   */\n  @property({type: String, reflect: true, attribute: true})position: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' = 'top';\n\n  /**\n   * Animation type\n   * @type {'fade' | 'scale' | 'shift' | 'perspective'}\n   */\n  @property({type: String, reflect: true, attribute: true})animation: 'fade' | 'scale' | 'shift' | 'perspective' = 'scale';\n\n  /**\n   * Delay before showing the tooltip (in milliseconds)\n   */\n  @property({type: Number, reflect: true, attribute: true})delay: number = 0;\n\n  /**\n   * Duration of the show/hide animation (in milliseconds)\n   */\n  @property({type: Number, attribute: 'duration', reflect: true})duration: number = 300;\n\n  /**\n   * Whether the tooltip is disabled\n   */\n  @property({type: Boolean, reflect: true, attribute: true})disabled: boolean = false;\n\n  /**\n   * Show arrow on the tooltip\n   */\n  @property({type: Boolean, attribute: true, reflect: true})arrow: boolean = true;\n\n  /**\n   * Interactive - whether tooltip stays open when hovering over it\n   */\n  @property({type: Boolean, reflect: true, attribute: true})interactive: boolean = false;\n\n  /**\n   * Theme variant\n   * @type {'dark' | 'light' | 'light-border' | 'custom'}\n   */\n  @property({type: String, reflect: true, attribute: true})theme: 'dark' | 'light' | 'light-border' | 'custom' = 'dark';\n\n  /**\n   * Trigger event\n   * @type {'hover' | 'focus' | 'click' | 'manual'}\n   */\n  @property({type: String, reflect: true, attribute: true})trigger: 'hover' | 'focus' | 'click' | 'manual' = 'hover';\n\n  /**\n   * Whether to hide tooltip on click outside\n   */\n  @property({type: Boolean, attribute: true, reflect: true})hideOnClick: boolean = true;\n\n  /**\n   * Whether to allow HTML content (uses slot instead of text)\n   */\n  @property({type: Boolean, attribute: true, reflect: true})allowHTML: boolean = false;\n\n  /**\n   * Tooltip size preset\n   * @type {'small' | 'regular' | 'large'}\n   */\n  @property({type: String, reflect: true, attribute: true})size: 'small' | 'regular' | 'large' = 'regular';\n\n  /**\n   * Whether to show the tooltip (for manual trigger)\n   */\n  @property({type: Boolean, reflect: true, attribute: true})visible: boolean = false;\n\n  /**\n   * Whether text should wrap or stay on one line\n   */\n  @property({type: Boolean, attribute:true, reflect: true})noWrap: boolean = false;\n\n \n  @property({type: Boolean, reflect: true, attribute: true})inset: boolean = false;\n\n \n  public static get styles(): CSSResultArray {\n    return styles;\n  }\n\n  /**\n   * Render method\n   * @slot - The content that will trigger the tooltip on hover\n   * @slot tooltip-content - Custom HTML content for the tooltip (when allowHTML is true)\n   */\n  public render(): TemplateResult {\n    const tooltipClasses = [\n      'tooltip-content',\n      this.position,\n      `theme-${this.theme}`,\n      `size-${this.size}`,\n      `animation-${this.animation}`,\n      this.disabled ? 'disabled' : '',\n      !this.arrow ? 'no-arrow' : '',\n      this.interactive ? 'interactive' : '',\n      this.trigger === 'manual' ? 'manual' : '',\n      this.visible ? 'visible' : '',\n      this.noWrap ? 'no-wrap' : 'wrap',\n      this.inset ? 'inset' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const wrapperClasses = [\n      'tooltip-wrapper',\n      this.trigger === 'hover' ? 'hover' : '',\n      this.trigger === 'focus' ? 'focus' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const styleVars = [\n      this.delay > 0 ? `transition-delay: ${this.delay}ms;` : '',\n      this.duration !== 300 ? `--tooltip-duration: ${this.duration}ms;` : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <div class=\"${wrapperClasses}\">\n        <slot></slot>\n        ${this.text || this.allowHTML\n          ? html`\n              <div class=\"${tooltipClasses}\" style=\"${styleVars}\">\n                ${this.allowHTML\n                  ? html`<slot name=\"tooltip-content\">${this.text}</slot>`\n                  : this.text}\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nexport default NileCssTooltip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-css-tooltip': NileCssTooltip;\n  }\n}"]}