import { r as registerInstance, h, H as Host } from './index-DBTJNfo7.js';

const helperLineCss = () => `:host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-helper-line.invalid) .helper-text{color:var(--limel-theme-error-color)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}`;

const HelperLine = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Turns `true`, when the parent component is invalid.
         * For example, when the parent component is `required` but is left empty.
         * Or when the input format is invalid.
         */
        this.invalid = false;
        this.hasContent = () => {
            return !!(this.maxLength > 0 ||
                (this.helperText && this.helperText.length > 0));
        };
        this.renderHelperText = () => {
            if (!this.helperText) {
                return;
            }
            return (h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
        };
        this.renderCharacterCounter = () => {
            const counter = `${this.length} / ${this.maxLength}`;
            if (!this.maxLength) {
                return;
            }
            return h("span", { class: "counter" }, counter);
        };
    }
    render() {
        return (h(Host, { key: '8ef6eb3b3e372e5dc61af1424a88c1c342023d13', tabIndex: -1, class: {
                invalid: this.invalid,
            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3b4e31c23f5964aabb67556e68bd1785c871d934' }, this.renderHelperText(), this.renderCharacterCounter())));
    }
};
HelperLine.style = helperLineCss();

const notchedOutlineCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}limel-notched-outline{--limel-notched-outline-border-color:rgba(var(--contrast-700), 0.65);--limel-notched-outline-background-color:rgba(var(--contrast-200), 0.5);display:block;width:100%;height:fit-content}.limel-notched-outline{position:relative;width:100%;height:100%}.limel-notched-outline [slot=content]{background-color:var(--limel-notched-outline-background-color);border-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--outlines{pointer-events:none;position:absolute;inset:0;z-index:var(--limel-notched-outline-z-index, 0);display:flex}.limel-notched-outline--leading-outline,.limel-notched-outline--notch,.limel-notched-outline--trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-notched-outline-border-color)}.limel-notched-outline--leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-left-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--notch{flex-shrink:0;position:relative;z-index:2;border-top-color:var(--limel-notched-outline-notch-border-top-color, var(--limel-notched-outline-border-color));border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.limel-notched-outline--notch label{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;transition:color 0.2s ease, font-size 0.2s ease, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);transform:translate3d(var(--limel-notched-outline-label-transform-x, 0), var(--limel-notched-outline-label-transform-y, 0.62rem), 0);display:block;padding:0 0.25rem;color:var(--limel-notched-outline-label-color, rgba(var(--contrast-1200), 1));font-size:var(--limel-notched-outline-label-font-size, var(--limel-theme-default-font-size));letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);line-height:normal}.limel-notched-outline--notch label:after{position:absolute;right:0;padding:0 0.25rem}.limel-notched-outline--trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-right-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:var(--limel-theme-default-font-size);font-weight:400;font-family:inherit;letter-spacing:0.009375em}.mdc-text-field--disabled .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.limel-notched-outline--empty-readonly-value{position:absolute;top:0.62rem;left:1rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:rgba(var(--contrast-700), 1);--limel-notched-outline-background-color:rgba(var(--contrast-200), 1)}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-border-color:var(--lime-primary-color, var(--limel-theme-primary-color));--limel-notched-outline-background-color:rgba(var(--contrast-100), 0.8)}limel-notched-outline[disabled]:not([disabled=false]){--limel-notched-outline-label-color:rgba(var(--contrast-1200), 0.5)}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label{padding-right:0.75rem}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label:after{content:"*";scale:1.3}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])){--limel-notched-outline-border-color:var(       --limel-theme-error-text-color   )}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:var(       --limel-theme-error-color   )}limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notch label:after{color:var(--limel-theme-error-text-color)}limel-notched-outline[readonly]:not([readonly=false]){--limel-notched-outline-border-color:transparent !important;--limel-notched-outline-background-color:transparent !important}limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label{transition-duration:0s}limel-notched-outline[has-leading-icon]:not([has-leading-icon=false]):not([has-floating-label]):not([has-value]){--limel-notched-outline-label-transform-x:1.25rem}limel-notched-outline[has-leading-icon] .limel-notched-outline--empty-readonly-value{left:2.25rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover label,limel-notched-outline:not([disabled]:not([disabled=false])):focus label,limel-notched-outline:not([disabled]:not([disabled=false])):focus-within label{will-change:color, transform, font-size}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}limel-notched-outline[has-floating-label],limel-notched-outline[has-value]:not([has-value=false]),limel-notched-outline[readonly]:not([has-value]:not([has-value=true])){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}`;

const NotchedOutline = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Set to `true` when the input element is required.
         * This applies proper visual styles, such as inclusion of an asterisk
         * beside the label.
         */
        this.required = false;
        /**
         * Set to `true` when the input element is readonly.
         * This applies proper visual styles, such as making the outline transparent.
         */
        this.readonly = false;
        /**
         * Set to `true` to indicate that the current value of the input element is
         * invalid. This applies proper visual styles, such as making the outlines red.
         */
        this.invalid = false;
        /**
         * Set to `true` to indicate that the input element is
         * disabled. This applies proper visual styles, such as making the outlines
         * and the label transparent.
         */
        this.disabled = false;
        /**
         * Set to `true` when the user has entered a value for the input element,
         * shrinking the label in size, and visually rendering it above the entered value.
         */
        this.hasValue = false;
        /**
         * Set to `true` when the consumer element displays a leading icon.
         * This applies proper visual styles, such as rendering the label
         * correctly placed beside the leading icon.
         */
        this.hasLeadingIcon = false;
        /**
         * Set to `true` when the consumer element needs to render the
         * label above the input element, despite existence of a `value`.
         * For example in the `text-editor` or `limel-select`,
         * where the default layout requires a floating label.
         */
        this.hasFloatingLabel = false;
    }
    render() {
        return (h("div", { key: '075d440c16ca092fd36dfc72b59937d09db55b50', class: "limel-notched-outline" }, h("slot", { key: '5efa4c54ce73c15d7d259d2f8d856be9e40ebc16', name: "content" }), h("span", { key: '2ad07b5b8b404d2ac59b05de0a22e52c77ced6a3', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '1f70d37ebf40173162e71b3ca4bd31bf14bf3dec', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '0097c9838a78c1972a014faa4f6439f40c6dee66', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
    }
    renderLabel() {
        if (!this.label) {
            return;
        }
        return (h("span", { class: "limel-notched-outline--notch" }, h("label", { htmlFor: this.labelId }, this.label)));
    }
    renderEmptyReadonlyValue() {
        if (!this.readonly || this.hasValue) {
            return;
        }
        return (h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
    }
};
NotchedOutline.style = notchedOutlineCss();

export { HelperLine as limel_helper_line, NotchedOutline as limel_notched_outline };
