'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-81cd6930.js');
require('./constants-4d389abc.js');

const icDataRowCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:relative;display:block}.data{display:flex;align-items:top}.text-cells{display:flex;flex-grow:1;min-width:0;--ic-typography-color:var(--ic-data-list-text-cell);color:var(--ic-data-list-text-cell)}.label{width:var(--data-row-label-width, 12.5rem);min-width:12.5rem;margin-right:var(--ic-space-md);--ic-typography-color:var(--ic-data-list-text-label);color:var(--ic-data-list-text-label)}.value{flex-grow:1}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]){margin-top:calc(var(--ic-space-xs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]){margin-top:calc(var(--ic-space-xxs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]){margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}.end-component{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}.divider{margin-top:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-data-list-keyline-cell)}:host(.ic-data-row-small) .divider{margin-top:var(--ic-space-xs)}:host(.breakpoint-medium) .label{width:10rem;min-width:10rem}:host(.breakpoint-xs) .text-cells{flex-direction:column}:host(.breakpoint-xs) .label{width:8rem;margin-bottom:var(--ic-space-xs)}:host(.breakpoint-xs) .value{max-width:95%}:host(.breakpoint-xs) .end-component{margin-left:0}@media (forced-colors: active){.divider{background-color:canvastext}}";
const IcDataRowStyle0 = icDataRowCss;

const DataRow = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.hasEndComponent = false;
        this.resizeObserver = null;
        this.deviceSize = helpers.DEVICE_SIZES.XL;
        /**
         * The size of the data row component.
         */
        this.size = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        this.runResizeObserver = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.checkLabelAbove();
            });
            this.resizeObserver.observe(this.el);
        };
        this.renderCellContent = (cell) => {
            const isValue = cell === "value";
            return (index.h("div", { class: cell }, helpers.isSlotUsed(this.el, cell) ? (index.h("slot", { name: cell })) : (index.h("ic-typography", { variant: isValue
                    ? "body"
                    : this.listSize === "xs"
                        ? "label"
                        : "subtitle-large" }, isValue ? this.value : this.label))));
        };
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        this.deviceSize = helpers.getCurrentDeviceSize();
        this.hasEndComponent = helpers.slotHasContent(this.el, "end-component");
        this.checkLabelAbove();
    }
    componentDidLoad() {
        helpers.checkResizeObserver(this.runResizeObserver);
        if (this.hasEndComponent)
            this.labelEndComponent();
    }
    checkLabelAbove() {
        var _a;
        const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".data");
        if (row) {
            const rowSize = (row === null || row === void 0 ? void 0 : row.clientWidth) + 46;
            if (rowSize) {
                this.listSize =
                    rowSize < helpers.DEVICE_SIZES.S
                        ? "xs"
                        : rowSize < helpers.DEVICE_SIZES.M
                            ? "m"
                            : "xl";
            }
        }
    }
    labelEndComponent() {
        var _a;
        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("slot[name=end-component]").forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
    }
    render() {
        const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
        return (index.h(index.Host, { key: 'd5c6ff5a373e32e4e310dd0ddb6bbcfea0f2704a', class: {
                ["ic-data-row-small"]: size === "small",
                ["breakpoint-medium"]: listSize === "m",
                ["breakpoint-xs"]: listSize === "xs",
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, role: "listitem" }, index.h("div", { key: 'b2867cd3b8a493ec7e4f4cff48849d94560c1fdc', class: "data" }, index.h("div", { key: 'd3fd667e4612907b81081ddae99c3228e2dbb954', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: 'dbbb33f8a2726f801dc72ca1f11544073ba8bc69', class: "end-component" }, index.h("slot", { key: 'fd4b247214447bac2a7a5bc9385a8f91cb44436f', name: "end-component" })))), index.h("div", { key: '8e19fde06b9fa34a3295e37fe726f163593f6674', class: "divider" })));
    }
    get el() { return index.getElement(this); }
};
DataRow.style = IcDataRowStyle0;

exports.ic_data_row = DataRow;

//# sourceMappingURL=ic-data-row.cjs.entry.js.map