@logosphere-ui/core 0.0.0-alpha.7 → 0.0.0-alpha.9

package/dist/formfield-BOgRugzm.js

@@ -0,0 +1,118 @@
+import { unsafeCSS as u, css as p, LitElement as h, html as n } from "lit";
+import { property as s, state as c, customElement as m } from "lit/decorators.js";
+const _ = ":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);margin-bottom:var(--spacing-2)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:flex-start;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--focused{border-color:var(--color-primary);background-color:var(--color-body-bg)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.formfield__container--disabled{background-color:var(--color-tertiary-bg);opacity:.4;cursor:not-allowed}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent}.formfield__input-area{flex:1;min-width:0}.formfield__suffix{display:flex;align-items:center;flex-shrink:0;margin-left:var(--spacing-2)}.formfield__suffix:empty{display:none}.formfield__helper{font-size:var(--font-size-sm);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:var(--font-size-sm);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-size:14px;line-height:1.5}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (e, o, l, a) => {
+  for (var i = a > 1 ? void 0 : a ? b(o, l) : o, d = e.length - 1, f; d >= 0; d--)
+    (f = e[d]) && (i = (a ? f(o, l, i) : f(i)) || i);
+  return a && i && v(o, l, i), i;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.label = "", this.helper = "", this.error = "", this.placeholder = "", this.size = "default", this.variant = "default", this.required = !1, this.disabled = !1, this.readonly = !1, this._focused = !1, this._hovered = !1, this.handleSlotFocus = (e) => {
+      const o = e.target;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(o.tagName) && (this._focused = !0, this.dispatchEvent(new CustomEvent("field-focus", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: e }
+      })));
+    }, this.handleSlotBlur = (e) => {
+      const o = e.target;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(o.tagName) && (this._focused = !1, this.dispatchEvent(new CustomEvent("field-blur", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: e }
+      })));
+    }, this.handleMouseEnter = () => {
+      this._hovered = !0;
+    }, this.handleMouseLeave = () => {
+      this._hovered = !1;
+    }, this.handleContainerClick = (e) => {
+      const o = e.target;
+      if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(o.tagName)) return;
+      this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).find((i) => ["INPUT", "TEXTAREA", "SELECT"].includes(i.tagName))?.focus();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focus", this.handleSlotFocus, !0), this.addEventListener("blur", this.handleSlotBlur, !0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", this.handleSlotFocus, !0), this.removeEventListener("blur", this.handleSlotBlur, !0);
+  }
+  render() {
+    const e = !!this.error, o = !e && !!this.helper, l = [
+      "formfield__container",
+      e ? "formfield__container--error" : "",
+      this._focused ? "formfield__container--focused" : "",
+      this._hovered ? "formfield__container--hovered" : "",
+      this.disabled ? "formfield__container--disabled" : "",
+      this.variant === "subtle" ? "formfield__container--subtle" : ""
+    ].filter(Boolean).join(" ");
+    return n`
+      <div class="formfield">
+        ${this.label ? n`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required ? n`<span class="formfield__required">*</span>` : ""}
+          </label>
+        ` : ""}
+
+        <div
+          class="${l}"
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @click=${this.handleContainerClick}
+        >
+          <div class="formfield__input-area">
+            <slot></slot>
+          </div>
+          <div class="formfield__suffix">
+            <slot name="suffix"></slot>
+          </div>
+        </div>
+
+        ${o ? n`<div class="formfield__helper">${this.helper}</div>` : ""}
+        ${e ? n`<div class="formfield__error">${this.error}</div>` : ""}
+      </div>
+    `;
+  }
+};
+r.styles = [p`${u(_)}`];
+t([
+  s({ type: String })
+], r.prototype, "label", 2);
+t([
+  s({ type: String })
+], r.prototype, "helper", 2);
+t([
+  s({ type: String })
+], r.prototype, "error", 2);
+t([
+  s({ type: String })
+], r.prototype, "placeholder", 2);
+t([
+  s({ type: String })
+], r.prototype, "size", 2);
+t([
+  s({ type: String })
+], r.prototype, "variant", 2);
+t([
+  s({ type: Boolean })
+], r.prototype, "required", 2);
+t([
+  s({ type: Boolean })
+], r.prototype, "disabled", 2);
+t([
+  s({ type: Boolean })
+], r.prototype, "readonly", 2);
+t([
+  c()
+], r.prototype, "_focused", 2);
+t([
+  c()
+], r.prototype, "_hovered", 2);
+r = t([
+  m("logosphere-formfield")
+], r);
+export {
+  r as F
+};

package/dist/formfield-D_7NFFoe.cjs

