@furo/layout/dist/impl/FuroLayoutIndent.js

Layout components for furo

import { __decorate } from "tslib";
import { css, html, LitElement } from "lit";
// eslint-disable-next-line import/extensions
import { property } from "lit/decorators.js";
import { BackgroundDesign } from "../types/BackgroundDesign";
/**
 * ### Description
 * `furo-layout-indent` is a layout component for adding the responsive spacing.
 *
 * By default, the indentation are set for block and inline.
 *
 * #### ES6 Module Import
 *
 * `import "@furo/webcomponents/dist/LayoutIndent.js";`
 *
 * @slot {HTMLElement[]} default - Place your components here
 * @slot {HTMLElement[]}  - Place your components here
 *
 * @author FURO Furo
 * @tagname furo-layout-indent
 * @public
 */
export class FuroLayoutIndent extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * Chose a background design.
         * @public
         * @typeref BackgroundDesign - "../types/BackgroundDesign"
         */
        this.backgroundDesign = BackgroundDesign.Transparent;
        /**
         * Adds indentation on block (top/bottom) only.
         * @public
         */
        this.block = false;
        /**
         * Adds indentation on block-start  only.
         * @public
         */
        this.blockStart = false;
        /**
         * Adds indentation on block-end  only.
         * @public
         */
        this.blockEnd = false;
        /**
         * Adds indentation on inline (left/right) only.
         * @public
         */
        this.inline = false;
        /**
         * Adds indentation on inline-start only.
         * @public
         */
        this.inlineStart = false;
        /**
         * Adds indentation on inline-start only.
         * @public
         */
        this.inlineEnd = false;
        /**
         * Adds scrolling behaviour if used inside a `furo-vertical-flex`
         * @public
         */
        this.scrolls = false;
        /**
         * Set flex behaviour if used inside a `furo-vertical-flex` / `furo-horizontal-flex`
         * @public
         */
        this.flex = false;
    }
    render() {
        return html ` <slot></slot>`;
    }
    static { this.styles = css `
    :host {
      display: block;
    }

    :host(:not([inline]):not([block]):not([inline-start]):not([block-start]):not([inline-end]):not([block-end])) {
      padding: var(--MediaSizeIndentation, 1rem 2rem 0.5rem 2rem);
    }

    /* BackgroundDesign */

    :host([background-design="Solid"]) {
      background: var(--sapGroup_ContentBackground, white);
    }

    :host([background-design="List"]) {
      background-color: var(--sapList_Background);
    }

    /* Paddings */

    :host([inline]) {
      padding-inline-end: var(--MediaSizeIndentationEnd, 2rem);
      padding-inline-start: var(--MediaSizeIndentationStart, 2rem);
    }

    :host([inline-start]) {
      padding-inline-start: var(--MediaSizeIndentationStart, 2rem);
    }

    :host([inline-end]) {
      padding-inline-end: var(--MediaSizeIndentationEnd, 2rem);
    }

    :host([block]) {
      padding-block-start: var(--MediaSizeIndentationTop, 1rem);
      padding-block-end: var(--MediaSizeIndentationBottom, 0.5rem);
    }

    :host([block-start]) {
      padding-block-start: var(--MediaSizeIndentationTop, 1rem);
    }

    :host([block-end]) {
      padding-block-end: var(--MediaSizeIndentationBottom, 0.5rem);
    }
  `; }
}
__decorate([
    property({
        type: BackgroundDesign,
        attribute: "background-design",
        reflect: true,
    })
], FuroLayoutIndent.prototype, "backgroundDesign", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "block" })
], FuroLayoutIndent.prototype, "block", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "block-start" })
], FuroLayoutIndent.prototype, "blockStart", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "block-end" })
], FuroLayoutIndent.prototype, "blockEnd", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "inline" })
], FuroLayoutIndent.prototype, "inline", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "inline-start" })
], FuroLayoutIndent.prototype, "inlineStart", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "inline-end" })
], FuroLayoutIndent.prototype, "inlineEnd", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "scroll" })
], FuroLayoutIndent.prototype, "scrolls", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: "flex" })
], FuroLayoutIndent.prototype, "flex", void 0);
//# sourceMappingURL=FuroLayoutIndent.js.map