@redvars/peacock 3.2.7 → 3.2.9

package/dist/empty-state.js

@@ -1,171 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, A, b } from './lit-element-CA46RFZ_.js';
-import { r } from './state-CV1fRmOT.js';
-import { e } from './class-map-BmCohX9p.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-}
-
-.empty-state {
-  container: emptystate/inline-size;
-  padding: var(--spacing-100);
-  height: 100%;
-  max-width: var(--container-lg);
-  margin: auto;
-}
-
-.empty-state-container {
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  gap: var(--spacing-500);
-  align-items: center;
-}
-
-.illustration {
-  height: 100%;
-  display: flex;
-}
-.illustration base-icon {
-  --icon-size: 100%;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.content .title {
-  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
-  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
-  margin-bottom: var(--spacing-200);
-  color: var(--color-on-surface);
-}
-.content .description {
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
-  margin-bottom: var(--spacing-400);
-  color: var(--color-on-surface-variant);
-}
-
-:host(.content-center) .content {
-  align-items: center;
-}
-
-@container emptystate (min-width: 672px) {
-  .empty-state .illustration {
-    width: 50%;
-  }
-  .empty-state .content {
-    width: 50%;
-  }
-}
-@container emptystate (max-width: 671px) {
-  .empty-state .empty-state-container {
-    flex-direction: column;
-    gap: var(--spacing-200);
-  }
-  .empty-state .empty-state-container .illustration {
-    height: auto;
-    width: 100%;
-    justify-content: center;
-  }
-}`;
-
-/**
- * @label Empty State
- * @name empty-state
- * @description A message that displays when there is no information to display.
- */
-class EmptyState extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.illustration = 'no-document';
-        this.headline = '';
-        this.description = '';
-        this.vertical = false;
-        this.handleResize = () => {
-            // Logic equivalent to Stencil's clientWidth check
-            this.vertical = this.offsetWidth < 768;
-        };
-    }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.connectedCallback();
-        window.addEventListener('resize', this.handleResize);
-        // Initial check
-        this.handleResize();
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-        // eslint-disable-next-line wc/guard-super-call
-        super.disconnectedCallback();
-    }
-    __renderTitle() {
-        if (!this.headline)
-            return A;
-        return b `<div class="title">${this.headline}</div>`;
-    }
-    __renderDescription() {
-        if (!this.description)
-            return A;
-        return b `<div class="description">${this.description}</div>`;
-    }
-    render() {
-        const classes = {
-            'empty-state': true,
-            vertical: this.vertical,
-        };
-        // Resolving asset paths in Lit typically uses import.meta.url or absolute paths
-        const illustrationPath = new URL(`./assets/images/empty-state/${this.illustration}.svg`, import.meta.url).href;
-        return b `
-      <div class="${e(classes)}">
-        <div class="empty-state-container">
-          <div class="illustration">
-            <base-icon src="${illustrationPath}"></base-icon>
-          </div>
-
-          <div class="content">
-            ${this.__renderTitle()} ${this.__renderDescription()}
-            <div class="actions">
-              <slot name="actions"></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-}
-// Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z];
-__decorate([
-    n({ type: String, reflect: true })
-], EmptyState.prototype, "illustration", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], EmptyState.prototype, "headline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], EmptyState.prototype, "description", void 0);
-__decorate([
-    r()
-], EmptyState.prototype, "vertical", void 0);
-
-export { EmptyState };
-//# sourceMappingURL=empty-state.js.map

