@duetds/components/lib/esm-es5/duet-grid_2.entry.js

This package includes Duet Core Components and related tools.

import { r as registerInstance, h, H as Host } from './core-12b6bfe8.js';
var DuetGrid = /** @class */ (function () {
    function DuetGrid(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Enable or disable the automatic responsive behaviour of the grid component. Setting this option to "true" makes sure that contents are stacked vertically on mobile (575px and under).
         */
        this.responsive = false;
        /**
         * Switch the breakpoint used to trigger the content stacking. Can be one of "small", "medium". These match to similar media query tokens: $media-query-small and $media-query-medium.
         */
        this.breakpoint = "small";
        /**
         * Direction of the grid items. Can be one of: "horizontal", "vertical".
         */
        this.direction = "horizontal";
        /**
         * Adjusts the vertical alignment of the grid items. Can be one of: "top", "bottom", "center", "stretch", "baseline".
         */
        this.alignment = "flex-end";
        /**
         * Adjusts the horizontal distribution of the grid items. Can be one of: "default", "left", "right, "center", "space-between", "space-around", "space-evenly".
         */
        this.distribution = "default";
        /**
         * Adjusts the horizontal alignment of the grid items on mobile (575px and under). Can be one of: "auto", "left", "right, "center".
         */
        this.mobile = "";
    }
    /**
     * render() function
     * Always the last one in the class.
     */
    DuetGrid.prototype.render = function () {
        return (h(Host, { class: {
                "duet-grid": true,
                "duet-no-stacking": !this.responsive,
                "duet-grid-align-top": this.alignment === "top",
                "duet-grid-align-bottom": this.alignment === "bottom",
                "duet-grid-align-center": this.alignment === "center",
                "duet-grid-align-stretch": this.alignment === "stretch",
                "duet-grid-align-baseline": this.alignment === "baseline",
                "duet-grid-distribution-left": this.distribution === "left",
                "duet-grid-distribution-right": this.distribution === "right",
                "duet-grid-distribution-center": this.distribution === "center",
                "duet-grid-distribution-between": this.distribution === "space-between",
                "duet-grid-distribution-around": this.distribution === "space-around",
                "duet-grid-distribution-evenly": this.distribution === "space-evenly",
                "duet-grid-mobile-left": this.mobile === "left",
                "duet-grid-mobile-center": this.mobile === "center",
                "duet-grid-mobile-right": this.mobile === "right",
                "duet-grid-direction-horizontal": this.direction === "horizontal",
                "duet-grid-direction-vertical": this.direction === "vertical",
                "duet-grid-breakpoint-small": this.breakpoint === "small",
                "duet-grid-breakpoint-medium": this.breakpoint === "medium",
            } }));
    };
    Object.defineProperty(DuetGrid, "style", {
        get: function () { return ".sc-duet-grid-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:100%!important;max-width:100%!important;height:auto!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-align:start!important;align-items:flex-start!important;-ms-flex-pack:start!important;justify-content:flex-start!important;-ms-flex-direction:column!important;flex-direction:column!important}\@media only screen and (min-width:36em){.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-direction:row!important;flex-direction:row!important}}\@media only screen and (min-width:48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-direction:row!important;flex-direction:row!important}}.duet-grid-wrap.sc-duet-grid-h{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.duet-no-stacking.sc-duet-grid-h{-ms-flex-direction:row!important;flex-direction:row!important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}\@media only screen and (min-width:36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}\@media only screen and (min-width:48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}}\@media only screen and (min-width:36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:start!important;align-items:flex-start!important}}\@media only screen and (min-width:36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:end!important;align-items:flex-end!important}}\@media only screen and (min-width:36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:center!important;align-items:center!important}}\@media only screen and (min-width:36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:stretch!important;align-items:stretch!important}}\@media only screen and (min-width:36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:baseline!important;align-items:baseline!important}}\@media only screen and (min-width:48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:start!important;align-items:flex-start!important}}\@media only screen and (min-width:48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:end!important;align-items:flex-end!important}}\@media only screen and (min-width:48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:center!important;align-items:center!important}}\@media only screen and (min-width:48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:stretch!important;align-items:stretch!important}}\@media only screen and (min-width:48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:baseline!important;align-items:baseline!important}}.duet-grid-distribution-left.sc-duet-grid-h{-ms-flex-pack:start!important;justify-content:flex-start!important}.duet-grid-distribution-right.sc-duet-grid-h{-ms-flex-pack:end!important;justify-content:flex-end!important}.duet-grid-distribution-center.sc-duet-grid-h{-ms-flex-pack:center!important;justify-content:center!important}.duet-grid-distribution-between.sc-duet-grid-h{-ms-flex-pack:justify!important;justify-content:space-between!important}.duet-grid-distribution-around.sc-duet-grid-h{-ms-flex-pack:distribute!important;justify-content:space-around!important}.duet-grid-distribution-evenly.sc-duet-grid-h{-ms-flex-pack:space-evenly!important;justify-content:space-evenly!important}\@media only screen and (max-width:35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{-ms-flex-align:start!important;align-items:flex-start!important;-ms-flex-pack:start!important;justify-content:flex-start!important;text-align:left!important}}\@media only screen and (max-width:35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{-ms-flex-align:center!important;align-items:center!important;-ms-flex-pack:center!important;justify-content:center!important;text-align:center!important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center!important}}\@media only screen and (max-width:35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{-ms-flex-align:end!important;align-items:flex-end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;text-align:right!important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right!important}}"; },
        enumerable: true,
        configurable: true
    });
    return DuetGrid;
}());
var DuetGridItem = /** @class */ (function () {
    function DuetGridItem(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Make the grid item fill the remaining available grid space.
         */
        this.fill = false;
        /**
         * Theme of the grid item. Can be one of: "default", "turva".
         */
        this.theme = "";
        /**
         * Controls the margin of the component. Can be one of: "auto", "none".
         */
        this.margin = "auto";
    }
    /**
     * Component lifecycle events.
     */
    DuetGridItem.prototype.componentWillLoad = function () {
        if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
            this.theme = "turva";
        }
    };
    /**
     * render() function
     * Always the last one in the class.
     */
    DuetGridItem.prototype.render = function () {
        var styles = {
            "min-width": this.minWidth,
            "max-width": this.maxWidth,
        };
        return (h(Host, { style: styles, class: {
                "duet-m-0": this.margin === "none",
                "duet-theme-turva": this.theme === "turva",
                "duet-grid-item": true,
                "duet-grid-item-fill": this.fill,
            } }));
    };
    Object.defineProperty(DuetGridItem, "style", {
        get: function () { return ".sc-duet-grid-item-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:16px!important;margin-bottom:16px!important;min-width:0;max-width:100%;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1rem;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;line-height:1.5;color:#00294d;font-style:normal}.sc-duet-grid-item-h:last-child, .sc-duet-grid-item-h:last-of-type{margin-right:0!important}\@media only screen and (max-width:35.9375em){.sc-duet-grid-item-h{min-width:0!important;max-width:100%!important;width:100%!important}}.duet-grid-item-fill.sc-duet-grid-item-h{-ms-flex:1 1 auto;flex:1 1 auto}.duet-theme-turva.sc-duet-grid-item-h{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111}.duet-m-0.sc-duet-grid-item-h{margin:0!important}"; },
        enumerable: true,
        configurable: true
    });
    return DuetGridItem;
}());
export { DuetGrid as duet_grid, DuetGridItem as duet_grid_item };