kempo 4.2.3 → 4.2.5

package/server/utils/templates/moveTemplate.js

@@ -0,0 +1,54 @@
+import { readFile, rename, mkdir, readdir, rmdir } from 'fs/promises';
+import { join, normalize, dirname, sep } from 'path';
+import { existsSync } from 'fs';
+import parseFrontmatter from '../fs/parseFrontmatter.js';
+
+const isTraversal = path => path.startsWith('..') || path.includes('..' + sep);
+
+export default async ({ rootDir, file, newFile }) => {
+  if(!rootDir) return [{ code: 400, msg: 'Root directory is required' }, null];
+  if(!file) return [{ code: 400, msg: 'File path is required' }, null];
+  if(!newFile) return [{ code: 400, msg: 'New file path is required' }, null];
+
+  const normalizedFile = normalize(file);
+  const normalizedNewFile = normalize(newFile);
+
+  if(isTraversal(normalizedFile) || isTraversal(normalizedNewFile)){
+    return [{ code: 400, msg: 'Invalid file path' }, null];
+  }
+
+  const fullPath = join(rootDir, normalizedFile);
+  const fullNewPath = join(rootDir, normalizedNewFile);
+
+  let content;
+  try {
+    content = await readFile(fullPath, 'utf-8');
+  } catch {
+    return [{ code: 404, msg: 'Template not found' }, null];
+  }
+
+  const meta = parseFrontmatter(content);
+  if(meta.locked === 'true'){
+    return [{ code: 403, msg: 'Cannot move a locked template' }, null];
+  }
+  if(meta.owner && meta.owner !== 'custom'){
+    return [{ code: 403, msg: 'Cannot move system templates' }, null];
+  }
+
+  if(existsSync(fullNewPath)){
+    return [{ code: 409, msg: 'A template already exists at the new location' }, null];
+  }
+
+  await mkdir(dirname(fullNewPath), { recursive: true });
+  await rename(fullPath, fullNewPath);
+
+  let dir = dirname(fullPath);
+  while(dir.startsWith(rootDir) && dir !== rootDir){
+    const entries = await readdir(dir);
+    if(entries.length > 0) break;
+    await rmdir(dir);
+    dir = dirname(dir);
+  }
+
+  return [null, { file: newFile }];
+};

package/server/utils/templates/updateTemplate.js

