'use strict';

var index = require('./index-BUvWX8u2.js');

const pdsRowCss = ":host {\n  --row-gap-y: var(--pine-dimension-125);\n  --row-gap-x: var(--pine-dimension-125);\n  display: block;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -0.5);\n  margin-inline-end: calc(var(--row-gap-x) * -0.5);\n  -webkit-margin-start: calc(var(--row-gap-x) * -0.5);\n  margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -1);\n  margin-inline-end: calc(var(--row-gap-x) * -1);\n  -webkit-margin-start: calc(var(--row-gap-x) * -1);\n  margin-inline-start: calc(var(--row-gap-x) * -1);\n}\n@layer layout {\n  .pds-row > * {\n    -webkit-padding-after: calc(var(--row-gap-y));\n    padding-block-end: calc(var(--row-gap-y));\n    -webkit-padding-before: calc(var(--row-gap-y));\n    padding-block-start: calc(var(--row-gap-y));\n    -webkit-padding-end: calc(var(--row-gap-x));\n    padding-inline-end: calc(var(--row-gap-x));\n    -webkit-padding-start: calc(var(--row-gap-x));\n    padding-inline-start: calc(var(--row-gap-x));\n  }\n}\n\n.pds-row--no-wrap {\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.pds-row--border {\n  border: var(--pine-border);\n}\n\n.pds-justify-content-start {\n  -ms-flex-pack: start;\n  justify-content: start;\n}\n\n.pds-justify-content-center {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.pds-justify-content-end {\n  -ms-flex-pack: end;\n  justify-content: end;\n}\n\n.pds-justify-content-space-between {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n  -ms-flex-pack: distribute;\n  justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n  -ms-flex-pack: space-evenly;\n  justify-content: space-evenly;\n}\n\n.pds-align-items-start {\n  -ms-flex-align: start;\n  align-items: start;\n}\n\n.pds-align-items-center {\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.pds-align-items-end {\n  -ms-flex-align: end;\n  align-items: end;\n}\n\n.pds-align-items-stretch {\n  -ms-flex-align: stretch;\n  align-items: stretch;\n}\n\n.pds-align-items-baseline {\n  -ms-flex-align: baseline;\n  align-items: baseline;\n}";

const PdsRow = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * If `true`, the row will have a border.
         */
        this.border = false;
        /**
         * If `true`, the row items will not wrap to the next line if horizontal space is not available.
         */
        this.noWrap = false;
        this.colGapMap = {
            none: '0',
            xxs: '.25rem',
            xs: '.5rem',
            sm: '1rem',
            md: '1.5rem',
            lg: '2.25rem',
            xl: '3rem',
            xxl: '4rem',
            '025': 'var(--pine-dimension-025)',
            '050': 'var(--pine-dimension-050)',
            '100': 'var(--pine-dimension-100)',
            '125': 'var(--pine-dimension-125)',
            '150': 'var(--pine-dimension-150)',
            '200': 'var(--pine-dimension-200)',
            '250': 'var(--pine-dimension-250)',
            '300': 'var(--pine-dimension-300)',
            '350': 'var(--pine-dimension-350)',
            '400': 'var(--pine-dimension-400)',
            '450': 'var(--pine-dimension-450)',
            '500': 'var(--pine-dimension-500)',
            '550': 'var(--pine-dimension-550)',
            '600': 'var(--pine-dimension-600)',
            '650': 'var(--pine-dimension-650)',
            '700': 'var(--pine-dimension-700)',
            '750': 'var(--pine-dimension-750)',
            '800': 'var(--pine-dimension-800)'
        };
    }
    render() {
        const rowClasses = `
    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
    ${this.border ? 'pds-row--border' : ''}
    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
    ${this.noWrap ? 'pds-row--no-wrap' : ''}
  `;
        const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
            '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
            '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
        })), (this.colGapBlock && {
            '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
        })), (this.colGapInline && {
            '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
        })), (this.minHeight && {
            'min-height': this.minHeight,
        }));
        return index.h(index.Host, { key: '7d99184153a86e5d7d2c90fce98e05e9c4a36b81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
    }
};
PdsRow.style = pdsRowCss;

exports.pds_row = PdsRow;
//# sourceMappingURL=pds-row.entry.cjs.js.map
