@omegagrid/core 0.10.2 → 0.10.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../src/ui/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;YAQZ,SAAS,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDlC,CAAC","sourcesContent":["import { css } from 'lit';\nimport constants from '../constants';\n\nexport const style = css`\n\t:host {\n\t\tbox-sizing: border-box;\n\t\tfont-size: var(--og-font-size);\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t\theight: ${constants.BUTTON_HEIGHT}px;\n\t\toutline: none;\n\t\tuser-select: none;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([default]) {\n\t\tfont-weight: bold;\n\t\ttext-decoration: underline;\n\t}\n\n\t:host([state=unchecked]) {\n\t\tborder-color: var(--og-background-color);\n\t\tbackground-color: var(--og-background-color);\n\t\tcolor: var(--og-text-color);\n\t}\n\n\t:host([disabled]), :host([disabled]:hover) {\n\t\tbackground-color: gray;\n\t\tborder-color: var(--og-border-color);\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t:host(:hover) {\n\t\topacity: 0.8;\n\t}\n\n\tdiv.inner {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tdiv.content {\n\t\tflex: 1 0;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tpadding: 0 4px;\n\t}\n\n\t.has-content og-icon {\n\t\tmargin-left: 2px;\n\t}\n\n`;"]}

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export type CheckboxState = 'none' | 'checked' | 'indeterminable' | 'unchecked';
+export declare class Checkbox extends LitElement {
+    static defaultIconSet: string;
+    static defaultAlternateIconSet: string;
+    get iconSet(): string;
+    get alternateIconSet(): string;
+    static styles: import("lit").CSSResult;
+    value: CheckboxState;
+    color: string;
+    get icon(): string;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ui/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,WAAW,CAAC;AAShF,qBACa,QAAS,SAAQ,UAAU;IAEvC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC;IAEvC,IAAI,OAAO,IAAI,MAAM,CAA0D;IAC/E,IAAI,gBAAgB,IAAI,MAAM,CAAmE;IAEjG,MAAM,CAAC,MAAM,0BAIX;IAGF,KAAK,EAAE,aAAa,CAAU;IAG9B,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,IAAI,WAAgE;IAExE,MAAM,6CAKJ;CAEF"}

package/dist/ui/checkbox.js

@@ -0,0 +1,47 @@
+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;
+};
+var Checkbox_1;
+import { html, LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { config } from '@fortawesome/fontawesome-svg-core';
+const iconMap = {
+    'none': '',
+    'checked': '-check',
+    'indeterminable': '-minus',
+    'unchecked': '-xmark',
+};
+let Checkbox = Checkbox_1 = class Checkbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 'none';
+        this.render = () => html `
+		<og-icon
+			.icon="${[this.value == 'checked' || this.value == 'unchecked' ? this.iconSet : this.alternateIconSet, this.icon]}"
+			.color="${this.color}">
+		</og-icon>
+	`;
+    }
+    get iconSet() { return Checkbox_1.defaultIconSet || config.styleDefault; }
+    get alternateIconSet() { return Checkbox_1.defaultAlternateIconSet || config.styleDefault; }
+    get icon() { return 'square' + (this.value ? iconMap[this.value] : ''); }
+};
+Checkbox.styles = css `
+		:host([value="checked"]) {
+			color: var(--og-accent-color);
+		}
+	`;
+__decorate([
+    property({ type: String, reflect: true })
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], Checkbox.prototype, "color", void 0);
+Checkbox = Checkbox_1 = __decorate([
+    customElement('og-checkbox')
+], Checkbox);
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map

