kanbancast-components - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/board-view.d.ts

@@ -25,2 +25,3 @@ import { LitElement } from 'lit';
     apiKey: string;
+    containerColor: string;
     selectedTab: string;
@@ -27,0 +28,0 @@ showModal: boolean;

dist/board-view.es.js

@@ -17,3 +17,3 @@ import { css as C, LitElement as P, html as y } from "lit";
  */
-const f = globalThis, w = f.ShadowRoot && (f.ShadyCSS === void 0 || f.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, _ = Symbol(), x = /* @__PURE__ */ new WeakMap();
+const f = globalThis, w = f.ShadowRoot && (f.ShadyCSS === void 0 || f.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, _ = Symbol(), $ = /* @__PURE__ */ new WeakMap();
 let U = class {
@@ -30,3 +30,3 @@ constructor(t, e, o) {
       const o = e !== void 0 && e.length === 1;
-      o && (t = x.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), o && x.set(e, t));
+      o && (t = $.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), o && $.set(e, t));
     }
@@ -39,3 +39,3 @@ return t;
 };
-const A = (s) => new U(typeof s == "string" ? s : s + "", void 0, _), O = (s, t) => {
+const A = (s) => new U(typeof s == "string" ? s : s + "", void 0, _), j = (s, t) => {
   if (w)
@@ -59,3 +59,3 @@ s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
  */
-const { is: j, defineProperty: D, getOwnPropertyDescriptor: R, getOwnPropertyNames: z, getOwnPropertySymbols: M, getPrototypeOf: I } = Object, h = globalThis, S = h.trustedTypes, L = S ? S.emptyScript : "", v = h.reactiveElementPolyfillSupport, u = (s, t) => s, g = { toAttribute(s, t) {
+const { is: O, defineProperty: z, getOwnPropertyDescriptor: D, getOwnPropertyNames: R, getOwnPropertySymbols: M, getPrototypeOf: I } = Object, h = globalThis, S = h.trustedTypes, L = S ? S.emptyScript : "", v = h.reactiveElementPolyfillSupport, u = (s, t) => s, g = { toAttribute(s, t) {
   switch (t) {
@@ -88,5 +88,5 @@ case Boolean:
   return e;
-} }, $ = (s, t) => !j(s, t), E = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: $ };
+} }, x = (s, t) => !O(s, t), E = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: x };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), h.litPropertyMetadata ?? (h.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class p extends HTMLElement {
+class d extends HTMLElement {
   static addInitializer(t) {
@@ -101,7 +101,7 @@ this._$Ei(), (this.l ?? (this.l = [])).push(t);
       const o = Symbol(), i = this.getPropertyDescriptor(t, o, e);
-      i !== void 0 && D(this.prototype, t, i);
+      i !== void 0 && z(this.prototype, t, i);
     }
   }
   static getPropertyDescriptor(t, e, o) {
-    const { get: i, set: r } = R(this.prototype, t) ?? { get() {
+    const { get: i, set: r } = D(this.prototype, t) ?? { get() {
       return this[e];
@@ -114,4 +114,4 @@ }, set(n) {
     }, set(n) {
-      const c = i == null ? void 0 : i.call(this);
-      r.call(this, n), this.requestUpdate(t, c, o);
+      const l = i == null ? void 0 : i.call(this);
+      r.call(this, n), this.requestUpdate(t, l, o);
     }, configurable: !0, enumerable: !0 };
@@ -132,3 +132,3 @@ }
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(u("properties"))) {
-      const e = this.properties, o = [...z(e), ...M(e)];
+      const e = this.properties, o = [...R(e), ...M(e)];
       for (const i of o)
@@ -188,3 +188,3 @@ this.createProperty(i, e[i]);
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return O(t, this.constructor.elementStyles), t;
+    return j(t, this.constructor.elementStyles), t;
   }
@@ -222,4 +222,4 @@ connectedCallback() {
     if (i !== void 0 && this._$Em !== i) {
-      const n = o.getPropertyOptions(i), c = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((r = n.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? n.converter : g;
-      this._$Em = i, this[i] = c.fromAttribute(e, n.type), this._$Em = null;
+      const n = o.getPropertyOptions(i), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((r = n.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? n.converter : g;
+      this._$Em = i, this[i] = l.fromAttribute(e, n.type), this._$Em = null;
     }
@@ -229,3 +229,3 @@ }
     if (t !== void 0) {
-      if (o ?? (o = this.constructor.getPropertyOptions(t)), !(o.hasChanged ?? $)(this[t], e))
+      if (o ?? (o = this.constructor.getPropertyOptions(t)), !(o.hasChanged ?? x)(this[t], e))
         return;
@@ -308,3 +308,3 @@ this.P(t, e, o);
 }
-p.elementStyles = [], p.shadowRootOptions = { mode: "open" }, p[u("elementProperties")] = /* @__PURE__ */ new Map(), p[u("finalized")] = /* @__PURE__ */ new Map(), v == null || v({ ReactiveElement: p }), (h.reactiveElementVersions ?? (h.reactiveElementVersions = [])).push("2.0.4");
+d.elementStyles = [], d.shadowRootOptions = { mode: "open" }, d[u("elementProperties")] = /* @__PURE__ */ new Map(), d[u("finalized")] = /* @__PURE__ */ new Map(), v == null || v({ ReactiveElement: d }), (h.reactiveElementVersions ?? (h.reactiveElementVersions = [])).push("2.0.4");
 /**
@@ -315,3 +315,3 @@ * @license
  */
-const N = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: $ }, F = (s = N, t, e) => {
+const N = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: x }, F = (s = N, t, e) => {
   const { kind: o, metadata: i } = e;
@@ -321,7 +321,7 @@ let r = globalThis.litPropertyMetadata.get(i);
     const { name: n } = e;
-    return { set(c) {
+    return { set(l) {
       const m = t.get.call(this);
-      t.set.call(this, c), this.requestUpdate(n, m, s);
-    }, init(c) {
-      return c !== void 0 && this.P(n, void 0, s), c;
+      t.set.call(this, l), this.requestUpdate(n, m, s);
+    }, init(l) {
+      return l !== void 0 && this.P(n, void 0, s), l;
     } };
@@ -331,5 +331,5 @@ }
     const { name: n } = e;
-    return function(c) {
+    return function(l) {
       const m = this[n];
-      t.call(this, c), this.requestUpdate(n, m, s);
+      t.call(this, l), this.requestUpdate(n, m, s);
     };
@@ -339,3 +339,3 @@ }
 };
-function d(s) {
+function p(s) {
   return (t, e) => typeof e == "object" ? F(s, t, e) : ((o, i, r) => {
@@ -352,3 +352,3 @@ const n = i.hasOwnProperty(r);
 function b(s) {
-  return d({ ...s, state: !0, attribute: !1 });
+  return p({ ...s, state: !0, attribute: !1 });
 }
@@ -363,3 +363,3 @@ /**
 }
-var K = Object.defineProperty, B = Object.getOwnPropertyDescriptor, l = (s, t, e, o) => {
+var K = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (s, t, e, o) => {
   for (var i = o > 1 ? void 0 : o ? B(t, e) : t, r = s.length - 1, n; r >= 0; r--)
@@ -373,3 +373,3 @@ (n = s[r]) && (i = (o ? n(t, e, i) : n(i)) || i);
       /* Your existing statuses */
-    ], this.projectId = 1, this.newTaskTitle = "", this.newTaskDescription = "", this.apiKey = "arwn30IP3lx3", this.selectedTab = "Active", this.showModal = !1, this.theme = "light", this.votes = {};
+    ], this.projectId = 1, this.newTaskTitle = "", this.newTaskDescription = "", this.apiKey = "arwn30IP3lx3", this.containerColor = "#ffffff", this.selectedTab = "Active", this.showModal = !1, this.theme = "light", this.votes = {};
   }
@@ -456,3 +456,6 @@ toggleTheme() {
     return y`
-            <div class="container">
+            <div>
+                
+            
+            <div style="background-color: ${this.containerColor}" class="container">
                 <div class="header">
@@ -493,3 +496,3 @@ <div class="tabs">
                                     <span class="task-status" style="background-color: ${e}; color: ${o};">
-                                        ${t} ${(r = s.status) == null ? void 0 : r.title}
+                                        <span class="task-emoji">${t}</span> ${(r = s.status) == null ? void 0 : r.title}
                                     </span>
@@ -520,2 +523,10 @@ </div>
             </div>
+                <a href="https://kanbancast.com" class="backlink">
+                    <span>
+                        Go to KanbanCast
+                        <span class="backlink-arrow">🏹</span>
+                    </span>
+                   
+                </a>
+            </div>
         `;
@@ -604,6 +615,9 @@ }
         .container {
-            background-color: #5a67d8;
+            background-color: var(--containerColor, #5a67d8);
             border-radius: 8px;
             padding: 16px;
-            margin-bottom: 16px;
+            margin-bottom: 4px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
         }
@@ -688,2 +702,6 @@ .header {
         }
+        .task-emoji {
+            margin-right:8px;
+            font-size:18px;
+        }
 
@@ -714,31 +732,55 @@ .suggest-feature-button {
         }
+
+        .backlink {
+            margin-top: 4px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 4px;
+            text-decoration: none;
+            color: black;
+            font-weight: bold; /* Add padding for better spacing */
+        }
+        
+        .backlink > span{
+            border: 1px solid #ccc;
+            border-radius: 16px;
+            padding:4px;
+        }
+
+        .backlink-arrow {
+            font-size: 1.2em;
+        }
     `;
-l([
-  d({ type: Array })
+c([
+  p({ type: Array })
 ], a.prototype, "statuses", 2);
-l([
-  d({ type: Number })
+c([
+  p({ type: Number })
 ], a.prototype, "projectId", 2);
-l([
-  d({ type: String })
+c([
+  p({ type: String })
 ], a.prototype, "newTaskTitle", 2);
-l([
-  d({ type: String })
+c([
+  p({ type: String })
 ], a.prototype, "newTaskDescription", 2);
-l([
-  d({ type: String })
+c([
+  p({ type: String })
 ], a.prototype, "apiKey", 2);
-l([
+c([
+  p({ type: String })
+], a.prototype, "containerColor", 2);
+c([
   b()
 ], a.prototype, "selectedTab", 2);
-l([
+c([
   b()
 ], a.prototype, "showModal", 2);
-l([
+c([
   b()
 ], a.prototype, "theme", 2);
-l([
+c([
   b()
 ], a.prototype, "votes", 2);
-a = l([
+a = c([
   T("board-view")
@@ -745,0 +787,0 @@ ], a);

package.json

 {
   "name": "kanbancast-components",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
@@ -6,0 +6,0 @@ "types": "dist/board-view.d.ts",

src/board-view.ts

@@ -30,2 +30,3 @@ import { LitElement, html, css } from 'lit';
     @property({ type: String }) apiKey: string = 'arwn30IP3lx3';
+    @property({ type: String }) containerColor: string = '#ffffff';
 
@@ -95,6 +96,9 @@ @state() selectedTab: string = 'Active';
         .container {
-            background-color: #5a67d8;
+            background-color: var(--containerColor, #5a67d8);
             border-radius: 8px;
             padding: 16px;
-            margin-bottom: 16px;
+            margin-bottom: 4px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
         }
@@ -179,2 +183,6 @@ .header {
         }
+        .task-emoji {
+            margin-right:8px;
+            font-size:18px;
+        }
 
@@ -205,2 +213,23 @@ .suggest-feature-button {
         }
+
+        .backlink {
+            margin-top: 4px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 4px;
+            text-decoration: none;
+            color: black;
+            font-weight: bold; /* Add padding for better spacing */
+        }
+        
+        .backlink > span{
+            border: 1px solid #ccc;
+            border-radius: 16px;
+            padding:4px;
+        }
+
+        .backlink-arrow {
+            font-size: 1.2em;
+        }
     `;
@@ -317,3 +346,6 @@
         return html`
-            <div class="container">
+            <div>
+                
+            
+            <div style="background-color: ${this.containerColor}" class="container">
                 <div class="header">
@@ -353,3 +385,3 @@ <div class="tabs">
                                     <span class="task-status" style="background-color: ${bgColor}; color: ${textColor};">
-                                        ${emoji} ${task.status?.title}
+                                        <span class="task-emoji">${emoji}</span> ${task.status?.title}
                                     </span>
@@ -380,2 +412,10 @@ </div>
             </div>
+                <a href="https://kanbancast.com" class="backlink">
+                    <span>
+                        Go to KanbanCast
+                        <span class="backlink-arrow">🏹</span>
+                    </span>
+                   
+                </a>
+            </div>
         `;
@@ -382,0 +422,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

45697

5.78%

Lines of code

1312

5.72%

No dependency changes