@omegagrid/core 0.10.0 → 0.10.2

package/dist/ui/switch.style.js

@@ -1,149 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { ColorTypes } from '../types';
-export const style = [...Object.values(ColorTypes).map(type => css `
-	:host([color="${unsafeCSS(type)}"][state="on"]) .background > div:nth-child(2) {
-		background-color: var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"][state="on"]) .background > div:nth-child(1) {
-		border-bottom-color: var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"][state="on"]) .background > div:nth-child(3) {
-		border-top-color: var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"][shape="square"][state="on"]) label,
-	:host([color="${unsafeCSS(type)}"][shape="round"][state="on"]) label {
-		background-color: var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-`), css `
-	:host {
-		display: inline-block;
-		position: relative;
-		width: var(--og-switch-width, 36px);
-		height: var(--og-switch-height, 20px);
-	}
-
-	:host {
-		--og-slider-size: calc(var(--og-switch-height) - var(--og-switch-margin));
-		--og-slider-sqrt3: calc(var(--og-slider-size) * sqrt(3));
-	}
-
-	* {
-		box-sizing: border-box;
-	}
-
-	label {
-		cursor: pointer;
-		display: block;
-		position: relative;
-		width: var(--og-switch-width);
-		height: var(--og-switch-height);
-	}
-	  
-	input {
-		opacity: 0;
-		width: 0;
-		height: 0;
-		position: absolute;
-	}
-
-	:host([shape="square"]) label, :host([shape="round"]) label {
-		background-color: var(--og-switch-background-color);
-	}
-
-	:host([shape="round"]) label {
-		border-radius: calc(var(--og-switch-width) / 2);
-	}
-
-	:host([shape="round"]) .slider {
-		border-radius: calc(var(--og-slider-size) / 2);
-	}
-
-	:host([shape="square"]) .slider, :host([shape="round"]) .slider {
-		width: var(--og-slider-size);
-		height: var(--og-slider-size);
-		background-color: var(--og-switch-slider-color);
-	}
-
-	:host([shape="square"]) label {
-		border-radius: var(--og-base-radius);
-	}
-
-	:host([shape="square"]) .slider {
-		border-radius: calc(var(--og-base-radius) - 1px);
-	}
-
-
-	.background {
-		width: 100%;
-	}
-
-	.background > div:nth-child(1) {
-		border-bottom: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);
-		border-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;
-		border-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;
-		height: 0;
-		width: var(--og-switch-width);
-	}
-
-	.background > div:nth-child(2) {
-		height: calc(var(--og-switch-height) / 2);
-		width: var(--og-switch-width);
-		background-color: var(--og-switch-background-color);
-	}
-
-	.background > div:nth-child(3) {
-		border-top: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);
-		border-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;
-		border-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;
-		height: 0;
-		width: var(--og-switch-width);
-	}
-
-	.slider {
-		position: absolute;
-		top: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);
-		left: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);
-		width: calc(var(--og-slider-size) * sqrt(3) / 2);
-		transition: .4s;
-	}
-
-	:host([noAnimation]) .slider {
-		transition: none;
-	}
-
-	.slider > div {
-		position: absolute;
-	}
-
-	.slider > div:nth-child(1) {
-		border-right: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);
-		border-top: calc(var(--og-slider-size) / 4) solid transparent;
-		border-bottom: calc(var(--og-slider-size) / 4) solid transparent;
-		width: 0;
-		height: var(--og-slider-size);
-		top: 0;
-		left: 0;
-	}
-
-	.slider > div:nth-child(2) {
-		border-left: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);
-		border-top: calc(var(--og-slider-size) / 4) solid transparent;
-		border-bottom: calc(var(--og-slider-size) / 4) solid transparent;
-		width: 0;
-		height: var(--og-slider-size);
-		top: 0;
-		right: 0;
-	}
-
-	:host([shape="hexagon"]) input:checked + .slider {
-		transform: translateX(calc(var(--og-switch-width) - (var(--og-slider-sqrt3) / 2) - ((var(--og-switch-height) - var(--og-slider-size)))));
-	}
-
-	:host([shape="round"]) input:checked + .slider, :host([shape="square"]) input:checked + .slider {
-		transform: translateX(calc(var(--og-switch-width) - var(--og-slider-size) - var(--og-switch-height) + var(--og-slider-size)));
-	}
-`];
-//# sourceMappingURL=switch.style.js.map

