@logosphere-ui/core 0.0.0-alpha.12 → 0.0.0-alpha.14

package/dist/formfield-BOgRugzm.js

@@ -1,118 +0,0 @@
-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

@@ -1,27 +0,0 @@
-"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/input-CoY1ZcPF.cjs

@@ -1,46 +0,0 @@
-"use strict";const o=require("lit"),t=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./formfield-D_7NFFoe.cjs");require("./ui-icon-CVEyvL5D.cjs");const u=".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";var y=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(s,e,i,n)=>{for(var p=n>1?void 0:n?d(e,i):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(p=(n?a(e,i,p):a(p))||p);return n&&p&&y(e,i,p),p};exports.LogosphereInput=class extends o.LitElement{constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.name="",this.autocomplete="",this.pattern="",this.size="default",this.variant="default",this.showClear=!1,this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this.handleInput=e=>{const i=e.target;this.value=i.value,this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const i=e.target;this.value=i.value,i.checkValidity()||(this._internalError=i.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._inputElement&&(this._inputElement.value=""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get inputElement(){return this._inputElement}focus(){this._inputElement?.focus()}blur(){this._inputElement?.blur()}select(){this._inputElement?.select()}setSelectionRange(e,i,n){this._inputElement?.setSelectionRange(e,i,n)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(e){this._inputElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}render(){const e=this.error||this._internalError,i=this.showClear&&this.value&&!this.disabled&&!this.readonly,n=`input__field input__field--${this.size}`;return o.html`
-      <logosphere-formfield
-        .label=${this.label}
-        .helper=${this.helper}
-        .error=${e}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        .readonly=${this.readonly}
-        .placeholder=${this.placeholder}
-        .size=${this.size}
-        .variant=${this.variant}
-      >
-        <input
-          class="${n}"
-          type=${this.type}
-          .value=${h.live(this.value)}
-          placeholder=${this.placeholder||o.nothing}
-          name=${this.name||o.nothing}
-          autocomplete=${this.autocomplete||o.nothing}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          minlength=${this.minlength??o.nothing}
-          maxlength=${this.maxlength??o.nothing}
-          pattern=${this.pattern||o.nothing}
-          min=${this.min??o.nothing}
-          max=${this.max??o.nothing}
-          step=${this.step??o.nothing}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-          @keyup=${this.handleKeyUp}
-        />
-        ${i?o.html`
-          <button
-            type="button"
-            slot="suffix"
-            class="input__clear-btn"
-            @click=${this.handleClear}
-            tabindex="-1"
-          >
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        `:o.nothing}
-      </logosphere-formfield>
-    `}};exports.LogosphereInput.styles=[o.css`${o.unsafeCSS(u)}`];r([t.query("input")],exports.LogosphereInput.prototype,"_inputElement",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"value",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"type",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"placeholder",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"name",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"autocomplete",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"minlength",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"maxlength",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"pattern",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"min",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"max",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"step",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"size",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"variant",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"showClear",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"label",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"helper",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"error",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"required",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"disabled",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"readonly",2);r([t.state()],exports.LogosphereInput.prototype,"_internalError",2);exports.LogosphereInput=r([t.customElement("logosphere-input")],exports.LogosphereInput);