@@ -0,0 +1,46 @@
+import { readFile, writeFile } from 'fs/promises';
+import { join } from 'path';
+import { existsSync } from 'fs';
+
+export default async ({ rootDir, file, author, markup }) => {
+  if(!rootDir) return [{ code: 400, msg: 'Root directory is required' }, null];
+  if(!file) return [{ code: 400, msg: 'File path is required' }, null];
+
+  const safePath = file.replace(/\.\./g, '').replace(/^\//, '');
+  const fullPath = join(rootDir, safePath);
+
+  if(!existsSync(fullPath)) return [{ code: 404, msg: 'Template not found' }, null];
+
+  const raw = await readFile(fullPath, 'utf-8');
+
+  const lockedMatch = raw.match(/^<!--[\s\S]*?locked:\s*true[\s\S]*?-->/);
+  if(lockedMatch) return [{ code: 403, msg: 'This template is locked and cannot be edited' }, null];
+
+  const frontmatterMatch = raw.match(/^<!--\s*\n([\s\S]*?)\n\s*-->/);
+  const existingMeta = {};
+  if(frontmatterMatch){
+    for(const line of frontmatterMatch[1].split('\n')){
+      const idx = line.indexOf(':');
+      if(idx === -1) continue;
+      const key = line.slice(0, idx).trim();
+      const value = line.slice(idx + 1).trim();
+      if(key) existingMeta[key] = value;
+    }
+  }
+
+  const now = new Date().toISOString();
+  const newMeta = { ...existingMeta, updated: now };
+  delete newMeta.name;
+  if(author !== undefined) newMeta.author = author;
+
+  const frontmatter = '<!--\n' +
+    Object.entries(newMeta).map(([k, v]) => `  ${k}: ${v}`).join('\n') +
+    '\n-->';
+
+  const resolvedMarkup = markup !== undefined ? markup : (frontmatterMatch ? raw.slice(frontmatterMatch[0].length + 1) : raw);
+  const newContent = `${frontmatter}\n${resolvedMarkup}`;
+
+  await writeFile(fullPath, newContent, 'utf-8');
+
+  return [null, { file: safePath, updatedAt: now }];
+};

package/server/utils/users/createUser.js

@@ -0,0 +1,60 @@
+import crypto from 'crypto';
+import bcrypt from 'bcrypt';
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { eq } from 'drizzle-orm';
+
+const generateId = () => crypto.randomBytes(16).toString('hex');
+const generatePassword = () => {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%&*';
+  let password = '';
+  for(let i = 0; i < 16; i++){
+    password += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return password;
+};
+
+export default async ({ name, email, password, emailVerified = false }) => {
+  if(!email){
+    return [{ code: 400, msg: 'Email is required' }, null];
+  }
+
+  if(!name){
+    return [{ code: 400, msg: 'Name is required' }, null];
+  }
+
+  let generatedPassword = null;
+  if(!password){
+    generatedPassword = generatePassword();
+    password = generatedPassword;
+  }
+
+  const existingUser = await db.select().from(user).where(eq(user.email, email)).limit(1);
+  if(existingUser.length > 0){
+    return [{ code: 409, msg: 'User already exists with this email' }, null];
+  }
+
+  const userId = generateId();
+  const now = new Date();
+  
+  await db.insert(user).values({
+    id: userId,
+    email,
+    name,
+    passwordHash: await bcrypt.hash(password, 10),
+    emailVerified,
+    createdAt: now,
+    updatedAt: now,
+  });
+
+  const result = {
+    user: {
+      id: userId,
+      email,
+      name,
+      emailVerified,
+    },
+    generatedPassword
+  };
+  return [null, result];
+};

package/server/utils/users/deleteUser.js

@@ -0,0 +1,19 @@
+import db from '../../db/index.js';
+import { user, session, verificationToken, userGroup } from '../../db/schema.js';
+import { eq } from 'drizzle-orm';
+
+export default async (id) => {
+  if(!id){
+    return [{ code: 400, msg: 'User ID is required' }, null];
+  }
+  
+  try {
+    await db.delete(session).where(eq(session.userId, id));
+    await db.delete(verificationToken).where(eq(verificationToken.userId, id));
+    await db.delete(userGroup).where(eq(userGroup.userId, id));
+    await db.delete(user).where(eq(user.id, id));
+    return [null, { id }];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to delete user' }, null];
+  }
+};

package/server/utils/users/findUsersByEmail.js

@@ -0,0 +1,35 @@
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { ilike, sql } from 'drizzle-orm';
+
+export default async (searchTerm, { limit = 50, offset = 0 } = {}) => {
+  if(!searchTerm){
+    return [{ code: 400, msg: 'Search term is required' }, null];
+  }
+  
+  try {
+    const users = await db.select({
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      emailVerified: user.emailVerified,
+    }).from(user)
+      .where(ilike(user.email, `%${searchTerm}%`))
+      .limit(limit)
+      .offset(offset);
+    
+    const [{ count }] = await db.select({ count: sql`count(*)` })
+      .from(user)
+      .where(ilike(user.email, `%${searchTerm}%`));
+    
+    return [null, {
+      users,
+      total: Number(count),
+      limit,
+      offset,
+      searchTerm
+    }];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to search users' }, null];
+  }
+};

package/server/utils/users/findUsersByName.js

@@ -0,0 +1,35 @@
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { ilike, sql } from 'drizzle-orm';
+
+export default async (searchTerm, { limit = 50, offset = 0 } = {}) => {
+  if(!searchTerm){
+    return [{ code: 400, msg: 'Search term is required' }, null];
+  }
+  
+  try {
+    const users = await db.select({
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      emailVerified: user.emailVerified,
+    }).from(user)
+      .where(ilike(user.name, `%${searchTerm}%`))
+      .limit(limit)
+      .offset(offset);
+    
+    const [{ count }] = await db.select({ count: sql`count(*)` })
+      .from(user)
+      .where(ilike(user.name, `%${searchTerm}%`));
+    
+    return [null, {
+      users,
+      total: Number(count),
+      limit,
+      offset,
+      searchTerm
+    }];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to search users' }, null];
+  }
+};

package/server/utils/users/getUserByEmail.js

@@ -0,0 +1,26 @@
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { eq } from 'drizzle-orm';
+
+export default async (email) => {
+  if(!email){
+    return [{ code: 400, msg: 'Email is required' }, null];
+  }
+  
+  try {
+    const result = await db.select({
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      emailVerified: user.emailVerified,
+    }).from(user).where(eq(user.email, email)).limit(1);
+    
+    if(!result[0]){
+      return [{ code: 404, msg: 'User not found' }, null];
+    }
+    
+    return [null, result[0]];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to retrieve user' }, null];
+  }
+};

package/server/utils/users/getUserById.js

@@ -0,0 +1,27 @@
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { eq } from 'drizzle-orm';
+
+export default async (id) => {
+  if(!id){
+    return [{ code: 400, msg: 'User ID is required' }, null];
+  }
+  
+  try {
+    const result = await db.select({
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      emailVerified: user.emailVerified,
+      createdAt: user.createdAt,
+    }).from(user).where(eq(user.id, id)).limit(1);
+    
+    if(!result[0]){
+      return [{ code: 404, msg: 'User not found' }, null];
+    }
+    
+    return [null, result[0]];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to retrieve user' }, null];
+  }
+};

package/server/utils/users/getUsers.js

@@ -0,0 +1,26 @@
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { sql, asc } from 'drizzle-orm';
+
+export default async ({ limit = 50, offset = 0 } = {}) => {
+  try {
+    const users = await db.select({
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      emailVerified: user.emailVerified,
+      createdAt: user.createdAt,
+    }).from(user).orderBy(asc(user.createdAt)).limit(limit).offset(offset);
+    
+    const [{ count }] = await db.select({ count: sql`count(*)` }).from(user);
+    
+    return [null, {
+      users,
+      total: Number(count),
+      limit,
+      offset
+    }];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to retrieve users' }, null];
+  }
+};

package/server/utils/users/searchUsers.js

@@ -0,0 +1,53 @@
+import db from '../../db/index.js';
+import { user, userGroup } from '../../db/schema.js';
+import { ilike, or, eq, notInArray, inArray, and, sql } from 'drizzle-orm';
+
+export default async ({ q = '', limit = 20, offset = 0, inGroup, notInGroup } = {}) => {
+  try {
+    const conditions = [];
+
+    if(q){
+      conditions.push(or(ilike(user.name, `%${q}%`), ilike(user.email, `%${q}%`)));
+    }
+
+    if(notInGroup){
+      const members = await db
+        .select({ userId: userGroup.userId })
+        .from(userGroup)
+        .where(eq(userGroup.groupName, notInGroup));
+      const ids = members.map(m => m.userId);
+      if(ids.length) conditions.push(notInArray(user.id, ids));
+    }
+
+    if(inGroup){
+      const members = await db
+        .select({ userId: userGroup.userId })
+        .from(userGroup)
+        .where(eq(userGroup.groupName, inGroup));
+      const ids = members.map(m => m.userId);
+      conditions.push(ids.length ? inArray(user.id, ids) : sql`false`);
+    }
+
+    const where = conditions.length === 1
+      ? conditions[0]
+      : conditions.length > 1
+        ? and(...conditions)
+        : undefined;
+
+    const baseQuery = db.select({
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      emailVerified: user.emailVerified,
+    }).from(user);
+
+    const users = await (where ? baseQuery.where(where) : baseQuery).limit(limit).offset(offset);
+
+    const countQuery = db.select({ count: sql`count(*)` }).from(user);
+    const [{ count }] = await (where ? countQuery.where(where) : countQuery);
+
+    return [null, { users, total: Number(count), limit, offset }];
+  } catch(error){
+    return [{ code: 500, msg: 'Failed to search users' }, null];
+  }
+};

package/server/utils/users/updateUser.js

@@ -0,0 +1,38 @@
+import db from '../../db/index.js';
+import { user } from '../../db/schema.js';
+import { eq } from 'drizzle-orm';
+
+export default async (id, updates) => {
+  if(!id){
+    return [{ code: 400, msg: 'User ID is required' }, null];
+  }
+  
+  if(!updates || Object.keys(updates).length === 0){
+    return [{ code: 400, msg: 'Updates are required' }, null];
+  }
+  
+  try {
+    const updatedUser = await db
+      .update(user)
+      .set({ ...updates, updatedAt: new Date() })
+      .where(eq(user.id, id))
+      .returning();
+    
+    if(updatedUser.length === 0){
+      return [{ code: 404, msg: 'User not found' }, null];
+    }
+    
+    const result = {
+      id: updatedUser[0].id,
+      email: updatedUser[0].email,
+      name: updatedUser[0].name,
+      emailVerified: updatedUser[0].emailVerified,
+    };
+    return [null, result];
+  } catch(error){
+    if(error.code === '23505'){
+      return [{ code: 409, msg: 'Email already in use' }, null];
+    }
+    return [{ code: 500, msg: 'Failed to update user' }, null];
+  }
+};

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Dustin Poissant
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/components/Accordion.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Accordion extends Component{constructor(){super(),this.unrender=!0}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const n=this.getPanel(e);if(n){n.active=!0,n.transitioning=!0,setTimeout((()=>{n.transitioning=!1}),parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),dispatchEvent(this,"openpanel",{panelName:e})}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout((()=>{t.transitioning=!1}),parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const n=this.getHeader(e);n&&(n.active=!1),dispatchEvent(this,"closepanel",{panelName:e})}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),dispatchEvent(this,"togglepanel",{panelName:e}))}get shadowStyles(){return'\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      ::slotted(k-accordion-header){\n        border-top: 1px solid var(--c_border);\n      }\n      ::slotted(k-accordion-header[active="true"]) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      ::slotted(k-accordion-header:first-of-type) {\n        border-top: 0;\n      }\n      ::slotted(k-accordion-header:last-of-type:not([active="true"])) {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-accordion",Accordion);const clickHandler=Symbol();export class AccordionHeader extends Component{constructor(e="Show More",t=""){super(),this[clickHandler]=()=>{this.accordion.togglePanel(this.forPanel)},this.registerAttributes({forPanel:t,active:!1})}async render(e){return!!await super.render(e)&&(onEvent(this,"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler])}get accordion(){return this.closest("k-accordion")}get shadowStyles(){return"\n      :host {\n        display: block;\n        padding: 1rem;\n        cursor: pointer;\n      }\n    "}}window.customElements.define("k-accordion-header",AccordionHeader);export class AccordionPanel extends Component{constructor(e=""){super(),this.registerAttributes({name:e,active:!1,transitioning:!1})}get accordion(){return this.closest("k-accordion")}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        interpolate-size: allow-keywords;\n        height: 0;\n        overflow: hidden;\n        transition: height var(--animation_ms) ease-in-out;\n      }\n      :host([active="true"]) {\n        height: max-content;\n      }\n    `}}window.customElements.define("k-accordion-panel",AccordionPanel);

package/dist/components/Card.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import{setProp}from"../utils/element.js";export default class Card extends Component{constructor(e=""){super(),this.registerAttribute("label",e)}attributeChangedCallback(e,r,n){"label"===e&&setProp(this.shadowRoot.getElementById("label"),"innerHTML",n)}get shadowTemplate(){return`\n      <div id="card">\n        <div id="label">${this.label}</div>\n        ${super.shadowTemplate}\n      </div>\n    `}get shadowStyles(){return"\n      :host {\n        display: block;\n      }\n      #card {\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        margin-bottom: var(--spacer);\n        padding: var(--spacer);\n        position: relative;\n        background-color: var(--c_bg);\n      }\n      #label {\n        position: absolute;\n        top: -1.25em;\n        left: 1.25em;\n        background-color: var(--c_bg);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        padding: var(--spacer_h);\n      }\n      :host([label]) {\n        padding-top: calc(1.5 * var(--spacer));\n        margin-top: var(--spacer);\n      }\n      :host([label]) #card {\n        padding-top: calc(1.5 * var(--spacer));\n      }\n      :host(:not([label])) #label {\n        display: none;\n      }\n\n    "}static observedAttributes=[...super.observedAttributes,"label"]}window.customElements.define("k-card",Card);

package/dist/components/Collapsible.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol("clickHandler");export default class Collapsible extends Component{constructor(e=!1){super(),this[clickHandler]=()=>{this.toggle()},this.registerAttributes({opened:e})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&dispatchEvent(this,"openedchanged "+("true"===t?"open":"close"))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"openedtoggled")}get shadowTemplate(){return`\n      <div id="labelContainer">\n        <div id="label">\n          <slot name="label"></slot>\n        </div>\n        <div id="labelIcon">\n          <slot name="labelIcon">\n            <k-icon name="chevron-right"></k-icon>\n          </slot>\n        </div>\n      </div>\n      <div id="content">\n        ${super.shadowTemplate}\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #labelContainer {\n        display: flex;\n        cursor: pointer;\n      }\n      #label {\n        flex: 1 1 auto;\n      }\n      #labelIcon {\n        flex: 0 0 none;\n        opacity: 0.5;\n        transform: rotate(90deg);\n        transition: transform var(--animation_ms, 256ms);\n      }\n      #labelContainer:hover #labelIcon {\n        opacity: 1;\n      }\n      :host([opened="true"]) #labelIcon {\n        transform: rotate(-90deg);\n      }\n      :host(:not([opened="true"])) #content {\n        display: none;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-collapsible",Collapsible);

package/dist/components/Component.js

@@ -1 +0,0 @@
-import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render(!0)}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n      <slot></slot>\n    "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}window.customElements.define("k-component",Component);

package/dist/components/ContentSlider.js

@@ -1 +0,0 @@
-import LazyComponent from"./LazyComponent.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const content=Symbol(),prevClickHandler=Symbol(),nextClickHandler=Symbol(),keydownHandler=Symbol();export default class ContentSlider extends LazyComponent{constructor(n=[],{index:t=0,controls:e=!0,globalControls:o=!1,keyboardControls:s=!0,loop:i=!1}={}){super(),this[content]=[...n],this[prevClickHandler]=()=>this.previous(),this[nextClickHandler]=()=>this.next(),this[keydownHandler]=n=>{"ArrowLeft"===n.code?(n.preventDefault(),dispatchEvent(this,"keyleft"),this.previous()):"ArrowRight"===n.code&&(n.preventDefault(),dispatchEvent(this,"keyright"),this.next())},this.registerAttributes({index:t,controls:e,keyboardControls:s,globalControls:o,loop:i}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),this[content]=[...this.querySelectorAll(":scope > *")]}async render(n){return!!await super.render(n)&&(this.keyboardControls&&(this.globalControls?onEvent(window,"keydown",this[keydownHandler]):(onEvent(this,"keydown",this[keydownHandler]),onEvent(this.shadowRoot,"keydown",this[keydownHandler]))),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevClickHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextClickHandler]),this.renderContent(),!0)}attributeChangedCallback(n,t,e){if(super.attributeChangedCallback(n,t,e),"index"===n&&t!==e){const n=parseInt(e),t=Math.max(Math.min(this[content].length-1,n),0);n!==t?this.index=t:(dispatchEvent(this,"change",{index:t}),this.renderContent())}else"keyboard-controls"===n&&t!==e&&(this.keyboardControls?this.globalControls?onEvent(window,"keydown",this[keydownHandler]):(onEvent(this,"keydown",this[keydownHandler]),onEvent(this.shadowRoot,"keydown",this[keydownHandler])):offEvent(this.globalControls?window:this.shadowRoot,"keydown",this[keydownHandler]))}renderContent(){this.innerHTML="",this.appendChild(this[content][this.index])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevClickHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextClickHandler]),offEvent(window,"keydown",this[keydownHandler]),offEvent(this.shadowRoot,"keydown",this[keydownHandler]),offEvent(this,"keydown",this[keydownHandler])}previous(){let n=this.index-1;this.loop&&n<0&&(n=this[content].length-1),dispatchEvent(this,"previous",{index:n}),this.index=n}next(){let n=this.index+1;this.loop&&n>=this[content].length&&(n=0),dispatchEvent(this,"next",{index:n}),this.index=n}goto(n){dispatchEvent(this,"goto",{index:n}),this.index=n}get shadowTemplate(){return`\n      <div id="content">\n        ${super.shadowTemplate}\n      </div>\n      <div id="controls">\n        <button\n          id="prev"\n          class="no-btn"\n        >\n          <slot name="prev">\n            <k-icon name="chevron-left"></k-icon>\n          </slot>\n        </button>\n        <button\n          id="next"\n          class="no-btn"\n        >\n          <slot name="next">\n            <k-icon name="chevron-right"></k-icon>\n          </slot>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        position: relative;\n        outline: none;\n      }\n      #prev,\n      #next {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        font-size: 2rem;\n      }\n      #next {\n        right: 0;\n      }\n      :host(:not([controls="true"])) #controls {\n        display: none;\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"index","keyboard-controls","global-controls"]}window.customElements.define("k-content-slider",ContentSlider);

package/dist/components/Dialog.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:s="success ml",confirmAction:i=()=>{},cancelText:l="",cancelClasses:c="",cancelAction:a=()=>{},closeCallback:r=()=>{}}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:s,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:i,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100%;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 4rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 4rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const{removeOnClose:t=!0,closeCallback:o=()=>{}}=n,s=new Dialog({opened:!0,...n,closeCallback:(...e)=>{t&&s.remove(),o(...e)}});return onEvent(s,"close",s.remove),e instanceof HTMLElement||e instanceof DocumentFragment?s.appendChild(e):e instanceof NodeList?e.forEach((e=>s.appendChild(e))):s.innerHTML=e,n.width&&s.style.setProperty("--width",n.width),n.minWidth&&s.style.setProperty("--min_width",n.minWidth),n.maxWidth&&s.style.setProperty("--max_width",n.maxWidth),n.height&&s.style.setProperty("--height",n.height),n.minHeight&&s.style.setProperty("--min_height",n.minHeight),n.maxHeight&&s.style.setProperty("--max_height",n.maxHeight),document.body.prepend(s),s.open(),s}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static alert(e,n,t={title:"Alert"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{closeCallback:n,cancelText:"Ok",...t})}static error(e,n,t={title:"Error"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{closeCallback:n,cancelText:"Ok",...t})}static success(e,n,t={title:"Success"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-success">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{closeCallback:n,cancelText:"Ok",...t})}}window.customElements.define("k-dialog",Dialog);

package/dist/components/DirectoryViewer.js

@@ -1 +0,0 @@
-import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/dist/components/FocusCapture.js

@@ -1 +0,0 @@
-import LazyComponent from"./LazyComponent.js";import{onEvent}from"../utils/element.js";export default class FocusCapture extends LazyComponent{constructor(){super({delegatesFocus:!0})}render(){super.render(),onEvent(this.shadowRoot.getElementById("after"),"focus",(()=>{this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus()}))}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div id="after" tabindex="0"></div>\n    `}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n      }\n    "}}window.customElements.define("k-focus-capture",FocusCapture);

package/dist/components/Icon.js

@@ -1 +0,0 @@
-import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{const s=(new AbortController).signal;try{const n=await fetch(t,{signal:s});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}})).catch((()=>null))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)try{s=await e(Icon.pathToIcons[t])}catch(t){}t(s||null)}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/dist/components/Import.js

@@ -1 +0,0 @@
-import Component from"./Component.js";export default class Import extends Component{constructor(e=""){super(),this.registerAttribute("src",e)}attributeChangedCallback(e,t,r){"src"===e&&t!==r&&this.render(!0)}async render(e){const t=this.src;if(t&&await super.render(e)){let e=await(await fetch(t)).text();for(const[t,r]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),r);const r=document.createElement("template");r.innerHTML=e;const s=Array.from(r.content.querySelectorAll("script[src]"));s.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of s){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return":host{display:contents;}"}static replacements={root:"./"};static addReplacement(e,t){this.replacements={...this.replacements,[e]:t}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);

package/dist/components/LazyComponent.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import{isInView}from"../utils/element.js";import raf from"../utils/raf.js";const inViewIntervalId=Symbol();export default class LazyComponent extends Component{constructor(e){super(e),this[inViewIntervalId]=null,new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttributes({unrender:!1,inViewInterval:0})}connectedCallback(){this.renderSkelton(),raf((()=>{isInView(this)?this.inViewCallback():this.outOfViewCallback()}),2)}async inViewCallback(){return clearInterval(this[inViewIntervalId]),await this.render()}async outOfViewCallback(){return clearInterval(this[inViewIntervalId]),this[inViewIntervalId]=setInterval((async()=>{await isInView(this)&&this.inViewCallback()}),this.inViewInterval||LazyComponent.inViewIntervalTimeout),!!this.unrender&&(await this.renderSkelton(),!0)}async renderSkelton(){return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1,!0}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}static inViewIntervalTimeout=1e3}

package/dist/components/PersistantCollapsible.js

@@ -1 +0,0 @@
-import Collapsible from"./Collapsible.js";import{onEvent,offEvent}from"../utils/element.js";const updateFromStorage=Symbol("updateFromStorage"),storageChangeHandler=Symbol("storageChangeHandler"),changeHandler=Symbol("changeHandler");export default class PersistantCollapsible extends Collapsible{constructor(){super(),this[updateFromStorage]=()=>{this.opened="true"===localStorage.getItem(`PersistantCollapsible-${this.id}`)},this[storageChangeHandler]=e=>{e.key===`PersistantCollapsible-${this.id}`&&this[updateFromStorage]()},this[changeHandler]=()=>{this.id&&localStorage.setItem(`PersistantCollapsible-${this.id}`,this.opened)}}async render(e){return!!await super.render(e)&&(this[updateFromStorage](),onEvent(window,"storage",this[storageChangeHandler]),onEvent(this,"openedchanged",this[changeHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(window,"storage",this[storageChangeHandler]),offEvent(this,"openedchanged",this[changeHandler]),window.removeEventListener("storage",this[storageChangeHandler])}}window.customElements.define("k-p-collapsible",PersistantCollapsible);

package/dist/components/PhotoViewer.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const openHandler=Symbol(),closeHandler=Symbol(),overlayHandler=Symbol(),prevHandler=Symbol(),nextHandler=Symbol(),keyboardHandler=Symbol(),imgKeyboardHandler=Symbol();export default class PhotoViewer extends Component{constructor(e="",n="",t={}){super();const{keyboardControls:o=!0,global:s=!1}=t;this.registerAttributes({src:e,alt:n,fullscreen:!1,keyboardControls:o,global:s})}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),this.rendered&&"src"===e&&n!==t?(this.shadowRoot.getElementById("img").src=t,this.shadowRoot.getElementById("fullscreen-img").src=t):this.rendered&&"alt"===e&&n!==t?(this.shadowRoot.getElementById("img").alt=t,this.shadowRoot.getElementById("fullscreen-img").alt=t):this.rendered&&"fullscreen"===e&&n!==t&&(dispatchEvent(this,"fullscreenchange "+(t?" fullscreen":" fullscreenclose")),this.updateNavigationState(),this.keyboardControls&&(t?document.addEventListener("keydown",this[keyboardHandler]):document.removeEventListener("keydown",this[keyboardHandler])))}async render(e){if(await super.render(e)){const e=this.shadowRoot.getElementById("img");e.src=this.src,e.alt=this.alt;const n=this.shadowRoot.getElementById("fullscreen-img");n.src=this.src,n.alt=this.alt;const t=this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');if(t&&!t.assignedNodes().length){this.shadowRoot.querySelector("slot:not([name])").assignedNodes().forEach((e=>{const n=e.cloneNode(!0);this.appendChild(n).slot="fullscreen-caption"}))}return onEvent(e,"click",this[openHandler]),onEvent(e,"keydown",this[imgKeyboardHandler]),onEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),onEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),onEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),onEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.updateNavigationState(),!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("img"),"click",this[openHandler]),offEvent(this.shadowRoot.getElementById("img"),"keydown",this[imgKeyboardHandler]),offEvent(this.shadowRoot.getElementById("close"),"click",this[closeHandler]),offEvent(this.shadowRoot.getElementById("fullscreen-overlay"),"click",this[overlayHandler]),offEvent(this.shadowRoot.getElementById("prev"),"click",this[prevHandler]),offEvent(this.shadowRoot.getElementById("next"),"click",this[nextHandler]),this.keyboardControls&&document.removeEventListener("keydown",this[keyboardHandler])}[imgKeyboardHandler]=e=>{"Enter"!==e.key||this.fullscreen||this.open()};[openHandler]=()=>{this.open()};[closeHandler]=()=>{this.close()};[overlayHandler]=e=>{e.target===e.currentTarget&&this.close()};[prevHandler]=e=>{e.stopPropagation();const n=this.getPrevSibling();n&&(this.close(),n.open())};[nextHandler]=e=>{e.stopPropagation();const n=this.getNextSibling();n&&(this.close(),n.open())};[keyboardHandler]=e=>{if("Escape"===e.key)this.close();else if("ArrowLeft"===e.key){const e=this.getPrevSibling();e&&(this.close(),e.open())}else if("ArrowRight"===e.key){const e=this.getNextSibling();e&&(this.close(),e.open())}};getPrevSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[0===n?e.length-1:n-1]}{let e=this.previousElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.lastElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.previousElementSibling;return e}}getNextSibling(){if(this.global){const e=Array.from(document.getElementsByTagName("k-photo-viewer")),n=e.indexOf(this);return-1===n?null:e[n===e.length-1?0:n+1]}{let e=this.nextElementSibling;for(;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;if(!e&&this.hasPhotoSiblings())for(e=this.parentElement.firstElementChild;e&&"K-PHOTO-VIEWER"!==e.tagName;)e=e.nextElementSibling;return e}}hasPhotoSiblings(){return this.global?document.getElementsByTagName("k-photo-viewer").length>1:Array.from(this.parentElement.children).filter((e=>e!==this&&"K-PHOTO-VIEWER"===e.tagName)).length>0}updateNavigationState(){const e=this.fullscreen&&this.hasPhotoSiblings();this.shadowRoot.querySelectorAll(".nav-btn").forEach((n=>n.classList.toggle("d-n",!e)))}open(){this.fullscreen=!0}close(){this.fullscreen=!1}toggle(){this.fullscreen=!this.fullscreen}get shadowTemplate(){return'\n      <div id="wrapper">\n        <img id="img" tabindex="0" />\n        <div class="caption">\n          <slot></slot>\n        </div>\n        <div id="fullscreen-overlay">\n          <button id="close" class="no-btn">\n            <slot name="close">\n              <k-icon name="close"></k-icon>\n            </slot>\n          </button>\n          <button id="prev" class="nav-btn no-btn">\n            <slot name="prev">\n              <k-icon name="chevron-left"></k-icon>\n            </slot>\n          </button>\n          <button id="next" class="nav-btn no-btn">\n            <slot name="next">\n              <k-icon name="chevron-right"></k-icon>\n            </slot>\n          </button>\n          <div class="content">\n            <img id="fullscreen-img" />\n            <div class="caption">\n              <slot name="fullscreen-caption"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n      }\n      #wrapper {\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      #img {\n        max-width: 100%;\n        height: auto;\n        cursor: pointer;\n        outline: none;\n        border-radius: var(--img_radius, 0);\n      }\n      #img:focus {\n        box-shadow: var(--focus_shadow);\n      }\n      #fullscreen-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 9999;\n        background: rgba(0,0,0,0.9);\n        padding: 2rem;\n        display: none;\n      }\n      :host([fullscreen]) #fullscreen-overlay {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .content {\n        position: relative;\n        max-width: 100%;\n        max-height: 90vh;\n      }\n      #fullscreen-img {\n        max-height: 75vh;\n        max-width: 100%;\n        object-fit: contain;\n        cursor: default;\n      }\n      #close {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n      }\n      .nav-btn {\n        position: fixed;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 1;\n        background: none;\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 1rem;\n        opacity: 0.7;\n        font-size: 3rem;\n        -webkit-text-stroke: 1px black;\n        text-stroke: 1px black;\n        text-shadow: 0 0 3px rgba(0,0,0,0.8);\n      }\n      .nav-btn::slotted(*),\n      .nav-btn k-icon {\n        filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));\n      }\n      .nav-btn:hover {\n        opacity: 1;\n      }\n      #prev {\n        left: 1rem;\n      }\n      #next {\n        right: 1rem;\n      }\n      .caption {\n        text-align: center;\n        max-width: 600px;\n        width: fit-content;\n        margin: 1rem auto 0;\n      }\n      #fullscreen-overlay .caption {\n        color: white;\n      }\n      :host([fullscreen]) .caption {\n        color: white;\n      }\n    `}static observedAttributes=[...super.observedAttributes,"src","alt","fullscreen","keyboard-controls","global"]}window.customElements.define("k-photo-viewer",PhotoViewer);

package/dist/components/ReactiveComponent.js

@@ -1 +0,0 @@
-import Component from"./Component.js";export default class ReactiveComponent extends Component{attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),this.constructor.renderOnChange.includes(e)&&this.render(!0)}static renderOnChange=[]}