package/dist/ui/switch.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.style.js","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAA;iBACjD,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;;iBAGvC,SAAS,CAAC,IAAI,CAAC;4CACY,SAAS,CAAC,IAAI,CAAC;;;iBAG1C,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;;iBAGvC,SAAS,CAAC,IAAI,CAAC;iBACf,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;CAEvD,CAAC,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIN,CAAC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ColorTypes } from '../types';\n\nexport const style = [...Object.values(ColorTypes).map(type => css`\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(2) {\n\t\tbackground-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(1) {\n\t\tborder-bottom-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(3) {\n\t\tborder-top-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][shape=\"square\"][state=\"on\"]) label,\n\t:host([color=\"${unsafeCSS(type)}\"][shape=\"round\"][state=\"on\"]) label {\n\t\tbackground-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n`), css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: var(--og-switch-width, 36px);\n\t\theight: var(--og-switch-height, 20px);\n\t}\n\n\t:host {\n\t\t--og-slider-size: calc(var(--og-switch-height) - var(--og-switch-margin));\n\t\t--og-slider-sqrt3: calc(var(--og-slider-size) * sqrt(3));\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: var(--og-switch-width);\n\t\theight: var(--og-switch-height);\n\t}\n\t  \n\tinput {\n\t\topacity: 0;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\t:host([shape=\"square\"]) label, :host([shape=\"round\"]) label {\n\t\tbackground-color: var(--og-switch-background-color);\n\t}\n\n\t:host([shape=\"round\"]) label {\n\t\tborder-radius: calc(var(--og-switch-width) / 2);\n\t}\n\n\t:host([shape=\"round\"]) .slider {\n\t\tborder-radius: calc(var(--og-slider-size) / 2);\n\t}\n\n\t:host([shape=\"square\"]) .slider, :host([shape=\"round\"]) .slider {\n\t\twidth: var(--og-slider-size);\n\t\theight: var(--og-slider-size);\n\t\tbackground-color: var(--og-switch-slider-color);\n\t}\n\n\t:host([shape=\"square\"]) label {\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([shape=\"square\"]) .slider {\n\t\tborder-radius: calc(var(--og-base-radius) - 1px);\n\t}\n\n\n\t.background {\n\t\twidth: 100%;\n\t}\n\n\t.background > div:nth-child(1) {\n\t\tborder-bottom: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);\n\t\tborder-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\tborder-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\theight: 0;\n\t\twidth: var(--og-switch-width);\n\t}\n\n\t.background > div:nth-child(2) {\n\t\theight: calc(var(--og-switch-height) / 2);\n\t\twidth: var(--og-switch-width);\n\t\tbackground-color: var(--og-switch-background-color);\n\t}\n\n\t.background > div:nth-child(3) {\n\t\tborder-top: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);\n\t\tborder-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\tborder-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\theight: 0;\n\t\twidth: var(--og-switch-width);\n\t}\n\n\t.slider {\n\t\tposition: absolute;\n\t\ttop: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);\n\t\tleft: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);\n\t\twidth: calc(var(--og-slider-size) * sqrt(3) / 2);\n\t\ttransition: .4s;\n\t}\n\n\t:host([noAnimation]) .slider {\n\t\ttransition: none;\n\t}\n\n\t.slider > div {\n\t\tposition: absolute;\n\t}\n\n\t.slider > div:nth-child(1) {\n\t\tborder-right: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);\n\t\tborder-top: calc(var(--og-slider-size) / 4) solid transparent;\n\t\tborder-bottom: calc(var(--og-slider-size) / 4) solid transparent;\n\t\twidth: 0;\n\t\theight: var(--og-slider-size);\n\t\ttop: 0;\n\t\tleft: 0;\n\t}\n\n\t.slider > div:nth-child(2) {\n\t\tborder-left: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);\n\t\tborder-top: calc(var(--og-slider-size) / 4) solid transparent;\n\t\tborder-bottom: calc(var(--og-slider-size) / 4) solid transparent;\n\t\twidth: 0;\n\t\theight: var(--og-slider-size);\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n\n\t:host([shape=\"hexagon\"]) input:checked + .slider {\n\t\ttransform: translateX(calc(var(--og-switch-width) - (var(--og-slider-sqrt3) / 2) - ((var(--og-switch-height) - var(--og-slider-size)))));\n\t}\n\n\t:host([shape=\"round\"]) input:checked + .slider, :host([shape=\"square\"]) input:checked + .slider {\n\t\ttransform: translateX(calc(var(--og-switch-width) - var(--og-slider-size) - var(--og-switch-height) + var(--og-slider-size)));\n\t}\n`];\n"]}

package/dist/ui/tooltip.d.ts

@@ -1,24 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { ColorTypes } from "../types";
-export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'mouse';
-export declare class Tooltip extends LitElement {
-    static styles: import("lit").CSSResult[];
-    color: ColorTypes;
-    arrow: boolean;
-    position: string;
-    content: string | TemplateResult<1>;
-    triangle: HTMLDivElement;
-    private _attachedTo;
-    private _mouseEventListener;
-    get attachedTo(): HTMLElement | "cursor";
-    hide: () => HTMLElement;
-    show: () => HTMLElement;
-    destroy(): void;
-    render: () => TemplateResult<1>;
-    deatach(): void;
-    attachToElement(elm: HTMLElement, position?: TooltipPosition): void;
-    get parent(): HTMLElement;
-    attachToCursor(): void;
-    attachTo(elm: HTMLElement | 'cursor', position?: TooltipPosition): Promise<void>;
-}
-//# sourceMappingURL=tooltip.d.ts.map

package/dist/ui/tooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,KAAK,GAAC,OAAO,GAAC,QAAQ,GAAC,MAAM,GAAC,OAAO,CAAC;AAEpE,qBAEa,OAAQ,SAAQ,UAAU;IAEtC,MAAM,CAAC,MAAM,4BAAe;IAG5B,KAAK,EAAE,UAAU,CAAmB;IAGpC,KAAK,UAAQ;IAGb,QAAQ,SAAW;IAGnB,OAAO,EAAE,MAAM,GAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAGlC,QAAQ,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,mBAAmB,CAA0B;IAErD,IAAI,UAAU,2BAA8B;IAE5C,IAAI,oBAA+B;IAEnC,IAAI,oBAA+B;IAEnC,OAAO;IAOP,MAAM,0BAYJ;IAEF,OAAO;IAQP,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,GAAE,eAAyB;IA4CrE,IAAI,MAAM,gBAIT;IAED,cAAc;IAcR,QAAQ,CAAC,GAAG,EAAE,WAAW,GAAC,QAAQ,EAAE,QAAQ,GAAE,eAAyB;CAW7E"}

package/dist/ui/tooltip.js

@@ -1,143 +0,0 @@
-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 * as dom from "../common/dom";
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { colorable } from '../themes';
-import { ColorTypes } from "../types";
-import constants from "../constants";
-import { styles } from "./tooltip.style";
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-let Tooltip = class Tooltip extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.color = ColorTypes.Blue;
-        this.arrow = true;
-        this.position = 'right';
-        this.hide = () => dom.hideElement(this);
-        this.show = () => dom.showElement(this);
-        this.render = () => html `
-		${this.arrow ? html `<div id="triangle"><div id="triangle-inner"></div></div>` : ``}
-		<div id="inner">
-			${this.querySelector('[slot="head"]') ? html `
-				<div class="head">
-					<slot name="head"></slot>
-				</div>
-			` : ``}
-			<div class="body">
-				${this.content ? (typeof this.content === 'string' ? unsafeHTML(this.content) : this.content) : html `<slot name="body"></slot>`}
-			</div>
-		</div>
-	`;
-    }
-    get attachedTo() { return this._attachedTo; }
-    destroy() {
-        this.deatach();
-        if (this.parentNode) {
-            this.parentNode.removeChild(this);
-        }
-    }
-    deatach() {
-        this._attachedTo = null;
-        this.hide();
-        if (this._mouseEventListener) {
-            this.parent.removeEventListener('mousemove', this._mouseEventListener);
-        }
-    }
-    attachToElement(elm, position = 'right') {
-        this.show();
-        this._attachedTo = elm;
-        const elmOffset = dom.getElementOffset(elm, this.parent);
-        if (position == 'left') {
-            dom.setPosition(this, { l: elmOffset.left - this.offsetWidth - constants.TOOLTIP_MARGIN, t: elmOffset.top + elm.offsetHeight / 2 - this.offsetHeight / 2 });
-            dom.setPadding(this, { r: constants.TOOLTIP_MARGIN, l: 0, t: 0, b: 0 });
-            if (this.arrow) {
-                this.triangle.className = 'right';
-                dom.setPosition(this.triangle, { r: 0 });
-                dom.setCenterPosition(this.triangle, this, { vertical: true, horizontal: false });
-            }
-        }
-        else if (position == 'right') {
-            dom.setPosition(this, { l: elmOffset.left + elm.offsetWidth, t: elmOffset.top + elm.offsetHeight / 2 - this.offsetHeight / 2 });
-            dom.setPadding(this, { l: constants.TOOLTIP_MARGIN, r: 0, t: 0, b: 0 });
-            if (this.arrow) {
-                this.triangle.className = 'left';
-                dom.setPosition(this.triangle, { l: 0 });
-                dom.setCenterPosition(this.triangle, this, { vertical: true, horizontal: false });
-            }
-        }
-        else if (position == 'top') {
-            dom.setPosition(this, { l: elmOffset.left + elm.offsetWidth / 2 - this.offsetWidth / 2, t: elmOffset.top - this.offsetHeight - constants.TOOLTIP_MARGIN });
-            dom.setPadding(this, { b: constants.TOOLTIP_MARGIN, r: 0, t: 0, l: 0 });
-            if (this.arrow) {
-                this.triangle.className = 'bottom';
-                dom.setPosition(this.triangle, { b: 0 });
-                dom.setCenterPosition(this.triangle, this, { vertical: false, horizontal: true });
-            }
-        }
-        else {
-            dom.setPosition(this, { l: elmOffset.left + elm.offsetWidth / 2 - this.offsetWidth / 2, t: elmOffset.top + elm.offsetHeight });
-            dom.setPadding(this, { t: constants.TOOLTIP_MARGIN, r: 0, b: 0, l: 0 });
-            if (this.arrow) {
-                this.triangle.className = 'top';
-                dom.setPosition(this.triangle, { t: 0 });
-                dom.setCenterPosition(this.triangle, this, { vertical: false, horizontal: true });
-            }
-        }
-    }
-    get parent() {
-        if (this.parentElement)
-            return this.parentElement;
-        if (this.parentNode instanceof ShadowRoot)
-            return this.parentNode.host;
-        return null;
-    }
-    attachToCursor() {
-        if (this._attachedTo == 'cursor')
-            return;
-        this._attachedTo = 'cursor';
-        this._mouseEventListener = e => {
-            this.show();
-            const offset = dom.getElementOffset(this.parent, document.body);
-            dom.setPosition(this, { l: e.pageX - offset.left + 20, t: e.pageY - offset.top + 20 });
-        };
-        this.parent.addEventListener('mousemove', this._mouseEventListener);
-        this.parent.addEventListener('mouseout', () => this.hide());
-    }
-    async attachTo(elm, position = 'right') {
-        this.deatach();
-        await this.updateComplete;
-        if (elm instanceof HTMLElement) {
-            this.attachToElement(elm, position);
-        }
-        else {
-            this.attachToCursor();
-        }
-    }
-};
-Tooltip.styles = [...styles];
-__decorate([
-    property({ type: String, reflect: true })
-], Tooltip.prototype, "color", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tooltip.prototype, "arrow", void 0);
-__decorate([
-    property({ type: String })
-], Tooltip.prototype, "position", void 0);
-__decorate([
-    property({ type: Object })
-], Tooltip.prototype, "content", void 0);
-__decorate([
-    query('#triangle')
-], Tooltip.prototype, "triangle", void 0);
-Tooltip = __decorate([
-    customElement('og-tooltip'),
-    colorable({ props: ['color', 'border', 'background'], selector: '#inner' })
-], Tooltip);
-export { Tooltip };
-//# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/ui/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import * as dom from \"../common/dom\";\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { colorable } from '../themes';\nimport { ColorTypes } from \"../types\";\nimport constants from \"../constants\";\nimport { styles } from \"./tooltip.style\";\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport type TooltipPosition = 'top'|'right'|'bottom'|'left'|'mouse';\n\n@customElement('og-tooltip')\n@colorable({props: ['color', 'border', 'background'], selector: '#inner'})\nexport class Tooltip extends LitElement {\n\n\tstatic styles = [...styles];\n\n\t@property({type: String, reflect: true})\n\tcolor: ColorTypes = ColorTypes.Blue;\n\n\t@property({type: Boolean})\n\tarrow = true;\n\n\t@property({type: String})\n\tposition = 'right';\n\n\t@property({type: Object})\n\tcontent: string|TemplateResult<1>;\n\n\t@query('#triangle')\n\ttriangle: HTMLDivElement;\n\n\tprivate _attachedTo: HTMLElement|'cursor';\n\t// private _position: TooltipPosition;\n\tprivate _mouseEventListener: (e: MouseEvent) => void;\n\n\tget attachedTo() { return this._attachedTo }\n\n\thide = () => dom.hideElement(this);\n\t\n\tshow = () => dom.showElement(this);\n\n\tdestroy() {\n\t\tthis.deatach();\n\t\tif (this.parentNode) {\n\t\t\tthis.parentNode.removeChild(this);\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t${this.arrow ? html`<div id=\"triangle\"><div id=\"triangle-inner\"></div></div>` : ``}\n\t\t<div id=\"inner\">\n\t\t\t${this.querySelector('[slot=\"head\"]') ? html`\n\t\t\t\t<div class=\"head\">\n\t\t\t\t\t<slot name=\"head\"></slot>\n\t\t\t\t</div>\n\t\t\t` : ``}\n\t\t\t<div class=\"body\">\n\t\t\t\t${this.content ? (typeof this.content === 'string' ? unsafeHTML(this.content) : this.content) : html`<slot name=\"body\"></slot>` }\n\t\t\t</div>\n\t\t</div>\n\t`;\n\n\tdeatach() {\n\t\tthis._attachedTo = null;\n\t\tthis.hide();\n\t\tif (this._mouseEventListener) {\n\t\t\tthis.parent.removeEventListener('mousemove', this._mouseEventListener);\n\t\t}\n\t}\n\n\tattachToElement(elm: HTMLElement, position: TooltipPosition = 'right') {\n\t\tthis.show();\n\t\tthis._attachedTo = elm;\n\t\tconst elmOffset = dom.getElementOffset(elm, this.parent);\n\t\t\n\t\tif (position == 'left') {\n\t\t\tdom.setPosition(this, {l: elmOffset.left - this.offsetWidth - constants.TOOLTIP_MARGIN, t: elmOffset.top + elm.offsetHeight / 2 - this.offsetHeight / 2});\n\t\t\tdom.setPadding(this, {r: constants.TOOLTIP_MARGIN, l: 0, t: 0, b: 0});\n\n\t\t\tif (this.arrow) {\n\t\t\t\tthis.triangle.className = 'right';\n\t\t\t\tdom.setPosition(this.triangle, {r: 0});\n\t\t\t\tdom.setCenterPosition(this.triangle, this, {vertical: true, horizontal: false});\n\t\t\t}\n\t\t} else if (position == 'right') {\n\t\t\tdom.setPosition(this, {l: elmOffset.left + elm.offsetWidth, t: elmOffset.top + elm.offsetHeight / 2 - this.offsetHeight / 2});\n\t\t\tdom.setPadding(this, {l: constants.TOOLTIP_MARGIN, r: 0, t: 0, b: 0});\n\n\t\t\tif (this.arrow) {\n\t\t\t\tthis.triangle.className = 'left';\n\t\t\t\tdom.setPosition(this.triangle, {l: 0});\n\t\t\t\tdom.setCenterPosition(this.triangle, this, {vertical: true, horizontal: false});\n\t\t\t}\n\t\t} else if (position == 'top') {\n\t\t\tdom.setPosition(this, {l: elmOffset.left + elm.offsetWidth / 2 - this.offsetWidth / 2, t: elmOffset.top - this.offsetHeight - constants.TOOLTIP_MARGIN});\n\t\t\tdom.setPadding(this, {b: constants.TOOLTIP_MARGIN, r: 0, t: 0, l: 0});\n\t\t\t\n\t\t\tif (this.arrow) {\n\t\t\t\tthis.triangle.className = 'bottom';\n\t\t\t\tdom.setPosition(this.triangle, {b: 0});\n\t\t\t\tdom.setCenterPosition(this.triangle, this, {vertical: false, horizontal: true});\n\t\t\t}\n\t\t} else {\n\t\t\tdom.setPosition(this, {l: elmOffset.left + elm.offsetWidth / 2 - this.offsetWidth / 2, t: elmOffset.top + elm.offsetHeight});\n\t\t\tdom.setPadding(this, {t: constants.TOOLTIP_MARGIN, r: 0, b: 0, l: 0});\n\n\t\t\tif (this.arrow) {\n\t\t\t\tthis.triangle.className = 'top';\n\t\t\t\tdom.setPosition(this.triangle, {t: 0});\n\t\t\t\tdom.setCenterPosition(this.triangle, this, {vertical: false, horizontal: true});\n\t\t\t}\n\t\t}\n\t}\n\n\tget parent() {\n\t\tif (this.parentElement) return this.parentElement;\n\t\tif (this.parentNode instanceof ShadowRoot) return (this.parentNode as ShadowRoot).host as HTMLElement;\n\t\treturn null;\n\t}\n\n\tattachToCursor() {\n\t\tif (this._attachedTo == 'cursor') return;\n\t\tthis._attachedTo = 'cursor';\n\n\t\tthis._mouseEventListener = e => {\n\t\t\tthis.show();\n\t\t\tconst offset =  dom.getElementOffset(this.parent, document.body);\n\t\t\tdom.setPosition(this, {l: e.pageX - offset.left + 20, t: e.pageY - offset.top + 20});\n\t\t}\n\n\t\tthis.parent.addEventListener('mousemove', this._mouseEventListener);\n\t\tthis.parent.addEventListener('mouseout', () => this.hide());\n\t}\n\n\tasync attachTo(elm: HTMLElement|'cursor', position: TooltipPosition = 'right') {\n\t\tthis.deatach();\n\t\tawait this.updateComplete;\n\n\t\tif (elm instanceof HTMLElement) {\n\t\t\tthis.attachToElement(elm, position);\n\t\t} else {\n\t\t\tthis.attachToCursor();\n\t\t}\n\t}\n\n}"]}

