@alegendstale/holly-components 0.2.9 → 0.2.10

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

@@ -1,125 +1,137 @@
-import { css as a, LitElement as c, html as h } from "lit";
-import { query as p, customElement as u } from "lit/decorators.js";
-import { EventEmitter as m } from "../../utils/EventEmitter.js";
-var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (t, r, i, o) => {
-  for (var e = o > 1 ? void 0 : o ? b(r, i) : r, s = t.length - 1, n; s >= 0; s--)
-    (n = t[s]) && (e = (o ? n(r, i, e) : n(e)) || e);
-  return o && e && g(r, i, e), e;
+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;
 };
-let l = class extends c {
-  constructor() {
-    super(), this.slotChildren = [], this.emitter = new m(), this.currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(), this.emitter.on("slotsLoaded", (t) => {
-      this.slotChildren = t;
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  render() {
-    return h`
-			<div class="container">
-				<button @click=${this.scrollToPrevSlide}><</button>
-				<button @click=${this.scrollToNextSlide}>></button>
-				<div>
-					<slot @slotchange=${this.slotChange}></slot>
-				</div>
-			</div>
+import { css, html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { EventEmitter } from '../../utils/EventEmitter';
+let CarouselScroller = class CarouselScroller extends LitElement {
+    constructor() {
+        super();
+        this.slotChildren = [];
+        this.emitter = new EventEmitter();
+        this.currentSlide = 0;
+        this.debouncers = new WeakMap();
+        this.emitter.on('slotsLoaded', (slotChildren) => {
+            this.slotChildren = slotChildren;
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emitter.clear();
+    }
+    render() {
+        return html `
+			<div class="container">
+				<button @click=${this.scrollToPrevSlide}><</button>
+				<button @click=${this.scrollToNextSlide}>></button>
+				<div>
+					<slot @slotchange=${this.slotChange}></slot>
+				</div>
+			</div>
 		`;
-  }
-  getCurrentSlide() {
-    return this.slotChildren[this.currentSlide - 1];
-  }
-  scrollToPrevSlide() {
-    var t;
-    this.currentSlide = this.currentSlide === 0 ? this.currentSlide = this.slotChildren.length - 1 : this.currentSlide - 1, (t = this.slotChildren.at(this.currentSlide)) == null || t.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }
-  scrollToNextSlide() {
-    var t;
-    this.currentSlide = this.currentSlide === this.slotChildren.length - 1 ? 0 : this.currentSlide + 1, (t = this.slotChildren.at(this.currentSlide)) == null || t.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }
-  slotChange() {
-    const t = Array.from(
-      this.slotEl.assignedElements().map((i) => i)
-    );
-    clearTimeout(this.debouncers.get(this.slotEl));
-    const r = setTimeout(
-      () => this.emitter.emit("slotsLoaded", t),
-      100
-    );
-    this.debouncers.set(this.slotEl, r);
-  }
+    }
+    getCurrentSlide() {
+        return this.slotChildren[this.currentSlide - 1];
+    }
+    scrollToPrevSlide() {
+        this.currentSlide =
+            this.currentSlide === 0
+                ? (this.currentSlide = this.slotChildren.length - 1)
+                : this.currentSlide - 1;
+        this.slotChildren
+            .at(this.currentSlide)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    scrollToNextSlide() {
+        this.currentSlide =
+            this.currentSlide === this.slotChildren.length - 1
+                ? 0
+                : this.currentSlide + 1;
+        this.slotChildren
+            .at(this.currentSlide)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    slotChange() {
+        const slotElements = Array.from(this.slotEl
+            .assignedElements()
+            .map((element) => element));
+        clearTimeout(this.debouncers.get(this.slotEl));
+        const timeoutId = setTimeout(() => this.emitter.emit('slotsLoaded', slotElements), 100);
+        this.debouncers.set(this.slotEl, timeoutId);
+    }
 };
-l.styles = a`
-		: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);
-			}
-		}
+CarouselScroller.styles = 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);
+			}
+		}
 	`;
-d([
-  p("slot")
-], l.prototype, "slotEl", 2);
-l = d([
-  u("carousel-scroller")
-], l);
-export {
-  l as CarouselScroller
-};
+__decorate([
+    query('slot')
+], CarouselScroller.prototype, "slotEl", void 0);
+CarouselScroller = __decorate([
+    customElement('carousel-scroller')
+], CarouselScroller);
+export { CarouselScroller };

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

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+const meta = {
+    title: 'Carousel Scroller',
+    tags: ['autodocs'],
+    component: 'carousel-scroller',
+};
+export default meta;
+const Template = {
+    render: ({ items }) => {
+        return html `
+			<carousel-scroller>
+				${repeat(items, (item) => html `<div>${item}</div>`)}
+			</carousel-scroller>
+		`;
+    },
+};
+const items = [
+    'one',
+    'two',
+    'three'
+];
+export const Empty = {
+    ...Template,
+    args: {
+        items: [],
+    },
+};
+export const OneItem = {
+    ...Template,
+    args: {
+        items: [items[0]],
+    },
+};
+export const ManyItems = {
+    ...Template,
+    args: {
+        items,
+    },
+};

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

@@ -1 +1 @@
-import "./carousel-scroller.js";
+import './carousel-scroller';

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

@@ -1,44 +1,108 @@
-import { parseUrl as i, isColorValid as n } from "../../utils/basicUtils.js";
-var s = /* @__PURE__ */ ((r) => (r.Row = "row", r.Column = "column", r))(s || {}), u = /* @__PURE__ */ ((r) => (r.Both = "Both", r.Alias = "Prefer Alias", r))(u || {}), f = /* @__PURE__ */ ((r) => (r.Raw = "Raw", r.Value = "Value", r))(f || {});
-const c = {
-  noticeDuration: 1e4,
-  errorPulse: !0,
-  aliasMode: "Both",
-  corners: !0,
-  hoverWhileEditing: !1,
-  reloadDelay: 5,
-  copyFormat: "Raw",
-  height: 150,
-  width: 700,
-  direction: "column",
-  gradient: !1,
-  preventHover: !1,
-  override: !1
+import { isColorValid, parseUrl, pluginToPaletteSettings } from "../../utils/basicUtils";
+export var Direction;
+(function (Direction) {
+    Direction["Row"] = "row";
+    Direction["Column"] = "column";
+})(Direction || (Direction = {}));
+export var AliasMode;
+(function (AliasMode) {
+    AliasMode["Both"] = "Both";
+    AliasMode["Alias"] = "Prefer Alias";
+})(AliasMode || (AliasMode = {}));
+export var CopyFormat;
+(function (CopyFormat) {
+    CopyFormat["Raw"] = "Raw";
+    CopyFormat["Value"] = "Value";
+})(CopyFormat || (CopyFormat = {}));
+export const defaultSettings = {
+    noticeDuration: 10000,
+    errorPulse: true,
+    aliasMode: AliasMode.Both,
+    corners: true,
+    hoverWhileEditing: false,
+    reloadDelay: 5,
+    copyFormat: CopyFormat.Raw,
+    height: 150,
+    width: 700,
+    direction: Direction.Column,
+    gradient: false,
+    preventHover: false,
+    override: false
 };
-var p = /* @__PURE__ */ ((r) => (r.VALID = "Valid", r.INVALID_COLORS = "Invalid Colors", r.INVALID_SETTINGS = "Invalid Settings", r.INVALID_COLORS_AND_SETTINGS = "Invalid Colors & Settings", r.INVALID_GRADIENT = "Invalid Gradient", r))(p || {});
-const d = /(?:https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}(?:\.[a-zA-Z0-9]{2,})(?:\.[a-zA-Z0-9]{2,})?\/(?:palette\/)?([a-zA-Z0-9-]{2,})/;
-class h extends Error {
-  constructor(l, t = "") {
-    super(t), this.status = l;
-  }
+export var Status;
+(function (Status) {
+    Status["VALID"] = "Valid";
+    Status["INVALID_COLORS"] = "Invalid Colors";
+    Status["INVALID_SETTINGS"] = "Invalid Settings";
+    Status["INVALID_COLORS_AND_SETTINGS"] = "Invalid Colors & Settings";
+    Status["INVALID_GRADIENT"] = "Invalid Gradient";
+})(Status || (Status = {}));
+export const urlRegex = /(?:https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}(?:\.[a-zA-Z0-9]{2,})(?:\.[a-zA-Z0-9]{2,})?\/(?:palette\/)?([a-zA-Z0-9-]{2,})/;
+export class PaletteError extends Error {
+    constructor(status, message = '') {
+        super(message);
+        this.status = status;
+    }
 }
-function v(r, l) {
-  let t = r.flatMap((e) => e.includes("(") ? e.split(";").flatMap((a) => a.trim()).filter((a) => a !== "") : e.split(",").flatMap((a) => a.trim())).flatMap((e) => e.trim().replace(";", ""));
-  const o = t.join("");
-  if (o.match(d)) return i(o);
-  if (!l) {
-    for (let e of t)
-      if (!n(e)) return "Invalid Colors";
-  }
-  return t;
+/**
+ * Parses input & extracts settings
+ * @param input settings from codeblock
+ * @returns PaletteSettings or Status if settings are not valid
+ */
+export function parseSettings(input) {
+    try {
+        // Extract JSON settings from the palette
+        return JSON.parse(input);
+    }
+    catch (error) {
+        return Status.INVALID_SETTINGS;
+    }
+}
+/**
+* Parses input & extracts colors based on color space or URL
+* @param input colors from codeblock
+* @returns Array of colors or Status if colors are not valid
+*/
+export function parseColors(input, override) {
+    let colors = input.flatMap((color) => {
+        // Split RGB / HSL delimited by semicolons
+        if (color.includes('(')) {
+            return color.split(';').flatMap((postSplitColor) => postSplitColor.trim())
+                // Remove whitespace elements from array
+                .filter((color) => color !== '');
+        }
+        // Split colors delimited by commas
+        return color.split(',').flatMap((postSplitColor) => {
+            return postSplitColor.trim();
+        });
+        // Remove semicolons
+    }).flatMap((color) => color.trim().replace(';', ''));
+    // Combine colors array into string
+    const rawColors = colors.join('');
+    // If URL parse and return
+    if (rawColors.match(urlRegex))
+        return parseUrl(rawColors);
+    // Return status if colors are invalid
+    if (!override) {
+        for (let color of colors) {
+            if (!isColorValid(color))
+                return Status.INVALID_COLORS;
+        }
+    }
+    // Return final colors array
+    return colors;
+}
+/**
+* Calculates colors and settings based on codeblock contents
+*/
+export function calcColorsAndSettings(input, pluginSettings) {
+    // Splits input by newline creating an array
+    const split = input.split('\n');
+    // Returns true if palette settings are defined
+    const hasSettings = split.some((val) => val.includes(('{')));
+    // Remove and parse the last split index (settings are always defined on the last index)
+    let settings = hasSettings ? parseSettings(split.pop() || '') : undefined;
+    // Get PaletteSettings if valid or plugin defaults if invalid
+    let settingsObj = typeof settings === 'object' ? settings : pluginToPaletteSettings(pluginSettings);
+    return { colors: parseColors(split, settingsObj.override), settings: settings };
 }
-export {
-  u as AliasMode,
-  f as CopyFormat,
-  s as Direction,
-  h as PaletteError,
-  p as Status,
-  c as defaultSettings,
-  v as parseColors,
-  d as urlRegex
-};