package/dist/ui/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/ui/checkbox.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAI3D,MAAM,OAAO,GAAkC;IAC9C,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,QAAQ;IACnB,gBAAgB,EAAE,QAAQ;IAC1B,WAAW,EAAE,QAAQ;CACrB,CAAC;AAGK,IAAM,QAAQ,gBAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAeN,UAAK,GAAkB,MAAM,CAAC;QAO9B,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;YAER,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,CAAC;aACvG,IAAI,CAAC,KAAK;;EAErB,CAAC;IAEH,CAAC;IAxBA,IAAI,OAAO,KAAa,OAAO,UAAQ,CAAC,cAAc,IAAI,MAAM,CAAC,YAAY,CAAA,CAAC,CAAC;IAC/E,IAAI,gBAAgB,KAAa,OAAO,UAAQ,CAAC,uBAAuB,IAAI,MAAM,CAAC,YAAY,CAAA,CAAC,CAAC;IAcjG,IAAI,IAAI,KAAK,OAAO,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA,CAAC,CAAC;;AAZjE,eAAM,GAAG,GAAG,CAAA;;;;EAIlB,AAJY,CAIX;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCACV;AAG9B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCACX;AAlBF,QAAQ;IADpB,aAAa,CAAC,aAAa,CAAC;GAChB,QAAQ,CA6BpB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { config } from '@fortawesome/fontawesome-svg-core';\n\nexport type CheckboxState = 'none' | 'checked' | 'indeterminable' | 'unchecked';\n\nconst iconMap: Record<CheckboxState, string> = {\n\t'none': '',\n\t'checked': '-check',\n\t'indeterminable': '-minus',\n\t'unchecked': '-xmark',\n};\n\n@customElement('og-checkbox')\nexport class Checkbox extends LitElement {\n\n\tstatic defaultIconSet: string;\n\tstatic defaultAlternateIconSet: string;\n\t\n\tget iconSet(): string { return Checkbox.defaultIconSet || config.styleDefault }\n\tget alternateIconSet(): string { return Checkbox.defaultAlternateIconSet || config.styleDefault }\n\n\tstatic styles = css`\n\t\t:host([value=\"checked\"]) {\n\t\t\tcolor: var(--og-accent-color);\n\t\t}\n\t`;\n\n\t@property({type: String, reflect: true})\n\tvalue: CheckboxState = 'none';\n\n\t@property({type: String})\n\tcolor: string;\n\n\tget icon() { return 'square' + (this.value ? iconMap[this.value] : '') }\n\n\trender = () => html`\n\t\t<og-icon\n\t\t\t.icon=\"${[this.value == 'checked' || this.value == 'unchecked' ? this.iconSet : this.alternateIconSet, this.icon]}\"\n\t\t\t.color=\"${this.color}\">\n\t\t</og-icon>\n\t`;\n\n}"]}

package/dist/ui/close.d.ts

@@ -0,0 +1,6 @@
+import { Button } from './button';
+export declare class Close extends Button {
+    static styles: import("lit").CSSResult[];
+    willUpdate(props: Map<PropertyKey, undefined>): void;
+}
+//# sourceMappingURL=close.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"close.d.ts","sourceRoot":"","sources":["../../src/ui/close.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,qBACa,KAAM,SAAQ,MAAM;IAEhC,MAAM,CAAC,MAAM,4BASV;IAEH,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC;CAM7C"}

package/dist/ui/close.js

@@ -0,0 +1,33 @@
+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 { customElement } from 'lit/decorators.js';
+import { Button } from './button';
+import { ColorTypes } from '../types';
+import { css } from 'lit';
+let Close = class Close extends Button {
+    willUpdate(props) {
+        this.color = ColorTypes.Transparent;
+        if (!this.icon)
+            this.icon = { icon: 'xmark', fallback: '×' };
+        super.willUpdate(props);
+    }
+};
+Close.styles = [...Button.styles, css `
+		:host {
+			min-width: 16px;
+		}
+
+		:host(:hover) {
+			background-color: var(--og-accent-color-alpha-30);
+			color: var(--og-text-color-3);
+		}
+	`];
+Close = __decorate([
+    customElement(`og-close`)
+], Close);
+export { Close };
+//# sourceMappingURL=close.js.map