package/dist/ui/tooltip.style.d.ts

@@ -1,2 +0,0 @@
-export declare const styles: import("lit").CSSResult[];
-//# sourceMappingURL=tooltip.style.d.ts.map

package/dist/ui/tooltip.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,2BA2GhB,CAAC"}

package/dist/ui/tooltip.style.js

@@ -1,112 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { ColorTypes } from "../types";
-import constants from "../constants";
-export const styles = [css `
-	:host {
-		display: block;
-		position: absolute;
-		z-index: 1000;
-		pointer-events: none;
-		box-sizing: border-box;
-		font-size: var(--og-font-size);
-		font-family: var(--og-font-family);
-	}
-
-	#inner {
-		border-radius: var(--og-base-radius);
-	}
-
-	* {
-		box-sizing: border-box;
-	}
-
-	.head, .body {
-		padding: 2px;
-	}
-
-	#triangle {
-		position: absolute;
-		width: 0;
-		height: 0;
-	}
-
-	#triangle-inner {
-		position: relative;
-		width: 0;
-		height: 0;
-	}
-
-	#triangle.left, #triangle.right {
-		border-top: ${constants.TOOLTIP_MARGIN}px solid transparent;
-		border-bottom: ${constants.TOOLTIP_MARGIN}px solid transparent;
-	}
-
-	#triangle.top, #triangle.bottom {
-		border-left: ${constants.TOOLTIP_MARGIN}px solid transparent;
-		border-right: ${constants.TOOLTIP_MARGIN}px solid transparent;
-	}
-
-	#triangle.left #triangle-inner, #triangle.right #triangle-inner {
-		border-top: ${constants.TOOLTIP_MARGIN}px solid transparent;
-		border-bottom: ${constants.TOOLTIP_MARGIN}px solid transparent;
-	}
-
-	#triangle.top #triangle-inner, #triangle.bottom #triangle-inner {
-		border-left: ${constants.TOOLTIP_MARGIN}px solid transparent;
-		border-right: ${constants.TOOLTIP_MARGIN}px solid transparent;
-	}
-
-	#triangle.left #triangle-inner {
-		top: -${constants.TOOLTIP_MARGIN}px;
-		left: 2px;
-	}
-
-	#triangle.right #triangle-inner {
-		top: -${constants.TOOLTIP_MARGIN}px;
-		right: ${constants.TOOLTIP_MARGIN + 2}px;
-	}
-
-	#triangle.top #triangle-inner {
-		top: 2px;
-		left: -${constants.TOOLTIP_MARGIN}px;
-	}
-
-	#triangle.bottom #triangle-inner {
-		top: -${constants.TOOLTIP_MARGIN + 2}px;
-		left: -${constants.TOOLTIP_MARGIN}px;
-	}
-
-`, ...Object.values(ColorTypes).map(type => css `
-	:host([color="${unsafeCSS(type)}"]) #triangle.left {
-		border-right: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.right {
-		border-left: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.top {
-		border-bottom: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.bottom {
-		border-top: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.left #triangle-inner {
-		border-right: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.right #triangle-inner {
-		border-left: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.top #triangle-inner {
-		border-bottom: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-
-	:host([color="${unsafeCSS(type)}"]) #triangle.bottom #triangle-inner {
-		border-top: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);
-	}
-`)];
-//# sourceMappingURL=tooltip.style.js.map