package/dist/empty-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"empty-state.js","sources":["../../src/empty-state/empty-state.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './empty-state.scss';\n\n/**\n * @label Empty State\n * @name empty-state\n * @description A message that displays when there is no information to display.\n */\nexport class EmptyState extends LitElement {\n  // Lit handles styles in a static property for better performance\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  illustration: 'no-document' | 'page' | 'search' = 'no-document';\n\n  @property({ type: String, reflect: true })\n  headline = '';\n\n  @property({ type: String, reflect: true })\n  description = '';\n\n  @state()\n  private vertical = false;\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    window.addEventListener('resize', this.handleResize);\n    // Initial check\n    this.handleResize();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    // eslint-disable-next-line wc/guard-super-call\n    super.disconnectedCallback();\n  }\n\n  private handleResize = () => {\n    // Logic equivalent to Stencil's clientWidth check\n    this.vertical = this.offsetWidth < 768;\n  };\n\n  __renderTitle() {\n    if (!this.headline) return nothing;\n    return html`<div class=\"title\">${this.headline}</div>`;\n  }\n\n  __renderDescription() {\n    if (!this.description) return nothing;\n    return html`<div class=\"description\">${this.description}</div>`;\n  }\n\n  protected render() {\n    const classes = {\n      'empty-state': true,\n      vertical: this.vertical,\n    };\n\n    // Resolving asset paths in Lit typically uses import.meta.url or absolute paths\n    const illustrationPath = new URL(\n      `./assets/images/empty-state/${this.illustration}.svg`,\n      import.meta.url,\n    ).href;\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <div class=\"empty-state-container\">\n          <div class=\"illustration\">\n            <base-icon src=\"${illustrationPath}\"></base-icon>\n          </div>\n\n          <div class=\"content\">\n            ${this.__renderTitle()} ${this.__renderDescription()}\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;AAIG;AACG,MAAO,UAAW,SAAQA,GAAU,CAAA;AAA1C,IAAA,WAAA,GAAA;;QAKE,IAAA,CAAA,YAAY,GAAsC,aAAa;QAG/D,IAAA,CAAA,QAAQ,GAAG,EAAE;QAGb,IAAA,CAAA,WAAW,GAAG,EAAE;QAGR,IAAA,CAAA,QAAQ,GAAG,KAAK;QAgBhB,IAAA,CAAA,YAAY,GAAG,MAAK;;YAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG;AACxC,QAAA,CAAC;IAyCH;IA1DE,iBAAiB,GAAA;;QAEf,KAAK,CAAC,iBAAiB,EAAE;QACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEpD,IAAI,CAAC,YAAY,EAAE;IACrB;IAEA,oBAAoB,GAAA;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEvD,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAOA,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAOC,CAAO;AAClC,QAAA,OAAOC,CAAI,CAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,QAAQ,QAAQ;IACxD;IAEA,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAOD,CAAO;AACrC,QAAA,OAAOC,CAAI,CAAA,CAAA,yBAAA,EAA4B,IAAI,CAAC,WAAW,QAAQ;IACjE;IAEU,MAAM,GAAA;AACd,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGD,QAAA,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAC9B,CAAA,4BAAA,EAA+B,IAAI,CAAC,YAAY,MAAM,EACtD,MAAM,CAAC,IAAI,CAAC,GAAG,CAChB,CAAC,IAAI;AAEN,QAAA,OAAOA,CAAI,CAAA;oBACKC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;8BAGP,gBAAgB,CAAA;;;;AAIhC,YAAA,EAAA,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE;;;;;;;KAO3D;IACH;;AAxEA;AACO,UAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAGhE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGd,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACxB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAGT,UAAA,CAAA;AADP,IAAAC,CAAK;AACmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/field.js

@@ -1,416 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b, A } from './lit-element-CA46RFZ_.js';
-import { r } from './state-CV1fRmOT.js';
-import { e } from './class-map-BmCohX9p.js';
-import { o as observerSlotChangesWithCallback } from './utils-DGMeCC48.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  --field-height: unset;
-  --field-padding-block: unset;
-}
-
-.field {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  --_container-shape-start-start: var(--field-container-shape-start-start, var(--shape-corner-extra-small));
-  --_container-shape-start-end: var(--field-container-shape-start-end, var(--shape-corner-extra-small));
-  --_container-shape-end-start: var(--field-container-shape-end-start, var(--shape-corner-extra-small));
-  --_container-shape-end-end: var(--field-container-shape-end-end, var(--shape-corner-extra-small));
-  --_container-color: var(--field-container-color);
-  --_outline-width: var(--field-outline-width, 0.0675rem);
-  --_outline-color: var(--field-outline-color, var(--color-outline));
-  --_input-text-color: var(--field-label-text-color, var(--color-on-surface));
-  --_helper-text-color: var(--field-helper-text-color, var(--color-on-surface-variant));
-  --_helper-text-opacity: unset;
-  --_label-text-color: var(--field-label-text-color, var(--color-primary));
-}
-.field .field-header {
-  display: flex;
-  align-items: center;
-  margin-block-end: var(--spacing-100);
-  justify-content: space-between;
-  gap: var(--spacing-100);
-}
-.field .field-header .label {
-  position: relative;
-  font-family: var(--typography-body-small-font-family) !important;
-  font-size: var(--typography-body-small-font-size) !important;
-  font-weight: var(--typography-body-small-font-weight) !important;
-  line-height: var(--typography-body-small-line-height) !important;
-  letter-spacing: var(--typography-body-small-letter-spacing) !important;
-  color: var(--_label-text-color);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.field .field-header .label .required {
-  color: var(--color-error);
-  padding-inline-start: var(--spacing-025);
-}
-.field .field-body {
-  position: relative;
-  display: flex;
-  cursor: text;
-}
-.field .field-body .outline {
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--_outline-width) solid var(--_outline-color);
-  opacity: var(--_outline-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-}
-.field .field-body .background {
-  position: absolute;
-  z-index: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-}
-.field .field-body .field-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  height: var(--field-height, 3.5rem);
-  padding-block: var(--field-padding-block);
-  z-index: 1;
-}
-.field .field-body .field-content .input-wrapper {
-  flex: 1;
-  padding-inline: var(--spacing-200);
-  position: relative;
-}
-.field .field-body .field-content .input-wrapper .outlined-label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  padding-inline: var(--spacing-200);
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_input-text-color);
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-}
-.field .field-body .field-content .input-wrapper .outlined-slot-container {
-  opacity: 0;
-}
-.field .field-body .field-content slot::slotted(*) {
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_input-text-color);
-  --icon-size: 1.25rem;
-  --icon-color: var(--_input-text-color);
-}
-.field .field-body .field-content slot::slotted(input::placeholder) {
-  color: var(--color-on-surface-variant);
-}
-.field .field-body .field-content .slot-start-wrapper.has-content {
-  margin-inline-start: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.field .field-body .field-content .slot-end-wrapper.has-content {
-  margin-inline-end: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.field .field-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-200);
-  margin-block-start: var(--spacing-050);
-  padding-inline: var(--spacing-200);
-}
-.field .field-footer .helper, .field .field-footer .text-count {
-  position: relative;
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_helper-text-color);
-  opacity: var(--_helper-text-opacity);
-}
-.field.focused {
-  --_outline-color: var(--color-primary);
-  --_outline-width: 0.125rem;
-}
-.field.has-error {
-  --_label-text-color: var(--color-error);
-  --_outline-color: var(--color-error);
-  --_helper-text-color: var(--color-error);
-  --_input-text-color: var(--color-error);
-}
-.field.has-warning {
-  --_label-text-color: var(--color-warning);
-  --_outline-color: var(--color-warning);
-  --_helper-text-color: var(--color-warning);
-  --_input-text-color: var(--color-warning);
-}
-.field.disabled .label {
-  opacity: 0.38;
-}
-.field.disabled {
-  --_input-text-color: var(--color-on-surface-variant);
-  --_outline-opacity: 0.38;
-  --_helper-text-opacity: 0.38;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  cursor: not-allowed;
-}
-.field.readonly {
-  cursor: initial;
-  --_input-text-color: var(--color-on-surface-variant);
-  --_outline-opacity: 0.38;
-  --_helper-text-opacity: 0.38;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.38;
-}
-.field.show-skeleton .skeleton {
-  display: block;
-}
-
-.skeleton {
-  display: none;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  left: 0;
-  --skeleton-shape-start-start: var(--shape-corner-extra-small);
-  --skeleton-shape-start-end: var(--shape-corner-extra-small);
-  --skeleton-shape-end-start: var(--shape-corner-extra-small);
-  --skeleton-shape-end-end: var(--shape-corner-extra-small);
-}`;
-
-class Field extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.help = '';
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.skeleton = false;
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.textCount = '';
-        this.focused = false;
-        this.populated = false;
-        this.variant = 'default';
-        this.slotStartHasContent = false;
-        this.slotEndHasContent = false;
-    }
-    firstUpdated() {
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-start-wrapper slot'), hasContent => {
-            this.slotStartHasContent = hasContent;
-            this.requestUpdate();
-        });
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-end-wrapper slot'), hasContent => {
-            this.slotEndHasContent = hasContent;
-            this.requestUpdate();
-        });
-    }
-    __handleClick() {
-        // @ts-ignore
-        this.host?.focus?.();
-    }
-    __renderInputSlot() {
-        if (this.variant === 'outlined') {
-            if (this.populated || this.focused)
-                return b `<slot></slot>`;
-            return b `
-        <label class="outlined-label">${this.label}</label>
-        <div class="outlined-slot-container">
-          <slot></slot>
-        </div>
-      `;
-        }
-        return b `<slot></slot>`;
-    }
-    __renderFieldHeader() {
-        if (!this.label)
-            return A;
-        if (this.variant === 'outlined' && !this.populated && !this.focused) {
-            return A;
-        }
-        return b `<div class="field-header">
-      <label class="label">
-        ${this.label}${this.required
-            ? b `<span class="required">*</span>`
-            : A}
-        <base-skeleton class="skeleton"></base-skeleton>
-      </label>
-    </div>`;
-    }
-    render() {
-        const classes = {
-            field: true,
-            required: this.required,
-            disabled: this.disabled,
-            'show-skeleton': this.skeleton,
-            'has-error': this.error,
-            'has-warning': this.warning,
-            focused: this.focused,
-            readonly: this.readonly,
-            [`variant-${this.variant}`]: true,
-            populated: this.populated,
-        };
-        return b `
-      <div class=${e(classes)}>
-        ${this.__renderFieldHeader()}
-
-        <div class="field-body" @click=${this.__handleClick}>
-          <div class="outline"></div>
-          <div class="background"></div>
-          <base-skeleton class="skeleton"></base-skeleton>
-
-          <div class="field-content">
-            <div
-              class=${e({
-            'slot-start-wrapper': true,
-            'has-content': this.slotStartHasContent,
-        })}
-            >
-              <slot name="field-start"></slot>
-            </div>
-
-            <div class="input-wrapper">${this.__renderInputSlot()}</div>
-
-            <div
-              class=${e({
-            'slot-end-wrapper': true,
-            'has-content': this.slotEndHasContent,
-        })}
-            >
-              <slot name="field-end"></slot>
-            </div>
-          </div>
-        </div>
-
-        ${this.__renderFieldFooter()}
-      </div>
-    `;
-    }
-    __renderFieldFooter() {
-        if (!this.textCount &&
-            !this.helperText &&
-            !this.errorText &&
-            !this.warningText)
-            return A;
-        return b `<div class="field-footer">
-      ${this.__renderHelperText()} ${this.__renderWordCount()}
-    </div>`;
-    }
-    __renderHelperText() {
-        if (this.error)
-            return b `<div class="helper">${this.errorText}</div>`;
-        if (this.warning)
-            return b `<div class="helper">${this.warningText}</div>`;
-        if (this.helperText || this.helperText === '')
-            return b `<div class="helper">${this.helperText}</div>`;
-        return A;
-    }
-    __renderWordCount() {
-        if (!this.textCount)
-            return A;
-        return b `<div class="text-count">${this.textCount}</div>`;
-    }
-}
-Field.styles = [css_248z];
-__decorate([
-    n({ type: String })
-], Field.prototype, "label", void 0);
-__decorate([
-    n({ type: String })
-], Field.prototype, "help", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "required", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Field.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Field.prototype, "readonly", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "skeleton", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], Field.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], Field.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], Field.prototype, "warningText", void 0);
-__decorate([
-    n({ type: String, attribute: 'text-count' })
-], Field.prototype, "textCount", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "focused", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "populated", void 0);
-__decorate([
-    n({ type: String })
-], Field.prototype, "variant", void 0);
-__decorate([
-    n({ type: Object })
-], Field.prototype, "host", void 0);
-__decorate([
-    r()
-], Field.prototype, "slotStartHasContent", void 0);
-__decorate([
-    r()
-], Field.prototype, "slotEndHasContent", void 0);
-
-export { Field };
-//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"field.js","sources":["../../src/field/field.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './field.scss';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\nexport class Field extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: String })\n  help: string = '';\n\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  @property({ type: Boolean })\n  skeleton: boolean = false;\n\n  @property({ type: String, attribute: 'helper-text' })\n  helperText: string = '';\n\n  @property({ type: Boolean })\n  error: boolean = false;\n\n  @property({ type: String, attribute: 'error-text' })\n  errorText: string = '';\n\n  @property({ type: Boolean })\n  warning: boolean = false;\n\n  @property({ type: String, attribute: 'warning-text' })\n  warningText: string = '';\n\n  @property({ type: String, attribute: 'text-count' })\n  textCount: string = '';\n\n  @property({ type: Boolean })\n  focused: boolean = false;\n\n  @property({ type: Boolean })\n  populated: boolean = false;\n\n  @property({ type: String })\n  variant: 'filled' | 'outlined' | 'default' = 'default';\n\n  @property({ type: Object })\n  host?: HTMLElement;\n\n  @state()\n  slotStartHasContent: boolean = false;\n\n  @state()\n  slotEndHasContent: boolean = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-start-wrapper slot'),\n      hasContent => {\n        this.slotStartHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-end-wrapper slot'),\n      hasContent => {\n        this.slotEndHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __handleClick() {\n    // @ts-ignore\n    this.host?.focus?.();\n  }\n\n  __renderInputSlot() {\n    if (this.variant === 'outlined') {\n      if (this.populated || this.focused) return html`<slot></slot>`;\n      return html`\n        <label class=\"outlined-label\">${this.label}</label>\n        <div class=\"outlined-slot-container\">\n          <slot></slot>\n        </div>\n      `;\n    }\n    return html`<slot></slot>`;\n  }\n\n  __renderFieldHeader() {\n    if (!this.label) return nothing;\n    if (this.variant === 'outlined' && !this.populated && !this.focused) {\n      return nothing;\n    }\n    return html`<div class=\"field-header\">\n      <label class=\"label\">\n        ${this.label}${this.required\n          ? html`<span class=\"required\">*</span>`\n          : nothing}\n        <base-skeleton class=\"skeleton\"></base-skeleton>\n      </label>\n    </div>`;\n  }\n\n  render() {\n    const classes = {\n      field: true,\n      required: this.required,\n      disabled: this.disabled,\n      'show-skeleton': this.skeleton,\n      'has-error': this.error,\n      'has-warning': this.warning,\n      focused: this.focused,\n      readonly: this.readonly,\n      [`variant-${this.variant}`]: true,\n      populated: this.populated,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${this.__renderFieldHeader()}\n\n        <div class=\"field-body\" @click=${this.__handleClick}>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <base-skeleton class=\"skeleton\"></base-skeleton>\n\n          <div class=\"field-content\">\n            <div\n              class=${classMap({\n                'slot-start-wrapper': true,\n                'has-content': this.slotStartHasContent,\n              })}\n            >\n              <slot name=\"field-start\"></slot>\n            </div>\n\n            <div class=\"input-wrapper\">${this.__renderInputSlot()}</div>\n\n            <div\n              class=${classMap({\n                'slot-end-wrapper': true,\n                'has-content': this.slotEndHasContent,\n              })}\n            >\n              <slot name=\"field-end\"></slot>\n            </div>\n          </div>\n        </div>\n\n        ${this.__renderFieldFooter()}\n      </div>\n    `;\n  }\n\n  __renderFieldFooter() {\n    if (\n      !this.textCount &&\n      !this.helperText &&\n      !this.errorText &&\n      !this.warningText\n    )\n      return nothing;\n    return html`<div class=\"field-footer\">\n      ${this.__renderHelperText()} ${this.__renderWordCount()}\n    </div>`;\n  }\n\n  __renderHelperText() {\n    if (this.error) return html`<div class=\"helper\">${this.errorText}</div>`;\n    if (this.warning)\n      return html`<div class=\"helper\">${this.warningText}</div>`;\n    if (this.helperText || this.helperText === '')\n      return html`<div class=\"helper\">${this.helperText}</div>`;\n    return nothing;\n  }\n\n  __renderWordCount() {\n    if (!this.textCount) return nothing;\n    return html`<div class=\"text-count\">${this.textCount}</div>`;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","property","state"],"mappings":"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"}