package/dist/ui/close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close.js","sourceRoot":"","sources":["../../src/ui/close.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAGnB,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,MAAM;IAahC,UAAU,CAAC,KAAkC;QAC5C,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,WAAW,CAAC;QACpC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC;QAC3D,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;;AAfM,YAAM,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;EASrC,CAAC,AATW,CASV;AAXS,KAAK;IADjB,aAAa,CAAC,UAAU,CAAC;GACb,KAAK,CAmBjB","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { Button } from './button';\nimport { ColorTypes } from '../types';\nimport { css } from 'lit';\n\n@customElement(`og-close`)\nexport class Close extends Button {\n\n\tstatic styles = [...Button.styles, css`\n\t\t:host {\n\t\t\tmin-width: 16px;\n\t\t}\n\n\t\t:host(:hover) {\n\t\t\tbackground-color: var(--og-accent-color-alpha-30);\n\t\t\tcolor: var(--og-text-color-3);\n\t\t}\n\t`];\n\n\twillUpdate(props: Map<PropertyKey, undefined>) {\n\t\tthis.color = ColorTypes.Transparent;\n\t\tif (!this.icon) this.icon = {icon: 'xmark', fallback: '×'};\n\t\tsuper.willUpdate(props);\n\t}\n\t\n}\n"]}

