/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
import { LABEL_VALUE_CONSTANTS } from './label-value-constants';
import { BaseComponent } from '../core/base/base-component';
const template = '<template><div class=\"forge-label-value\" part=\"root\"><div class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></div><div class=\"label\" part=\"label\"><slot name=\"label\"></slot></div><div class=\"value\" part=\"value\"><slot name=\"value\"></slot></div></div></template>';
const styles = ':host{display:inline-block;min-width:0}:host([hidden]){display:none}.forge-label-value{--_label-value-align:var(--forge-label-value-align, start);--_label-value-label-spacing:var(--forge-label-value-label-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-label-block-start-spacing:var(--forge-label-value-label-block-start-spacing, var(--_label-value-label-spacing));--_label-value-label-block-end-spacing:var(--forge-label-value-label-block-end-spacing, var(--_label-value-label-spacing));--_label-value-label-color:var(--forge-label-value-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-icon-spacing:var(--forge-label-value-icon-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-inline-label-spacing:var(--forge-label-value-inline-label-spacing, var(--forge-spacing-xsmall, 8px));--_label-value-empty-color:var(--forge-label-value-empty-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-empty-style:var(--forge-label-value-empty-style, italic)}.forge-label-value{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"icon label\" \"icon value\"}.label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label2-text-decoration,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);grid-area:label;justify-self:var(--_label-value-align);-webkit-margin-before:var(--_label-value-label-block-start-spacing);margin-block-start:var(--_label-value-label-block-start-spacing);-webkit-margin-after:var(--_label-value-label-block-end-spacing);margin-block-end:var(--_label-value-label-block-end-spacing);line-height:normal;text-align:var(--_label-value-align);color:var(--_label-value-label-color)}.value{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);grid-area:value;display:grid;-webkit-box-align:center;align-items:center;justify-self:var(--_label-value-align);line-height:normal;text-align:var(--_label-value-align)}.icon{display:-webkit-inline-box;display:inline-flex;grid-area:icon}::slotted([slot=icon]){-webkit-margin-end:var(--_label-value-icon-spacing);margin-inline-end:var(--_label-value-icon-spacing)}:host(:is([inline],[dense])) .forge-label-value{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}:host(:is([inline],[dense])) .label{margin-block:0;-webkit-margin-end:var(--_label-value-inline-label-spacing);margin-inline-end:var(--_label-value-inline-label-spacing)}:host([ellipsis]) ::slotted([slot=value]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([empty]) .value{color:var(--_label-value-empty-color);font-style:var(--_label-value-empty-style)}';
/**
 * @tag forge-label-value
 *
 * @summary Label-value pairs are used to display a label and a value in a compact format.
 *
 * @property {boolean} [empty=false] - If true, the value will be displayed in an alternative emphasized style.
 * @property {boolean} [ellipsis=false] - If true, the value will be truncated with an ellipsis if it overflows its container.
 * @property {boolean} [inline=false] - If true, the label and value will be displayed on the same line.
 * @property {boolean} [dense=false] - Deprecated. Use `inline` instead.
 *
 * @attribute {boolean} [empty=false] - If present, the value will be displayed in an alternative emphasized style.
 * @attribute {boolean} [ellipsis=false] - If present, the value will be truncated with an ellipsis if it overflows its container.
 * @attribute {boolean} [inline=false] - If present, the label and value will be displayed on the same line.
 *
 * @cssproperty --forge-label-value-align - Aligns the label and value. Possible values: `start` (default), `center`, `end`.
 * @cssproperty --forge-label-value-label-spacing - The spacing between the label and value.
 * @cssproperty --forge-label-value-label-block-start-spacing - The block start spacing for the label.
 * @cssproperty --forge-label-value-label-block-end-spacing - The block end spacing for the label.
 * @cssproperty --forge-label-value-label-color - The color to apply to the label.
 * @cssproperty --forge-label-value-icon-spacing - The spacing between the icon and the label.
 * @cssproperty --forge-label-value-inline-label-spacing - The spacing between the label and value when displayed inline.
 * @cssproperty --forge-label-value-empty-color - The color to apply to the value when empty.
 * @cssproperty --forge-label-value-empty-style - The font-style to apply to the value when empty.
 *
 * @csspart root - The root layout container element.
 * @csspart label - The label container element.
 * @csspart value - The value container element.
 * @csspart icon - The icon container element.
 *
 * @slot label - The label to display.
 * @slot value - The value to display.
 * @slot icon - An icon to display next to the label.
 */
let LabelValueComponent = class LabelValueComponent extends BaseComponent {
    static get observedAttributes() {
        return Object.values(LABEL_VALUE_CONSTANTS.observedAttributes);
    }
    constructor() {
        super();
        this._empty = false;
        this._ellipsis = false;
        this._inline = false;
        attachShadowTemplate(this, template, styles);
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case LABEL_VALUE_CONSTANTS.observedAttributes.EMPTY:
                this.empty = coerceBoolean(newValue);
                break;
            case LABEL_VALUE_CONSTANTS.observedAttributes.ELLIPSIS:
                this.ellipsis = coerceBoolean(newValue);
                break;
            case LABEL_VALUE_CONSTANTS.observedAttributes.INLINE:
            case LABEL_VALUE_CONSTANTS.observedAttributes.DENSE:
                this.inline = coerceBoolean(newValue);
                break;
        }
    }
    get empty() {
        return this._empty;
    }
    set empty(value) {
        value = Boolean(value);
        if (this._empty !== value) {
            this._empty = value;
            this.toggleAttribute(LABEL_VALUE_CONSTANTS.attributes.EMPTY, this._empty);
        }
    }
    get ellipsis() {
        return this._ellipsis;
    }
    set ellipsis(value) {
        value = Boolean(value);
        if (this._ellipsis !== value) {
            this._ellipsis = value;
            this.toggleAttribute(LABEL_VALUE_CONSTANTS.attributes.ELLIPSIS, this._ellipsis);
        }
    }
    get inline() {
        return this._inline;
    }
    set inline(value) {
        value = Boolean(value);
        if (this._inline !== value) {
            this._inline = value;
            this.toggleAttribute(LABEL_VALUE_CONSTANTS.attributes.INLINE, this._inline);
        }
    }
    /** @deprecated Use `inline` instead. */
    get dense() {
        return this.inline;
    }
    set dense(value) {
        this.inline = value;
    }
};
LabelValueComponent = __decorate([
    customElement({
        name: LABEL_VALUE_CONSTANTS.elementName
    })
], LabelValueComponent);
export { LabelValueComponent };