package/dist/components/ReactiveLazyComponent.js

@@ -1 +0,0 @@
-import LazyComponent from"./LazyComponent.js";export default class ReactiveComponent extends LazyComponent{attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),this.constructor.renderOnChange.includes(e)&&this.render(!0)}static renderOnChange=[]}

package/dist/components/Resize.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import drag from"../utils/drag.js";const startSize=Symbol("startSize"),dragStartHandler=Symbol("dragStartHandler"),dragEndHandler=Symbol("dragEndHandler"),dragSideHandler=Symbol("dragSideHandler"),dragBottomHandler=Symbol("dragBottomHandler"),dragCornerHandler=Symbol("dragCornerHandler"),cleanupFuncs=Symbol("cleanupFuncs");export default class Resize extends Component{constructor(){super(),this[startSize]={width:0,height:0},this[dragStartHandler]=({element:n})=>{const{width:e,height:t}=this.getBoundingClientRect();this[startSize].width=e,this[startSize].height=t,this.resizing=n.id},this[dragEndHandler]=()=>{this.resizing=""},this[dragSideHandler]=({x:n})=>{this.style.width=this[startSize].width+n+"px"},this[dragBottomHandler]=({y:n})=>{this.style.height=this[startSize].height+n+"px"},this[dragCornerHandler]=({x:n,y:e})=>{this.style.width=this[startSize].width+n+"px",this.style.height=this[startSize].height+e+"px"},this[cleanupFuncs]=[],this.registerAttribute("resizing","")}async render(n){return!!await super.render(n)&&(this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("side"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragSideHandler],preventScroll:!0})),this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("bottom"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragBottomHandler],preventScroll:!0})),this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("corner"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragCornerHandler],preventScroll:!0})),!0)}disconnectedCallback(){super.disconnectedCallback(),this[cleanupFuncs].forEach((n=>n()))}get shadowTemplate(){return`\n      <div id="main">\n        ${super.shadowTemplate}\n      </div>\n      <div id="side" class="handle">\n        <svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" /></svg>\n      </div>\n      <div id="bottom" class="handle">\n        <svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" /></svg>\n      </div>\n      <div id="corner" class="handle">\n        <svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" /></svg>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --handle_size: 1rem;\n\n        display: grid;\n        grid-template-columns: 1fr var(--handle_size);\n        grid-template-rows: 1fr var(--handle_size);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        min-width: 10rem;\n        max-width: 100%;\n        min-height: 10rem;\n        max-height: 100%;\n      }\n      :host([dimention="height"]){\n        grid-template-columns: 1fr;\n      }\n      :host([dimention="width"]){\n        grid-template-rows: 1fr;\n      }\n      #main {\n        grid-row: 1;\n        grid-column: 1;\n        overflow: auto;\n      }\n      #side {\n        grid-row: 1;\n        grid-column: 2;\n        cursor: ew-resize;\n      }\n      #bottom {\n        grid-row: 2;\n        grid-column: 1;\n        text-align: center;\n        cursor: ns-resize;\n      }\n      #corner {\n        grid-row: 2;\n        grid-column: 2;\n        overflow: hidden;\n        cursor: nwse-resize;\n      }\n      .handle {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .handle svg {\n        transform: scale(0.5);\n      }\n      #bottom svg {\n        height: var(--handle_size);\n      }\n      #side svg {\n        width: var(--handle_size);\n      }\n      #corner svg {\n        width: var(--handle_size);\n        height: var(--handle_size);\n      }\n      :host(:not([resizing=""])) #main {\n        pointer-events: none;\n      }\n      :host([resizing="side"]) #side,\n      :host([resizing="corner"]) #side,\n      :host([resizing="corner"]) #corner,\n      :host([resizing="corner"]) #bottom,\n      :host([resizing="bottom"]) #bottom {\n        background-color: var(--c_highlight);\n      }\n      :host([dimention="height"]) #side,\n      :host([dimention="height"]) #corner,\n      :host([dimention="width"]) #bottom,\n      :host([dimention="width"]) #corner {\n        display: none;\n      }\n    `}}window.customElements.define("k-resize",Resize);