@@ -0,0 +1,27 @@
+"use strict";const l=require("lit"),r=require("lit/decorators.js"),c=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);margin-bottom:var(--spacing-2)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:flex-start;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--focused{border-color:var(--color-primary);background-color:var(--color-body-bg)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.formfield__container--disabled{background-color:var(--color-tertiary-bg);opacity:.4;cursor:not-allowed}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent}.formfield__input-area{flex:1;min-width:0}.formfield__suffix{display:flex;align-items:center;flex-shrink:0;margin-left:var(--spacing-2)}.formfield__suffix:empty{display:none}.formfield__helper{font-size:var(--font-size-sm);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:var(--font-size-sm);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-size:14px;line-height:1.5}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var f=Object.defineProperty,p=Object.getOwnPropertyDescriptor,o=(n,e,t,s)=>{for(var i=s>1?void 0:s?p(e,t):e,a=n.length-1,d;a>=0;a--)(d=n[a])&&(i=(s?d(e,t,i):d(i))||i);return s&&i&&f(e,t,i),i};exports.FormField=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.required=!1,this.disabled=!1,this.readonly=!1,this._focused=!1,this._hovered=!1,this.handleSlotFocus=e=>{const t=e.target;["INPUT","TEXTAREA","SELECT"].includes(t.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const t=e.target;["INPUT","TEXTAREA","SELECT"].includes(t.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const t=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(t.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(a=>["INPUT","TEXTAREA","SELECT"].includes(a.tagName))?.focus()}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,t=!e&&!!this.helper,s=["formfield__container",e?"formfield__container--error":"",this._focused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":""].filter(Boolean).join(" ");return l.html`
+      <div class="formfield">
+        ${this.label?l.html`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required?l.html`<span class="formfield__required">*</span>`:""}
+          </label>
+        `:""}
+
+        <div
+          class="${s}"
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @click=${this.handleContainerClick}
+        >
+          <div class="formfield__input-area">
+            <slot></slot>
+          </div>
+          <div class="formfield__suffix">
+            <slot name="suffix"></slot>
+          </div>
+        </div>
+
+        ${t?l.html`<div class="formfield__helper">${this.helper}</div>`:""}
+        ${e?l.html`<div class="formfield__error">${this.error}</div>`:""}
+      </div>
+    `}};exports.FormField.styles=[l.css`${l.unsafeCSS(c)}`];o([r.property({type:String})],exports.FormField.prototype,"label",2);o([r.property({type:String})],exports.FormField.prototype,"helper",2);o([r.property({type:String})],exports.FormField.prototype,"error",2);o([r.property({type:String})],exports.FormField.prototype,"placeholder",2);o([r.property({type:String})],exports.FormField.prototype,"size",2);o([r.property({type:String})],exports.FormField.prototype,"variant",2);o([r.property({type:Boolean})],exports.FormField.prototype,"required",2);o([r.property({type:Boolean})],exports.FormField.prototype,"disabled",2);o([r.property({type:Boolean})],exports.FormField.prototype,"readonly",2);o([r.state()],exports.FormField.prototype,"_focused",2);o([r.state()],exports.FormField.prototype,"_hovered",2);exports.FormField=o([r.customElement("logosphere-formfield")],exports.FormField);

package/dist/formfield.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./formfield-D_7NFFoe.cjs");Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>e.FormField});

package/dist/formfield.js

@@ -0,0 +1,4 @@
+import { F } from "./formfield-BOgRugzm.js";
+export {
+  F as FormField
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./button-CDRccsk9.cjs"),r=require("./badge-DVvdodRb.cjs"),t=require("./checkbox-CdDTRdKV.cjs"),o=require("./formfield-D_7NFFoe.cjs"),n=require("./switch-Rnnn10bn.cjs"),u=require("./breadcrumb-Cop-B1J7.cjs"),b=require("./card-KiNHfEi2.cjs"),a=require("./input-CoY1ZcPF.cjs"),c=require("./popover-C2p5Pmts.cjs"),i=require("./text-area-eT-oCnqZ.cjs"),d=require("./chatbot-P32-Xv7e.cjs"),p=require("./combobox-CeK7yW2F.cjs"),g=require("./datepicker-BQOVo1Pr.cjs"),s=require("./download-manager-BSIMTGaK.cjs"),l=require("./modal-DQ8VFL-P.cjs"),m=require("./tab-DcjAlXzU.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>e.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>r.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>t.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>o.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>n.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>u.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>b.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>a.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>c.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>i.TextArea});Object.defineProperty(exports,"LedsUiChatbot",{enumerable:!0,get:()=>d.LedsUiChatbot});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>p.Combobox});Object.defineProperty(exports,"LedsDatePicker",{enumerable:!0,get:()=>g.LedsDatePicker});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>s.DownloadManager});Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>l.Modal});Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>m.LogosphereTab});