@omegagrid/core 0.10.2 → 0.10.4

package/dist/ui/switch.style.js

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1 @@
+{"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`)];"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omegagrid/core",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "license": "UNLICENSED",
   "description": "Core components",
   "main": "./dist/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.0.1",
-    "@omegagrid/localize": "^0.10.2",
+    "@omegagrid/localize": "^0.10.4",
     "color": "^4.2.3",
     "date-fns": "^3.2.0",
     "lit": "^3.1.1",