package/dist/components/Search.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{static searchDataUrl="/search.json";constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch(Search.searchDataUrl)).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n        color: var(--tc_primary);\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);

package/dist/components/ShowMore.js

@@ -1 +0,0 @@
-import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const toggleClickHandler=Symbol();export default class ShowMore extends LazyComponent{constructor(){super(),this[toggleClickHandler]=()=>this.toggle(),this.registerAttribute("opened",!1)}async render(e){await super.render(e),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&(this.opened?dispatchEvent(this,"change opened"):dispatchEvent(this,"change closed"))}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened=!this.opened}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="content">\n          ${super.shadowTemplate}\n        </div>\n        <button\n          id="toggle"\n          class="no-btn"\n        >\n          <span id="more">\n            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n          </span>\n          <span id="less">\n            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n          </span>\n        </button>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        --closed_height: 7rem;\n        \n        display: block;\n      }\n      :host(:not([opened])) #content{\n        height: var(--closed_height);\n        overflow-y: hidden;\n      }\n      :host(:not([opened])) #content {\n        margin-bottom: calc(var(--closed_height) * -0.9);\n      }\n      :host(:not([opened]))  #toggle {\n        padding-top: calc(var(--closed_height) - 2rem);\n        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n      }\n      #toggle {\n        width: 100%;\n        padding: var(--spacer_h);\n        text-align: center;\n        background: var(--c_bg);\n      }\n      :host([opened]) #more,\n      :host(:not([opened])) #less {\n        display: none;\n      }\n    `}}window.customElements.define("k-show-more",ShowMore);