@alegendstale/holly-components 1.4.0 → 2.0.2

package/dist/components/carousel-scroller/carousel-scroller.styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		--padding: 40px;
+		--margin: 80px;
+	}
+
+	.container {
+		width: 600px;
+		height: 400px;
+		margin: 20px;
+		border-radius: 20px;
+		overflow: hidden;
+		position: relative;
+
+		& > button {
+			position: absolute;
+			width: var(--padding);
+			height: calc(var(--padding) * 2);
+			z-index: 1;
+			background-color: #00000080;
+			border: none;
+			bottom: calc(50% - var(--padding));
+			font-size: 32px;
+
+			&:hover {
+				background-color: #6352b880;
+			}
+
+			&:nth-child(1) {
+				left: 0;
+				border-top-right-radius: 314px;
+				border-bottom-right-radius: 314px;
+			}
+
+			&:nth-child(2) {
+				right: 0;
+				border-top-left-radius: 314px;
+				border-bottom-left-radius: 314px;
+			}
+		}
+
+		& > div {
+			display: flex;
+			overflow-x: scroll;
+			position: relative;
+			scroll-behavior: smooth;
+			scroll-snap-type: x mandatory;
+			scrollbar-width: none;
+			padding: 0 var(--padding);
+		}
+
+		::slotted(*) {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			min-height: calc(400px - var(--margin));
+			min-width: calc(600px - var(--margin));
+			max-height: calc(400px - var(--margin));
+			max-width: calc(600px - var(--margin));
+			background: white;
+			scroll-snap-align: center;
+			padding: calc(var(--margin) / 2);
+		}
+	}
+`;

package/dist/components/color-palette/color-palette-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette-utils.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/color-palette-utils.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACpB,GAAG,QAAQ;IACX,MAAM,WAAW;CACjB;AAED,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,iBAAiB;CACvB;AAED,oBAAY,UAAU;IACpB,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,eAAe,EAAE,oBAe7B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,oBAAY,MAAM;IACjB,KAAK,UAAU;IACf,cAAc,mBAAmB;IACjC,gBAAgB,qBAAqB;IACrC,2BAA2B,8BAA8B;IACzD,gBAAgB,qBAAqB;CACrC;AAED,eAAO,MAAM,QAAQ,QAAyJ,CAAA;AAE9K,qBAAa,YAAa,SAAQ,KAAK;IACtC,MAAM,EAAE,MAAM,CAAC;gBAEH,MAAM,EAAE,MAAM,EAAE,OAAO,SAAK;CAIxC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,MAAM,CAQrE;AAED;;;;EAIE;AACF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,CA8BjF;AAED;;EAEE;AACF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,oBAAoB;;;EAaxF"}
+{"version":3,"file":"color-palette-utils.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/color-palette-utils.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACpB,GAAG,QAAQ;IACX,MAAM,WAAW;CACjB;AAED,oBAAY,SAAS;IACpB,IAAI,SAAS;IACb,KAAK,iBAAiB;CACtB;AAED,oBAAY,UAAU;IACrB,GAAG,QAAQ;IACX,KAAK,UAAU;CACf;AAED,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,oBAe7B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,oBAAY,MAAM;IACjB,KAAK,UAAU;IACf,cAAc,mBAAmB;IACjC,gBAAgB,qBAAqB;IACrC,2BAA2B,8BAA8B;IACzD,gBAAgB,qBAAqB;CACrC;AAED,eAAO,MAAM,QAAQ,QAAyJ,CAAA;AAE9K,qBAAa,YAAa,SAAQ,KAAK;IACtC,MAAM,EAAE,MAAM,CAAC;gBAEH,MAAM,EAAE,MAAM,EAAE,OAAO,SAAK;CAIxC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,MAAM,CAQrE;AAED;;;;EAIE;AACF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,CA8BjF;AAED;;EAEE;AACF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,oBAAoB;;;EAaxF"}

package/dist/components/color-palette/color-palette.d.ts

@@ -7,51 +7,88 @@ type EventMap = {
     editMode: [editMode: boolean];
     notice: [message: string];
 };
+/**
+ * A component which can display colors in various ways.
+ *
+ * @cssprop {<length>} --palette-height - The height of the palette.
+ * @cssprop {<length> } --palette-width - The width of the palette.
+ * @cssprop {<color>} --palette-background-color - The background color of the palette.
+ * @cssprop {<color>} --palette-color - The color of the palette.
+ * @cssprop {<length>} --palette-column-flex-basis - The flex size for palette items.
+ * @cssprop {<length>} --palette-corners - The radius of the palette corners.
+ */
 export declare class ColorPalette extends LitElement {
     static styles: import("lit").CSSResult[];
-    palette: HTMLDivElement;
-    _editMode: boolean;
+    /** @internal The palette div wrapper. */
+    protected palette: HTMLDivElement;
+    /** @internal */
+    private _editMode;
+    /**
+     * Whether the palette can be edited.
+     * @type {boolean}
+     * @default false
+    */
     set editMode(val: boolean);
     get editMode(): boolean;
+    /** The input colors the palette will display. */
     colors: string[];
+    /**
+     * The height of the palette.
+     * @default 150
+    */
     height: number;
+    /**
+     * The width of the palette.
+     * @default 700
+    */
     width: number;
+    /**
+     * The direction the palette colors will face.
+     * @default column
+    */
     direction: Direction;
+    /** Whether the colors will appear as a gradient. */
     gradient: boolean;
+    /** Whether hovering over the palette is allowed. */
     preventHover: boolean;
+    /** Whether the text on each color is shown. */
     hideText: boolean;
+    /** Whether the input bypasses validation checks. */
     override: boolean;
+    /** The aliases for each color. */
     aliases: string[];
+    /** The maximum width of the container. (So that the palette doesn't expand past its bounds) */
     maxWidth: number;
-    /**
-     * Helper accessor for settings
-     */
+    /** Helper accessor for settings */
     set settings({ height, width, direction, gradient, preventHover, override, aliases }: PaletteSettings);
     get settings(): PaletteSettings;
+    /** The current status of the palette. */
     status: Status;
+    /** @internal Whether the palette should pulse on error. */
     private pulse;
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
+    /** Extended settings */
     pluginSettings: ColorPaletteSettings;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(_changedProperties: PropertyValues): void;
-    /**
-     * Sets the current status and parses colors
-     */
+    /** Sets the current status and parses colors. */
     setStatusAndColors(): void;
     render(): TemplateResult<1>;
-    /**
-    * @returns `user` OR `auto` width based on which is more appropriate
-    */
+    /** @returns `user` OR `auto` width based on which is more appropriate. */
     getPaletteWidth(): number;
-    createPalette: () => TemplateResult | typeof nothing;
-    createColors(): TemplateResult;
-    createGradient(): TemplateResult;
+    /** Creates a color palette or gradient palette depending on settings. */
+    protected createPalette(): TemplateResult | typeof nothing;
+    /** Create a color palette. */
+    protected createColors(): TemplateResult;
+    /** Create a gradient palette. */
+    protected createGradient(): TemplateResult;
     /**
-     * Create invalid palette based on palette status
+     * Create invalid palette based on palette status.
      * @param type Palette status type
      */
-    createInvalidPalette(type: Status, message?: string): TemplateResult<1>;
+    protected createInvalidPalette(type: Status, message?: string): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/color-palette/color-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/color-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrF,OAAO,EAAE,oBAAoB,EAAmB,SAAS,EAAgB,eAAe,EAAe,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIhJ,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,KAAK,QAAQ,GAAG;IACf,OAAO,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;IACvD,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC9B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;CAC1B,CAAC;AAEF,qBACa,YAAa,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,4BA2FX;IAGF,OAAO,EAAG,cAAc,CAAC;IAEzB,SAAS,EAAE,OAAO,CAAS;IAC3B,IACI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IACD,IAAI,QAAQ,IAJM,OAAO,CAMxB;IAGD,MAAM,EAAE,MAAM,EAAE,CAAM;IAItB,MAAM,EAAE,MAAM,CAA0B;IAExC,KAAK,EAAE,MAAM,CAAyB;IAEtC,SAAS,EAAE,SAAS,CAA6B;IAEjD,QAAQ,EAAE,OAAO,CAAS;IAE1B,YAAY,EAAE,OAAO,CAAS;IAE9B,QAAQ,EAAE,OAAO,CAAS;IAE1B,QAAQ,EAAE,OAAO,CAAS;IAE1B,OAAO,EAAE,MAAM,EAAE,CAAM;IAGvB,QAAQ,EAAE,MAAM,CAAK;IAErB;;OAEG;IACH,IAAW,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,EAQ3G;IACD,IAAW,QAAQ,IAAI,eAAe,CAWrC;IAGM,MAAM,EAAE,MAAM,CAAgB;IAGrC,OAAO,CAAC,KAAK,CAAkB;IAExB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAGtE,cAAc,EAAE,oBAAoB,CAAmB;IAEvD,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM9D;;OAEG;IACH,kBAAkB;IA8BlB,MAAM;IA2BN;;MAEE;IACK,eAAe;IAOtB,aAAa,QAAO,cAAc,GAAG,OAAO,OAAO,CAcjD;IAEF,YAAY,IAAI,cAAc;IA0E9B,cAAc,IAAI,cAAc;IAsChC;;;OAGG;IACH,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,SAAK;CAyB/C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
+{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/color-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhF,OAAO,EAAE,oBAAoB,EAAmB,SAAS,EAAgB,eAAe,EAAe,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIhJ,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,KAAK,QAAQ,GAAG;IACf,OAAO,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;IACvD,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC9B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB,yCAAyC;IAEzC,SAAS,CAAC,OAAO,EAAG,cAAc,CAAC;IAEnC,gBAAgB;IAChB,OAAO,CAAC,SAAS,CAAkB;IACnC;;;;MAIE;IACF,IACI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IACD,IAAI,QAAQ,IAJM,OAAO,CAMxB;IAED,iDAAiD;IAE1C,MAAM,EAAE,MAAM,EAAE,CAAM;IAI7B;;;MAGE;IAEK,MAAM,EAAE,MAAM,CAA0B;IAE/C;;;MAGE;IAEK,KAAK,EAAE,MAAM,CAAyB;IAE7C;;;MAGE;IAEK,SAAS,EAAE,SAAS,CAA6B;IAExD,oDAAoD;IAE7C,QAAQ,EAAE,OAAO,CAAS;IAEjC,oDAAoD;IAE7C,YAAY,EAAE,OAAO,CAAS;IAErC,+CAA+C;IAExC,QAAQ,EAAE,OAAO,CAAS;IAEjC,oDAAoD;IAE7C,QAAQ,EAAE,OAAO,CAAS;IAEjC,kCAAkC;IAE3B,OAAO,EAAE,MAAM,EAAE,CAAM;IAE9B,+FAA+F;IAExF,QAAQ,EAAE,MAAM,CAAK;IAE5B,mCAAmC;IACnC,IAAW,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,EAQ3G;IACD,IAAW,QAAQ,IAAI,eAAe,CAWrC;IAED,yCAAyC;IAElC,MAAM,EAAE,MAAM,CAAgB;IAErC,2DAA2D;IAE3D,OAAO,CAAC,KAAK,CAAkB;IAE/B,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,wBAAwB;IAExB,cAAc,EAAE,oBAAoB,CAAmB;IAEvD,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM9D,iDAAiD;IACjD,kBAAkB;IA8BlB,MAAM;IA2BN,0EAA0E;IACnE,eAAe;IAOtB,yEAAyE;IACzE,SAAS,CAAC,aAAa,IAAI,cAAc,GAAG,OAAO,OAAO;IAgB1D,8BAA8B;IAC9B,SAAS,CAAC,YAAY,IAAI,cAAc;IA0ExC,iCAAiC;IACjC,SAAS,CAAC,cAAc,IAAI,cAAc;IAsC1C;;;OAGG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,SAAK;CAyBzD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/dist/components/color-palette/color-palette.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, html, nothing, css } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { defaultSettings, Direction, PaletteError, parseColors, Status } from './color-palette-utils.js';
@@ -16,47 +16,67 @@ import { CanvasGradient } from '../canvas/canvas-gradient.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ColorPaletteItemEdit } from './item/color-palette-item-edit.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
+import styles from './color-palette.styles.js';
+/**
+ * A component which can display colors in various ways.
+ *
+ * @cssprop {<length>} --palette-height - The height of the palette.
+ * @cssprop {<length> } --palette-width - The width of the palette.
+ * @cssprop {<color>} --palette-background-color - The background color of the palette.
+ * @cssprop {<color>} --palette-color - The color of the palette.
+ * @cssprop {<length>} --palette-column-flex-basis - The flex size for palette items.
+ * @cssprop {<length>} --palette-corners - The radius of the palette corners.
+ */
 let ColorPalette = class ColorPalette extends LitElement {
     constructor() {
         super(...arguments);
+        /** @internal */
         this._editMode = false;
+        /** The input colors the palette will display. */
         this.colors = [];
         // Settings
+        /**
+         * The height of the palette.
+         * @default 150
+        */
         this.height = defaultSettings.height;
+        /**
+         * The width of the palette.
+         * @default 700
+        */
         this.width = defaultSettings.width;
+        /**
+         * The direction the palette colors will face.
+         * @default column
+        */
         this.direction = defaultSettings.direction;
+        /** Whether the colors will appear as a gradient. */
         this.gradient = false;
+        /** Whether hovering over the palette is allowed. */
         this.preventHover = false;
+        /** Whether the text on each color is shown. */
         this.hideText = false;
+        /** Whether the input bypasses validation checks. */
         this.override = false;
+        /** The aliases for each color. */
         this.aliases = [];
+        /** The maximum width of the container. (So that the palette doesn't expand past its bounds) */
         this.maxWidth = 0;
+        /** The current status of the palette. */
         this.status = Status.VALID;
+        /** @internal Whether the palette should pulse on error. */
         this.pulse = false;
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
+        /** Extended settings */
         this.pluginSettings = defaultSettings;
-        this.createPalette = () => {
-            try {
-                if (this.status === Status.VALID) {
-                    if (this.gradient)
-                        return this.createGradient();
-                    else
-                        return this.createColors();
-                }
-                else {
-                    // Throw error & create Invalid Palette
-                    throw new PaletteError(this.status);
-                }
-            }
-            catch (err) {
-                if (!(err instanceof PaletteError))
-                    return nothing;
-                this.emitter.emit('notice', err.message);
-                return this.createInvalidPalette(err.status, err.message);
-            }
-        };
     }
+    static { this.styles = [styles]; }
+    /**
+     * Whether the palette can be edited.
+     * @type {boolean}
+     * @default false
+    */
     set editMode(val) {
         this._editMode = val;
         this.emitter.emit('editMode', val);
@@ -64,9 +84,7 @@ let ColorPalette = class ColorPalette extends LitElement {
     get editMode() {
         return this._editMode;
     }
-    /**
-     * Helper accessor for settings
-     */
+    /** Helper accessor for settings */
     set settings({ height, width, direction, gradient, preventHover, override, aliases }) {
         this.height = height;
         this.width = width;
@@ -106,9 +124,7 @@ let ColorPalette = class ColorPalette extends LitElement {
         super.willUpdate(_changedProperties);
         this.setStatusAndColors();
     }
-    /**
-     * Sets the current status and parses colors
-     */
+    /** Sets the current status and parses colors. */
     setStatusAndColors() {
         const isSettingsValid = () => {
             return (!isNaN(this.height)
@@ -159,9 +175,7 @@ let ColorPalette = class ColorPalette extends LitElement {
 			</div>
 		`;
     }
