@kodaris/krubble-components 1.0.20 → 1.0.22

package/dist/form/detail-field/detail-field.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A read-only field component that displays a label and value.
+ *
+ * @element kr-detail-field
+ */
+let KRDetailField = class KRDetailField extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The field label text
+         */
+        this.label = '';
+        /**
+         * The value to display
+         */
+        this.value = '';
+    }
+    render() {
+        return html `
+      <div class="wrapper">
+        ${this.label
+            ? html `<label>${this.label}</label>`
+            : nothing}
+        <div class="value">${this.value}</div>
+      </div>
+    `;
+    }
+};
+KRDetailField.styles = css `
+    :host {
+      display: block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 500;
+      color: black;
+    }
+
+    .value {
+      font-size: 14px;
+      color: black;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KRDetailField.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], KRDetailField.prototype, "value", void 0);
+KRDetailField = __decorate([
+    customElement('kr-detail-field')
+], KRDetailField);
+export { KRDetailField };
+//# sourceMappingURL=detail-field.js.map

package/dist/form/detail-field/detail-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-field.js","sourceRoot":"","sources":["../../../src/form/detail-field/detail-field.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAyBL;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;IAYb,CAAC;IAVU,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,UAAU,IAAI,CAAC,KAAK,UAAU;YACpC,CAAC,CAAC,OAAO;6BACU,IAAI,CAAC,KAAK;;KAElC,CAAC;IACJ,CAAC;;AA7Ce,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsB3B,AAtBqB,CAsBpB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAnCA,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA+CzB"}

package/dist/form/index.d.ts

@@ -2,4 +2,5 @@ export { KRTextField } from './text-field/text-field.js';
 export { KRSelectField } from './select-field/select-field.js';
 export { KRSelectOption } from './select-field/select-option.js';
 export { KRTextareaField } from './textarea-field/textarea-field.js';
+export { KRDetailField } from './detail-field/detail-field.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/form/index.js

@@ -3,4 +3,5 @@ export { KRTextField } from './text-field/text-field.js';
 export { KRSelectField } from './select-field/select-field.js';
 export { KRSelectOption } from './select-field/select-option.js';
 export { KRTextareaField } from './textarea-field/textarea-field.js';
+export { KRDetailField } from './detail-field/detail-field.js';
 //# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/form/select-field/select-field.js

@@ -296,13 +296,13 @@ KRSelectField.styles = css `
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: 6px;
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
-      color: var(--kr-select-label-color, #374151);
+      color: black;
     }
 
     .required {
@@ -319,14 +319,14 @@ KRSelectField.styles = css `
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      padding: 0.5rem 0.75rem;
+      padding: 10px 12px;
       font-family: inherit;
       font-size: 14px;
       line-height: 1.5;
       color: var(--kr-select-color, #111827);
       background-color: var(--kr-select-bg, #fff);
-      border: 1px solid var(--kr-select-border-color, #d1d5db);
-      border-radius: 4px;
+      border: 1px solid var(--kr-select-border-color, #0000003d);
+      border-radius: 8px;
       cursor: pointer;
       transition: border-color 0.2s, box-shadow 0.2s;
       text-align: left;

package/dist/form/text-field/text-field.js

@@ -195,13 +195,13 @@ KRTextField.styles = css `
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: 6px;
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
-      color: var(--kr-text-field-label-color, #374151);
+      color: black;
     }
 
     .required {
@@ -212,9 +212,9 @@ KRTextField.styles = css `
     input {
       font-family: inherit;
       font-size: 14px;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--kr-text-field-border-color, #d1d5db);
-      border-radius: 4px;
+      padding: 10px 12px;
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
       background-color: var(--kr-text-field-bg, #fff);
       color: var(--kr-text-field-color, #111827);
       transition: border-color 0.2s, box-shadow 0.2s;

package/dist/form/textarea-field/textarea-field.js

@@ -197,13 +197,13 @@ KRTextareaField.styles = css `
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: 6px;
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
-      color: var(--kr-textarea-field-label-color, #374151);
+      color: black;
     }
 
     .required {
@@ -215,9 +215,9 @@ KRTextareaField.styles = css `
       font-family: inherit;
       font-size: 14px;
       line-height: 1.5;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--kr-textarea-field-border-color, #d1d5db);
-      border-radius: 4px;
+      padding: 10px 12px;
+      border: 1px solid var(--kr-textarea-field-border-color, #0000003d);
+      border-radius: 8px;
       background-color: var(--kr-textarea-field-bg, #fff);
       color: var(--kr-textarea-field-color, #111827);
       transition: border-color 0.2s, box-shadow 0.2s;