package/dist/ui/colorpicker.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class ColorPickerEvent extends Event {
+    readonly color: string;
+    constructor(type: string, color: string);
+}
+export declare class ColorPicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    colors: string[][];
+    color: string;
+    input: HTMLInputElement;
+    _lastValue: string;
+    _isEditing: boolean;
+    get isManuallyEdited(): boolean;
+    commit(value: string | null, dispatchEvent?: boolean): boolean;
+    constructor();
+    willUpdate(): void;
+    resetEditState(): void;
+    updateInput(color?: string): void;
+    _onTextInput: (_e: InputEvent) => void;
+    _onTextChange: () => void;
+    selectInput(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=colorpicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker.d.ts","sourceRoot":"","sources":["../../src/ui/colorpicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AA4C5C,qBAAa,gBAAiB,SAAQ,KAAK;aAEA,KAAK,EAAE,MAAM;gBAA3C,IAAI,EAAE,MAAM,EAAkB,KAAK,EAAE,MAAM;CAGvD;AAKD,qBACa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,0BAgDX;IAGF,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IAGnB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,EAAE,gBAAgB,CAAC;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,UAAS;IACnB,IAAI,gBAAgB,YAAqC;IAEzD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAAE,aAAa,UAAO;;IAgC/C,UAAU;IAOV,cAAc;IAId,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM;IAiB1B,YAAY,GAAI,IAAI,UAAU,UAU7B;IAED,aAAa,aAGZ;IAED,WAAW;IAMX,MAAM,6CA0BJ;CAEF"}

package/dist/ui/colorpicker.js

@@ -0,0 +1,228 @@
+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 constants from '../constants';
+import { html, LitElement, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import Color from 'color';
+import { colors, dom, events } from '../common';
+import { contrastColor } from '../common/colors';
+const baseColors = [
+    '#808080',
+    '#961e1d',
+    '#ba2f2a',
+    '#ed1b24',
+    '#F1631B',
+    '#F7941D',
+    '#FFC210',
+    '#FEF200',
+    '#CADB2A',
+    '#87BE2F',
+    '#66B032',
+    '#2E913E',
+    '#006F3C',
+    '#007071',
+    '#008DB1',
+    '#00ADF1',
+    '#008FD5',
+    '#0274BB',
+    '#0054AE',
+    '#2F3397',
+    '#573498',
+    '#6B3499',
+    '#92278F',
+    '#B91B8A',
+    '#EA028C',
+];
+const createColors = (rows) => {
+    const colors = [];
+    for (let l = 0; l <= 100; l += 100 / rows) {
+        colors.push(baseColors.map(c => Color(c).hsl().l(l).hex().toString()));
+    }
+    return colors;
+};
+export class ColorPickerEvent extends Event {
+    constructor(type, color) {
+        super(`${type}`);
+        this.color = color;
+    }
+}
+const COLOR_REGEX = /^#?[0-9a-f]{6}$/i;
+const PARTIAL_COLOR_REGEX = /^#?[0-9a-f]{0,6}$/i;
+let ColorPicker = class ColorPicker extends LitElement {
+    get isManuallyEdited() { return this._lastValue != null; }
+    commit(value, dispatchEvent = true) {
+        if (value != null) {
+            value = colors.css(value);
+            if (!COLOR_REGEX.test(value))
+                return false;
+        }
+        this.color = value;
+        if (dispatchEvent)
+            this.dispatchEvent(new events.ChangeEvent(this.color));
+        return true;
+    }
+    constructor() {
+        super();
+        this._isEditing = false;
+        this._onTextInput = (_e) => {
+            this._isEditing = true;
+            if (!PARTIAL_COLOR_REGEX.test(this.input.value)) {
+                this.input.value = this._lastValue;
+            }
+            else {
+                let value = this.input.value ?? '';
+                value = value.startsWith('#') ? value : ('#' + value);
+                this.updateInput(value);
+                this._lastValue = this.input.value;
+            }
+        };
+        this._onTextChange = () => {
+            this._isEditing = false;
+            this.commit(this.input.value);
+        };
+        this.render = () => html `
+		<div class="header">
+			<input type="text"
+				@input="${this._onTextInput}"
+				@focus="${() => this.selectInput()}"
+				@change="${this._onTextChange}">
+
+			<og-button
+				class="cross"
+				@click="${() => this.commit(null)}"
+				icon="xmark"
+				color="red">
+			</og-button>
+		</div>
+
+		<table>
+			${map(this.colors, row => html `<tr>
+				${map(row, color => html `<td>
+					<div 
+						class="${classMap({ color: true, selected: this.color == color })}"
+						data-color="${color}"
+						style="background: ${color}">
+					</div>
+				</td>`)}
+			</tr>`)}
+		</table>
+	`;
+        dom.on(this, 'click', '.color', (_e, elm) => {
+            if (!this.commit(elm.dataset.color))
+                return;
+            this.dispatchEvent(new ColorPickerEvent('select', this.color));
+        });
+        dom.on(this, 'mousemove', '.color', (_e, elm) => {
+            if (this.input.value != elm.dataset.color) {
+                const color = elm.dataset.color;
+                this.updateInput(color);
+                this.dispatchEvent(new ColorPickerEvent('preview', color));
+            }
+        });
+        this.addEventListener('mouseout', () => {
+            if (this._isEditing)
+                return;
+            this.updateInput();
+            this.dispatchEvent(new ColorPickerEvent('previewEnd', this.color));
+        });
+    }
+    willUpdate() {
+        this.color = colors.css(this.color);
+        if (!this.colors || this.colors.length == 0) {
+            this.colors = createColors(5);
+        }
+    }
+    resetEditState() {
+        this._lastValue = null;
+    }
+    updateInput(color) {
+        color = color ?? this.color;
+        this.input.value = color ?? '';
+        if (color) {
+            try {
+                this.input.style.color = contrastColor(color);
+            }
+            catch (error) {
+                this.input.style.color = '';
+            }
+        }
+        else {
+            this.input.style.color = '';
+        }
+        this.input.style.backgroundColor = color ?? '';
+    }
+    selectInput() {
+        if (this.input.value.length > 0) {
+            this.input.setSelectionRange(1, this.input.value.length);
+        }
+    }
+};
+ColorPicker.styles = css `
+		* { box-sizing: border-box }
+
+		:host {
+			display: inline-block;
+			border: 1px solid var(--og-accent-color);
+			border-radius: var(--og-base-radius);
+		}
+
+		.color {
+			width: ${constants.COLORPICKER_COLOR_SIZE}px;
+			height: ${constants.COLORPICKER_COLOR_SIZE}px;
+			cursor: pointer;
+			border: 2px solid transparent;
+		}
+
+		.color:hover, .color.selected {
+			border-color: var(--og-accent-color);
+		}
+
+		input {
+			border-width: 0;
+			outline: none;
+			height: 100%;
+			flex: 1;
+			width: 100%;
+			background-color: var(--og-background-color);
+			color: var(--og-text-color);
+			text-align: center;
+			font-size: var(--og-font-size);
+			font-family: var(--og-font-family);
+		}
+
+		.cross {
+			flex: 0 20px;
+			border: none;
+			border-radius: 0;
+		}
+
+		.header {
+			display: flex;
+			flex-direction: row;
+			border-bottom: 1px solid var(--og-accent-color);
+		}
+
+		.header > * {
+			height: 20px;
+		}
+	`;
+__decorate([
+    property({ type: Array })
+], ColorPicker.prototype, "colors", void 0);
+__decorate([
+    property({ type: String })
+], ColorPicker.prototype, "color", void 0);
+__decorate([
+    query('input')
+], ColorPicker.prototype, "input", void 0);
+ColorPicker = __decorate([
+    customElement('og-colorpicker')
+], ColorPicker);
+export { ColorPicker };
+//# sourceMappingURL=colorpicker.js.map

package/dist/ui/colorpicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker.js","sourceRoot":"","sources":["../../src/ui/colorpicker.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from '../constants';\nimport { html, LitElement, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport Color from 'color';\nimport { colors, dom, events } from '../common';\nimport { contrastColor } from '../common/colors';\n\nconst baseColors = [\n\t'#808080',\n\t'#961e1d',\n\t'#ba2f2a',\n\t'#ed1b24',\n\t'#F1631B',\n\t'#F7941D',\n\t'#FFC210',\n\t'#FEF200',\n\t'#CADB2A',\n\t'#87BE2F',\n\t'#66B032',\n\t'#2E913E',\n\t'#006F3C',\n\t'#007071',\n\t'#008DB1',\n\t'#00ADF1',\n\t'#008FD5',\n\t'#0274BB',\n\t'#0054AE',\n\t'#2F3397',\n\t'#573498',\n\t'#6B3499',\n\t'#92278F',\n\t'#B91B8A',\n\t'#EA028C',\n];\n\nconst createColors = (rows: number): string[][] => {\n\tconst colors: string[][] = [];\n\tfor (let l = 0; l <= 100; l += 100 / rows) {\n\t\tcolors.push(baseColors.map(c => Color(c).hsl().l(l).hex().toString()));\n\t}\n\treturn colors;\n};\n\nexport class ColorPickerEvent extends Event {\n\n\tconstructor(type: string, public readonly color: string) {\n\t\tsuper(`${type}`);\n\t}\n}\n\nconst COLOR_REGEX = /^#?[0-9a-f]{6}$/i;\nconst PARTIAL_COLOR_REGEX = /^#?[0-9a-f]{0,6}$/i;\n\n@customElement('og-colorpicker')\nexport class ColorPicker extends LitElement {\n\n\tstatic styles = css`\n\t\t* { box-sizing: border-box }\n\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t.color {\n\t\t\twidth: ${constants.COLORPICKER_COLOR_SIZE}px;\n\t\t\theight: ${constants.COLORPICKER_COLOR_SIZE}px;\n\t\t\tcursor: pointer;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t.color:hover, .color.selected {\n\t\t\tborder-color: var(--og-accent-color);\n\t\t}\n\n\t\tinput {\n\t\t\tborder-width: 0;\n\t\t\toutline: none;\n\t\t\theight: 100%;\n\t\t\tflex: 1;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t\ttext-align: center;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t}\n\n\t\t.cross {\n\t\t\tflex: 0 20px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t.header {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tborder-bottom: 1px solid var(--og-accent-color);\n\t\t}\n\n\t\t.header > * {\n\t\t\theight: 20px;\n\t\t}\n\t`;\n\n\t@property({type: Array})\n\tcolors: string[][];\n\n\t@property({type: String})\n\tcolor: string;\n\n\t@query('input')\n\tinput: HTMLInputElement;\n\n\t_lastValue: string;\n\t_isEditing = false;\n\tget isManuallyEdited() { return this._lastValue != null }\n\n\tcommit(value: string|null, dispatchEvent = true) {\n\t\tif (value != null) {\n\t\t\tvalue = colors.css(value);\n\t\t\tif (!COLOR_REGEX.test(value)) return false;\n\t\t}\n\t\tthis.color = value;\n\t\tif (dispatchEvent) this.dispatchEvent(new events.ChangeEvent(this.color));\n\t\treturn true;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tdom.on(this, 'click', '.color', (_e: MouseEvent, elm) => {\n\t\t\tif (!this.commit(elm.dataset.color)) return;\n\t\t\tthis.dispatchEvent(new ColorPickerEvent('select', this.color));\n\t\t});\n\n\t\tdom.on(this, 'mousemove', '.color', (_e: MouseEvent, elm) => {\n\t\t\tif (this.input.value != elm.dataset.color) {\n\t\t\t\tconst color = elm.dataset.color;\n\t\t\t\tthis.updateInput(color);\n\t\t\t\tthis.dispatchEvent(new ColorPickerEvent('preview', color));\n\t\t\t}\n\t\t});\n\n\t\tthis.addEventListener('mouseout', () => {\n\t\t\tif (this._isEditing) return;\n\t\t\tthis.updateInput();\n\t\t\tthis.dispatchEvent(new ColorPickerEvent('previewEnd', this.color));\n\t\t});\n\t}\n\n\twillUpdate() {\n\t\tthis.color = colors.css(this.color);\n\t\tif (!this.colors || this.colors.length == 0) {\n\t\t\tthis.colors = createColors(5);\n\t\t}\n\t}\n\n\tresetEditState() {\n\t\tthis._lastValue = null;\n\t}\n\n\tupdateInput(color?: string) {\n\t\tcolor = color ?? this.color;\n\t\tthis.input.value = color ?? '';\n\n\t\tif (color) {\n\t\t\ttry {\n\t\t\t\tthis.input.style.color = contrastColor(color);\n\t\t\t} catch (error) {\n\t\t\t\tthis.input.style.color = '';\n\t\t\t}\n\t\t} else {\n\t\t\tthis.input.style.color = '';\n\t\t}\n\n\t\tthis.input.style.backgroundColor = color ?? '';\n\t}\n\n\t_onTextInput = (_e: InputEvent) => {\n\t\tthis._isEditing = true;\n\t\tif (!PARTIAL_COLOR_REGEX.test(this.input.value)) {\n\t\t\tthis.input.value = this._lastValue;\n\t\t} else {\n\t\t\tlet value = this.input.value ?? '';\n\t\t\tvalue = value.startsWith('#') ? value : ('#' + value);\n\t\t\tthis.updateInput(value);\n\t\t\tthis._lastValue = this.input.value;\n\t\t}\n\t}\n\n\t_onTextChange = () => {\n\t\tthis._isEditing = false;\n\t\tthis.commit(this.input.value);\n\t}\n\n\tselectInput() {\n\t\tif (this.input.value.length > 0) {\n\t\t\tthis.input.setSelectionRange(1, this.input.value.length);\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<input type=\"text\"\n\t\t\t\t@input=\"${this._onTextInput}\"\n\t\t\t\t@focus=\"${() => this.selectInput()}\"\n\t\t\t\t@change=\"${this._onTextChange}\">\n\n\t\t\t<og-button\n\t\t\t\tclass=\"cross\"\n\t\t\t\t@click=\"${() => this.commit(null)}\"\n\t\t\t\ticon=\"xmark\"\n\t\t\t\tcolor=\"red\">\n\t\t\t</og-button>\n\t\t</div>\n\n\t\t<table>\n\t\t\t${map(this.colors, row => html`<tr>\n\t\t\t\t${map(row, color => html`<td>\n\t\t\t\t\t<div \n\t\t\t\t\t\tclass=\"${classMap({color: true, selected: this.color == color})}\"\n\t\t\t\t\t\tdata-color=\"${color}\"\n\t\t\t\t\t\tstyle=\"background: ${color}\">\n\t\t\t\t\t</div>\n\t\t\t\t</td>`)}\n\t\t\t</tr>`)}\n\t\t</table>\n\t`;\n\n}"]}

package/dist/ui/container.d.ts

@@ -0,0 +1,39 @@
+import { Slider } from "./slider";
+import { OmegaComponent } from "../model";
+import { ComponentFactory, ComponentId, HorizontalPosition, VerticalPosition } from "../types";
+export declare class Container extends OmegaComponent {
+    static styles: import("lit").CSSResult;
+    componentId: ComponentId;
+    createComponent: ComponentFactory;
+    overscroll: boolean;
+    scrollMode: 'vertical' | 'horizontal' | 'both';
+    sliderSize: number;
+    scrollbarPadding: boolean;
+    horizontalSliderPosition: VerticalPosition;
+    verticalSliderPosition: HorizontalPosition;
+    inner: HTMLDivElement;
+    private verticalSliderRef;
+    get verticalSlider(): Slider;
+    private horizontalSliderRef;
+    get horizontalSlider(): Slider;
+    private resizeObserver;
+    private touchStart;
+    private _mouseIn;
+    get isScrolling(): boolean;
+    fixScrollPosition(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    connectObservers(): void;
+    disconnectObservers(): void;
+    scrollVerticalByPixels(deltaY: number): boolean;
+    scrollVerticalTo(top: number): void;
+    scrollHorizontalByPixels(deltaX: number): boolean;
+    scrollHorizontalTo(left: number): void;
+    firstUpdated(): void;
+    updated(): Promise<void>;
+    render: () => import("lit-html").TemplateResult<1>;
+    get scrollHeight(): number;
+    get scrollWidth(): number;
+    updateSliders(): void;
+}
+//# sourceMappingURL=container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/ui/container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,MAAM,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI/F,qBACa,SAAU,SAAQ,cAAc;IAE5C,MAAM,CAAC,MAAM,0BAwDX;IAGF,WAAW,EAAE,WAAW,CAAC;IAGzB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,UAAU,UAAS;IAGnB,UAAU,EAAE,UAAU,GAAC,YAAY,GAAC,MAAM,CAAc;IAGxD,UAAU,SAAK;IAGf,gBAAgB,UAAS;IAGzB,wBAAwB,EAAE,gBAAgB,CAAY;IAGtD,sBAAsB,EAAE,kBAAkB,CAAW;IAGrD,KAAK,EAAE,cAAc,CAAC;IAEtB,OAAO,CAAC,iBAAiB,CAA4B;IACrD,IAAI,cAAc,WAA0C;IAE5D,OAAO,CAAC,mBAAmB,CAA4B;IACvD,IAAI,gBAAgB,WAA4C;IAEhE,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAEzB,IAAI,WAAW,YAA6E;IAE5F,iBAAiB;IAQjB,iBAAiB;IAKjB,oBAAoB;IAKpB,gBAAgB;IAUhB,mBAAmB;IAKnB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAc/C,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAS5B,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAQjD,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAO/B,YAAY;IA2DN,OAAO;IAYb,MAAM,6CAwBJ;IAEF,IAAI,YAAY,WAEf;IAED,IAAI,WAAW,WAEd;IAED,aAAa;CAoCb"}