package/dist/ui/tooltip.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.style.js","sourceRoot":"","sources":["../../src/ui/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAoCV,SAAS,CAAC,cAAc;mBACrB,SAAS,CAAC,cAAc;;;;iBAI1B,SAAS,CAAC,cAAc;kBACvB,SAAS,CAAC,cAAc;;;;gBAI1B,SAAS,CAAC,cAAc;mBACrB,SAAS,CAAC,cAAc;;;;iBAI1B,SAAS,CAAC,cAAc;kBACvB,SAAS,CAAC,cAAc;;;;UAIhC,SAAS,CAAC,cAAc;;;;;UAKxB,SAAS,CAAC,cAAc;WACvB,SAAS,CAAC,cAAc,GAAG,CAAC;;;;;WAK5B,SAAS,CAAC,cAAc;;;;UAIzB,SAAS,CAAC,cAAc,GAAG,CAAC;WAC3B,SAAS,CAAC,cAAc;;;CAGlC,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAA;iBAC9B,SAAS,CAAC,IAAI,CAAC;kBACd,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGvE,SAAS,CAAC,IAAI,CAAC;iBACf,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGtE,SAAS,CAAC,IAAI,CAAC;mBACb,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGxE,SAAS,CAAC,IAAI,CAAC;gBAChB,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGrE,SAAS,CAAC,IAAI,CAAC;kBACd,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGvE,SAAS,CAAC,IAAI,CAAC;iBACf,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGtE,SAAS,CAAC,IAAI,CAAC;mBACb,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;;iBAGxE,SAAS,CAAC,IAAI,CAAC;gBAChB,SAAS,CAAC,cAAc,+BAA+B,SAAS,CAAC,IAAI,CAAC;;CAErF,CAAC,CAAC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ColorTypes } from \"../types\";\nimport constants from \"../constants\";\n\nexport const styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tz-index: 1000;\n\t\tpointer-events: none;\n\t\tbox-sizing: border-box;\n\t\tfont-size: var(--og-font-size);\n\t\tfont-family: var(--og-font-family);\n\t}\n\n\t#inner {\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.head, .body {\n\t\tpadding: 2px;\n\t}\n\n\t#triangle {\n\t\tposition: absolute;\n\t\twidth: 0;\n\t\theight: 0;\n\t}\n\n\t#triangle-inner {\n\t\tposition: relative;\n\t\twidth: 0;\n\t\theight: 0;\n\t}\n\n\t#triangle.left, #triangle.right {\n\t\tborder-top: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t\tborder-bottom: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t}\n\n\t#triangle.top, #triangle.bottom {\n\t\tborder-left: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t\tborder-right: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t}\n\n\t#triangle.left #triangle-inner, #triangle.right #triangle-inner {\n\t\tborder-top: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t\tborder-bottom: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t}\n\n\t#triangle.top #triangle-inner, #triangle.bottom #triangle-inner {\n\t\tborder-left: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t\tborder-right: ${constants.TOOLTIP_MARGIN}px solid transparent;\n\t}\n\n\t#triangle.left #triangle-inner {\n\t\ttop: -${constants.TOOLTIP_MARGIN}px;\n\t\tleft: 2px;\n\t}\n\n\t#triangle.right #triangle-inner {\n\t\ttop: -${constants.TOOLTIP_MARGIN}px;\n\t\tright: ${constants.TOOLTIP_MARGIN + 2}px;\n\t}\n\n\t#triangle.top #triangle-inner {\n\t\ttop: 2px;\n\t\tleft: -${constants.TOOLTIP_MARGIN}px;\n\t}\n\n\t#triangle.bottom #triangle-inner {\n\t\ttop: -${constants.TOOLTIP_MARGIN + 2}px;\n\t\tleft: -${constants.TOOLTIP_MARGIN}px;\n\t}\n\n`, ...Object.values(ColorTypes).map(type => css`\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.left {\n\t\tborder-right: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.right {\n\t\tborder-left: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.top {\n\t\tborder-bottom: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.bottom {\n\t\tborder-top: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-border-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.left #triangle-inner {\n\t\tborder-right: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.right #triangle-inner {\n\t\tborder-left: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.top #triangle-inner {\n\t\tborder-bottom: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"]) #triangle.bottom #triangle-inner {\n\t\tborder-top: ${constants.TOOLTIP_MARGIN}px solid var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n`)];"]}