@3mo/grid/dist/Grid.js

A simple wrapper web-component for CSS Grid Layout.

import { __decorate } from "tslib";
import { Component, component, css, html } from '@a11d/lit';
import { styleProperty } from '@3mo/style-property';
const asteriskSyntaxConverter = {
    fromStyle: (value) => value,
    toStyle: (value) => value.replace(/(\d*)\*/g, (_, p1) => `${p1 || '1'}fr`).trim(),
};
/**
 * @element mo-grid
 *
 * @ssr true
 *
 * @attr rows
 * @attr columns
 * @attr autoRows
 * @attr autoColumns
 * @attr autoFlow
 * @attr rowGap
 * @attr columnGap
 * @attr gap
 * @attr justifyItems
 * @attr justifyContent
 * @attr alignItems
 * @attr alignContent
 *
 * @slot - The content of the grid container.
 */
let Grid = class Grid extends Component {
    static get styles() {
        return css `:host { display: grid; }`;
    }
    get template() {
        return html `<slot></slot>`;
    }
};
__decorate([
    styleProperty({ styleKey: 'gridTemplateRows', styleConverter: asteriskSyntaxConverter })
], Grid.prototype, "rows", void 0);
__decorate([
    styleProperty({ styleKey: 'gridTemplateColumns', styleConverter: asteriskSyntaxConverter })
], Grid.prototype, "columns", void 0);
__decorate([
    styleProperty({ styleKey: 'gridAutoRows' })
], Grid.prototype, "autoRows", void 0);
__decorate([
    styleProperty({ styleKey: 'gridAutoColumns' })
], Grid.prototype, "autoColumns", void 0);
__decorate([
    styleProperty({ styleKey: 'gridAutoFlow' })
], Grid.prototype, "autoFlow", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "rowGap", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "columnGap", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "gap", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "justifyItems", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "justifyContent", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "alignItems", void 0);
__decorate([
    styleProperty()
], Grid.prototype, "alignContent", void 0);
Grid = __decorate([
    component('mo-grid')
], Grid);
export { Grid };