-    /**
-    * @returns `user` OR `auto` width based on which is more appropriate
-    */
+    /** @returns `user` OR `auto` width based on which is more appropriate. */
     getPaletteWidth() {
         // Automatically set width if offset is less than settings width
         if (this.maxWidth < this.settings.width && this.maxWidth > 0)
@@ -170,6 +184,29 @@ let ColorPalette = class ColorPalette extends LitElement {
         else
             return this.settings.width;
     }
+    /** Creates a color palette or gradient palette depending on settings. */
+    createPalette() {
+        try {
+            if (this.status === Status.VALID) {
+                if (this.gradient)
+                    return this.createGradient();
+                else
+                    return this.createColors();
+            }
+            else {
+                // Throw error & create Invalid Palette
+                throw new PaletteError(this.status);
+            }
+        }
+        catch (err) {
+            if (!(err instanceof PaletteError))
+                return nothing;
+            this.emitter.emit('notice', err.message);
+            return this.createInvalidPalette(err.status, err.message);
+        }
+    }
+    ;
+    /** Create a color palette. */
     createColors() {
         return html `
 			${repeat(this.colors, (color, index) => {
@@ -240,6 +277,7 @@ let ColorPalette = class ColorPalette extends LitElement {
         })}
 		`;
     }
+    /** Create a gradient palette. */
     createGradient() {
         let tooltipRef = createRef();
         let canvasRef = (canvas) => {
@@ -277,7 +315,7 @@ let ColorPalette = class ColorPalette extends LitElement {
 		`;
     }
     /**
-     * Create invalid palette based on palette status
+     * Create invalid palette based on palette status.
      * @param type Palette status type
      */
     createInvalidPalette(type, message = '') {
@@ -304,98 +342,6 @@ let ColorPalette = class ColorPalette extends LitElement {
 		`;
     }
 };
-ColorPalette.styles = [
-    css `
-			:host {
-				display: block;
-				width: fit-content;
-			}
-
-			:host([direction='row']) #palette {
-				flex-direction: column;
-			}
-			
-			/* Edit Mode */
-			:host([editMode]) #palette {
-				overflow-x: auto;
-			}
-
-			// Invalid Palette
-			:host(:not([status='Valid'])) #palette {
-				
-			}
-			
-			/* Palette Container */
-
-			#container {
-				cursor: pointer;
-				position: relative;
-				background-color: #000;
-				contain: paint;
-			}
-
-			#container.palette-scroll {
-				overflow-x: auto;
-			}
-
-			/* Palette */
-
-			#palette {
-				/* fallback vars */
-				--palette-height: 150px;
-				--palette-width: 700px;
-				--palette-background-color: transparent;
-				--palette-color: #000;
-				--palette-column-flex-basis: 80px;
-				--palette-corners: 5px;
-
-				display: flex;
-				flex-direction: row;
-				border-radius: var(--palette-corners);
-				overflow: hidden;
-				cursor: pointer;
-				height: var(--palette-height);
-				width: var(--palette-width);
-				position: relative;
-				scrollbar-width: thin;
-
-				/* Drag & Drop */
-
-				& > .is-dragging {
-					opacity: 0;
-				}
-
-				& > #invalid {
-					position: absolute;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					height: var(--palette-height);
-					width: var(--palette-width);
-					background-color: #000000c0;
-					border-radius: var(--palette-corners);
-
-					& > span {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						color: white;
-						background-color: #000;
-						width: 100%;
-						height: 30%;
-						text-align: center;
-						user-select: none;
-					}
-				}
-			}
-
-			@keyframes pulse {
-				50% {
-					background-color: #FFFF0080;
-				}
-			}
-		`,
-];
 __decorate([
     query('#palette')
 ], ColorPalette.prototype, "palette", void 0);
@@ -442,6 +388,6 @@ __decorate([
     property({ type: Object })
 ], ColorPalette.prototype, "pluginSettings", void 0);
 ColorPalette = __decorate([
-    condCustomElement('color-palette')
+    customElement('color-palette')
 ], ColorPalette);
 export { ColorPalette };

package/dist/components/color-palette/color-palette.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=color-palette.styles.d.ts.map

package/dist/components/color-palette/color-palette.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/color-palette.styles.ts"],"names":[],"mappings":";AAEA,wBAwFE"}

package/dist/components/color-palette/color-palette.styles.js

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		display: block;
+		width: fit-content;
+	}
+
+	:host([direction='row']) #palette {
+		flex-direction: column;
+	}
+
+	/* Edit Mode */
+	:host([editMode]) #palette {
+		overflow-x: auto;
+	}
+
+	// Invalid Palette
+	:host(:not([status='Valid'])) #palette {
+	}
+
+	/* Palette Container */
+
+	#container {
+		cursor: pointer;
+		position: relative;
+		background-color: #000;
+		contain: paint;
+	}
+
+	#container.palette-scroll {
+		overflow-x: auto;
+	}
+
+	/* Palette */
+
+	#palette {
+		/* fallback vars */
+		--palette-height: 150px;
+		--palette-width: 700px;
+		--palette-background-color: transparent;
+		--palette-color: #000;
+		--palette-column-flex-basis: 80px;
+		--palette-corners: 5px;
+
+		display: flex;
+		flex-direction: row;
+		border-radius: var(--palette-corners);
+		overflow: hidden;
+		cursor: pointer;
+		height: var(--palette-height);
+		width: var(--palette-width);
+		position: relative;
+		scrollbar-width: thin;
+
+		/* Drag & Drop */
+
+		& > .is-dragging {
+			opacity: 0;
+		}
+
+		& > #invalid {
+			position: absolute;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: var(--palette-height);
+			width: var(--palette-width);
+			background-color: #000000c0;
+			border-radius: var(--palette-corners);
+
+			& > span {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				color: white;
+				background-color: #000;
+				width: 100%;
+				height: 30%;
+				text-align: center;
+				user-select: none;
+			}
+		}
+	}
+
+	@keyframes pulse {
+		50% {
+			background-color: #ffff0080;
+		}
+	}
+`;

package/dist/components/color-palette/component/color-palette-component.d.ts

@@ -2,15 +2,29 @@ import { LitElement, PropertyValues } from 'lit';
 import { ColorPalette } from '../color-palette.js';
 import { PaletteSettings } from '../color-palette-utils.js';
 import { AbsoluteContainer } from '../../absolute-container/absolute-container.js';
+/**
+ * color-palette components combined.
+ *
+ * @dependency color-palette
+ * @dependency bottom-sheet
+ * @dependency color-palette-menu
+ * @dependency absolute-container
+ * @dependency color-palette-editor
+ */
 export declare class ColorPaletteComponent extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** The color palette. */
     palette: ColorPalette;
+    /** The color-palette-editor wrapper. */
     absolute: AbsoluteContainer;
+    /** The palette colors. */
     colors: string[];
+    /** The palette settings. */
     settings: PaletteSettings;
+    /** Whether the palette is in edit mode. */
     editMode: boolean;
-    isMobile: boolean;
-    edit: boolean;
+    /** Whether the screen is mobile sized. */
+    protected isMobile: boolean;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/color-palette/component/color-palette-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette-component.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,qBACa,qBAAsB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAUX;IAGF,OAAO,EAAG,YAAY,CAAC;IAGvB,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,EAAE,eAAe,CASvB;IAGF,QAAQ,EAAE,OAAO,CAAS;IAG1B,QAAQ,EAAE,OAAO,CAAS;IAG1B,IAAI,EAAE,OAAO,CAAS;IAEtB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAYhE,MAAM;CAsHN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}
+{"version":3,"file":"color-palette-component.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF;;;;;;;;GAQG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAAY;IAEzB,yBAAyB;IAElB,OAAO,EAAG,YAAY,CAAC;IAE9B,wCAAwC;IAEjC,QAAQ,EAAG,iBAAiB,CAAC;IAEpC,0BAA0B;IAEnB,MAAM,EAAE,MAAM,EAAE,CAAM;IAE7B,4BAA4B;IAErB,QAAQ,EAAE,eAAe,CAS9B;IAEF,2CAA2C;IAEpC,QAAQ,EAAE,OAAO,CAAS;IAEjC,0CAA0C;IAE1C,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAS;IAEpC,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAYhE,MAAM;CAsHN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}