@lazhus/kg-ui 0.2.2

package/dist/components/kg-colorpicker.js

@@ -0,0 +1,240 @@
+import { LitElement as t, css as o, html as i } from "lit";
+import "lit/directives/class-map.js";
+class r extends t {
+  static properties = {
+    value: { type: String, reflect: !0 },
+    label: { type: String },
+    open: { type: Boolean },
+    disabled: { type: Boolean }
+  };
+  static styles = o`
+    :host {
+      display: inline-block;
+      font-family: inherit;
+    }
+
+    .kg-color-container {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .label-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--kg-text);
+      opacity: 0.8;
+      margin-left: 2px;
+    }
+
+    .picker-trigger {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 0 10px;
+      height: var(--kg-form-height);
+      background: var(--kg-surface);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-md);
+      cursor: pointer;
+      transition: all 0.2s;
+      box-sizing: border-box;
+    }
+
+    .picker-trigger:hover {
+      border-color: var(--kg-primary);
+    }
+
+    .color-swatch {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      border: 1px solid rgba(0,0,0,0.1);
+      flex-shrink: 0;
+    }
+
+    .color-value {
+      font-size: 0.9rem;
+      font-family: monospace;
+      color: var(--kg-text);
+      flex: 1;
+    }
+
+    .picker-popup {
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      z-index: 1000;
+      background: var(--kg-bg);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-lg);
+      box-shadow: var(--kg-shadow-lg);
+      padding: 16px;
+      display: none;
+      width: 230px;
+      box-sizing: border-box;
+    }
+
+    .picker-popup.open {
+      display: block;
+      animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .swatch-grid {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    .preset-swatch {
+      width: 100%;
+      aspect-ratio: 1;
+      border-radius: 6px;
+      cursor: pointer;
+      border: 1px solid rgba(0,0,0,0.1);
+      transition: all 0.2s;
+      box-sizing: border-box;
+    }
+
+    .preset-swatch:hover {
+      transform: scale(1.15);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      z-index: 2;
+    }
+
+    .custom-input-container {
+      border-top: 1px solid var(--kg-border);
+      padding-top: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .color-input-wrapper {
+        display: flex;
+        align-items: center;
+        background: var(--kg-surface);
+        border: 1px solid var(--kg-border);
+        border-radius: 8px;
+        padding: 4px;
+        height: var(--kg-form-height);
+        overflow: hidden;
+    }
+
+    input[type="color"] {
+        flex: 1;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: pointer;
+        min-width: 40px;
+    }
+
+    .color-hex-label {
+        font-family: monospace;
+        font-size: 0.85rem;
+        padding: 0 10px;
+        color: var(--kg-text-muted);
+        border-left: 1px solid var(--kg-border);
+    }
+
+    .disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `;
+  constructor() {
+    super(), this.value = "#1367FF", this.open = !1, this.disabled = !1, this._presets = [
+      "#1367FF",
+      "#FF0000",
+      "#00FF00",
+      "#FFA500",
+      "#800080",
+      "#000000",
+      "#FFFFFF",
+      "#808080",
+      "#FFC0CB",
+      "#00FFFF",
+      "#FFFF00",
+      "#A52A2A",
+      "#3498db",
+      "#2ecc71",
+      "#e74c3c",
+      "#f1c40f",
+      "#9b59b6",
+      "#34495e"
+    ], this._handleOutsideClick = this._handleOutsideClick.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  _handleOutsideClick(e) {
+    this.open && !e.composedPath().includes(this) && (this.open = !1);
+  }
+  _togglePopup(e) {
+    e && e.stopPropagation(), this.open = !this.open;
+  }
+  _selectColor(e) {
+    this.value = e, this._dispatchChange();
+  }
+  _handleInput(e) {
+    this.value = e.target.value, this._dispatchChange();
+  }
+  _dispatchChange() {
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return i`
+      <div class="kg-color-container ${this.disabled ? "disabled" : ""}" style="position: relative;">
+        ${this.label ? i`<span class="label-text">${this.label}</span>` : ""}
+        
+        <div class="picker-trigger" @click="${this._togglePopup}">
+          <div class="color-swatch" style="background-color: ${this.value}"></div>
+          <span class="color-value">${this.value}</span>
+        </div>
+
+        <div class="picker-popup ${this.open ? "open" : ""}" @click="${(e) => e.stopPropagation()}">
+          <div class="swatch-grid">
+            ${this._presets.map((e) => i`
+              <div 
+                class="preset-swatch" 
+                style="background-color: ${e}" 
+                @click="${() => this._selectColor(e)}"
+              ></div>
+            `)}
+          </div>
+          
+          <div class="custom-input-container">
+            <span style="font-size: 0.75rem; color: var(--kg-text-muted); font-weight: 600;">Özel Renk Seç</span>
+            <div class="color-input-wrapper">
+                <input 
+                    type="color" 
+                    .value="${this.value}" 
+                    @input="${this._handleInput}"
+                />
+                <span class="color-hex-label">${this.value.toUpperCase()}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-colorpicker", r);
+export {
+  r as kgcolorpicker
+};

package/dist/components/kg-column.js

@@ -0,0 +1,48 @@
+import { LitElement as s, css as e, html as l } from "lit";
+class i extends s {
+  static properties = {
+    sm: { type: Number },
+    // mobile
+    md: { type: Number },
+    // tablet
+    lg: { type: Number },
+    // desktop (replaces width)
+    floated: { type: String },
+    color: { type: String }
+  };
+  static styles = e`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      min-height: 1px;
+      padding: var(--kg-space-md);
+      flex: 0 0 auto;
+      width: var(--kg-col-lg, 100%);
+    }
+
+    :host([floated="right"]) { margin-left: auto; }
+    :host([floated="left"]) { margin-right: auto; }
+
+    @media (max-width: 768px) {
+      :host {
+        width: var(--kg-col-sm, 100%);
+      }
+    }
+
+    @media (min-width: 769px) and (max-width: 1024px) {
+      :host {
+        width: var(--kg-col-md, var(--kg-col-lg, 100%));
+      }
+    }
+  `;
+  willUpdate(t) {
+    t.has("sm") && this.style.setProperty("--kg-col-sm", `${this.sm / 12 * 100}%`), t.has("md") && this.style.setProperty("--kg-col-md", `${this.md / 12 * 100}%`), t.has("lg") && this.style.setProperty("--kg-col-lg", `${this.lg / 12 * 100}%`);
+  }
+  render() {
+    return l`<slot></slot>`;
+  }
+}
+customElements.define("kg-column", i);
+export {
+  i as kgcolumn
+};