@alegendstale/holly-components/dist/components/color-palette/component/color-palette-component.js

Reusable UI components created using lit

import { LitElement as g, html as d } from "lit";
import { query as l, property as c, customElement as m } from "lit/decorators.js";
import { defaultSettings as r } from "../color-palette-utils.js";
import u from "./color-palette-component.styles.js";
import { ResponsiveController as $ } from "../../../controllers/ResponsiveController.js";
var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, i, h, n) => {
  for (var s = n > 1 ? void 0 : n ? _(i, h) : i, p = e.length - 1, a; p >= 0; p--)
    (a = e[p]) && (s = (n ? a(i, h, s) : a(s)) || s);
  return n && s && v(i, h, s), s;
};
let t = class extends g {
  constructor() {
    super(...arguments), this.colors = [], this.settings = {
      height: r.height,
      width: r.width,
      direction: r.direction,
      gradient: r.gradient,
      preventHover: r.preventHover,
      hideText: r.hideText,
      override: r.override,
      aliases: []
    }, this.editMode = !1, this.responsiveController = new $(this, "1400px");
  }
  /** Whether the screen is mobile sized. */
  get isMobile() {
    return this.responsiveController.isMobile;
  }
  render() {
    return d`
			<color-palette
				.colors=${this.colors}
				height=${this.settings.height}
				width=${this.settings.width}
				direction=${this.settings.direction}
				?gradient=${this.settings.gradient}
				?preventHover=${this.settings.preventHover}
				?hideText=${this.settings.hideText}
				?override=${this.settings.override}
				.aliases=${this.settings.aliases}
				?editMode=${this.editMode}
				@contextmenu=${(e) => {
      e.preventDefault(), this.isMobile ? this._menuSheet && this._menuSheet.toggleSheet() : (this._menuWrapper.toggle(), this._menuWrapper.setPosition(e.clientX + 16, e.clientY));
    }}
				@hc-palette-change=${({ detail: { colors: e, settings: i } }) => {
      this.colors = e, i && (this.settings = i);
    }}
			>
			</color-palette>

			${this.isMobile ? d`
					<bottom-sheet id="menu-wrapper" .snapPoints=${[0, 50]}>
						<color-palette-menu
							.colors=${this.colors}
							.settings=${this.settings}
							?editMode=${this.editMode}
							@click=${() => this._menuSheet.toggleSheet()}
							@hc-palette-change=${this.handlePaletteChange}
							@hc-palette-edit=${this.handlePaletteEdit}
							@open-editor=${this.handleOpenEditor}
						>
						</color-palette-menu>
					</bottom-sheet>
				` : d`
				<absolute-container
					id="menu-wrapper"
					@hc-visibility=${({ detail: { isVisible: e } }) => {
      e === !1 && (this._menu.reorder = !1);
    }}
				>
					<color-palette-menu
						.colors=${this.colors}
						.settings=${this.settings}
						?editMode=${this.editMode}
						@click=${() => this._menuWrapper.toggle()}
						@hc-palette-change=${this.handlePaletteChange}
						@hc-palette-edit=${this.handlePaletteEdit}
						@open-editor=${this.handleOpenEditor}
					>
					</color-palette-menu>
				</absolute-container>
				`}
			
			<absolute-container id="editor-wrapper">
				<color-palette-editor
					.colors=${this.colors}
					.settings=${this.settings}
					@hc-palette-change=${({ detail: { colors: e, settings: i } }) => {
      this.colors = e, i && (this.settings = i), this._editorWrapper.setOpen(!1);
    }}
				>
				</color-palette-editor>
			</absolute-container>
		`;
  }
  handlePaletteChange({ detail: { colors: e } }) {
    e && (this.colors = e);
  }
  handlePaletteEdit({ detail: { isEditMode: e } }) {
    this.editMode = e;
  }
  handleOpenEditor() {
    this._editorWrapper.toggle(), this._editor.colors = this.colors, this._editor.settings = this.settings;
  }
};
t.styles = [u];
o([
  l("#menu-wrapper")
], t.prototype, "_menuWrapper", 2);
o([
  l("#editor-wrapper")
], t.prototype, "_editorWrapper", 2);
o([
  l("bottom-sheet")
], t.prototype, "_menuSheet", 2);
o([
  l("color-palette-menu")
], t.prototype, "_menu", 2);
o([
  l("color-palette-editor")
], t.prototype, "_editor", 2);
o([
  c({ type: Array })
], t.prototype, "colors", 2);
o([
  c({ type: Object })
], t.prototype, "settings", 2);
o([
  c({ type: Boolean })
], t.prototype, "editMode", 2);
t = o([
  m("color-palette-component")
], t);
export {
  t as ColorPaletteComponent
};