@fluid-topics/ft-page-layout 1.2.0

package/build/ftds-page-layout.d.ts

@@ -0,0 +1,26 @@
+import { ClassInfo } from "lit/directives/class-map.js";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtdsPageLayoutBreadcrumbItem, FtdsPageLayoutChipContent, FtdsPageLayoutProperties } from "./ftds-page-layout.properties";
+import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+export declare class FtdsPageLayout extends FtLitElementWithI18n implements FtdsPageLayoutProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    title: string;
+    breadcrumb?: FtdsPageLayoutBreadcrumbItem[];
+    subTitle?: string;
+    chipsContent?: FtdsPageLayoutChipContent[];
+    footerHasContent: boolean;
+    popoverHasContent: boolean;
+    protected footerLeftContent?: Node[];
+    protected footerRightContent?: Node[];
+    protected popoverContent?: Node[];
+    constructor();
+    get pageHeaderClasses(): ClassInfo;
+    protected render(): import("lit").TemplateResult<1>;
+    protected renderHeader(): import("lit").TemplateResult<1>;
+    protected renderFooter(): import("lit").TemplateResult<1>;
+    protected renderChip(): import("lit").TemplateResult<1>;
+    protected renderBreadcrumb(): import("lit").TemplateResult<1>;
+    protected renderPopover(): import("lit").TemplateResult<1>;
+    protected onSlotChange(e: Event): void;
+}

package/build/ftds-page-layout.js

@@ -0,0 +1,170 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from "lit";
+import { property, queryAssignedNodes, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styles } from "./ftds-page-layout.styles";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsPopover } from "@fluid-topics/ft-popover";
+import { FtdsChip } from "@fluid-topics/ft-chip";
+import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtdsLink } from "@fluid-topics/ft-link";
+import { FtLitElementWithI18n, } from "@fluid-topics/ft-i18n";
+import { defaultPageLayoutMessages, i18nContext } from "./FtdsPageLayoutMessages";
+class FtdsPageLayout extends FtLitElementWithI18n {
+    constructor() {
+        super();
+        this.footerHasContent = false;
+        this.popoverHasContent = false;
+        this.addI18nContext(i18nContext, defaultPageLayoutMessages);
+    }
+    get pageHeaderClasses() {
+        return {
+            "ftds-page-layout--header": true,
+            "ftds-page-layout--child": this.breadcrumb !== undefined,
+        };
+    }
+    render() {
+        return html `
+            ${this.renderHeader()}
+            <main>
+                <slot></slot>
+            </main>
+            ${this.renderFooter()}
+        `;
+    }
+    renderHeader() {
+        return html `
+            <div class="${classMap(this.pageHeaderClasses)}">
+                <div class="ftds-page-layout--left-slot">
+                    <div class="ftds-page-layout--title-container">
+                        ${(this.breadcrumb ? this.renderBreadcrumb() : html `
+                            <ft-typography class="ftds-page-layout--title"
+                                           variant="${FtTypographyVariants.title1}">
+                                ${this.title}
+                            </ft-typography>`)}
+                        ${this.renderPopover()}
+                        ${this.renderChip()}
+                    </div>
+                    ${this.subTitle ? html `
+                        <ft-typography class="ftds-page-layout--sub-title"
+                                       variant="${FtTypographyVariants.body2regular}">
+                            ${this.subTitle}
+                        </ft-typography>` : nothing}
+                </div>
+                <div class="ftds-page-layout--right-slot">
+                    <slot name="header-right"></slot>
+                </div>
+            </div>`;
+    }
+    renderFooter() {
+        return html `
+            <div ?hidden="${!this.footerHasContent}" class="ftds-page-layout--footer ftds-page-layout--child">
+                <div class="ftds-page-layout--left-slot">
+                    <slot name="footer-left" @slotchange=${this.onSlotChange}></slot>
+                </div>
+                <div class="ftds-page-layout--right-slot">
+                    <slot name="footer-right" @slotchange=${this.onSlotChange}></slot>
+                </div>
+            </div>
+        `;
+    }
+    renderChip() {
+        var _a;
+        return html `
+            <div class="ftds-page-layout--chips-container">
+                ${repeat((_a = this.chipsContent) !== null && _a !== void 0 ? _a : [], chip => html `
+                    <ftds-chip family="${chip.family}" icon="${chip.icon}">
+                        ${chip.label}
+                    </ftds-chip>`)}
+            </div>
+        `;
+    }
+    renderBreadcrumb() {
+        return html `
+            <nav aria-label="Title breadcrumb" class="ftds-page-layout--breadcrumb">
+                <ol>
+                    ${repeat(this.breadcrumb, (item, index) => html `
+                        <li>
+                            ${item.link ? html `
+                                <ftds-link href=${item.link} underlined target="_self" family=${DesignSystemFamily.brand} variant="${FtTypographyVariants.body2medium}">
+                                    ${item.label}
+                                </ftds-link>` : html `
+                                <ft-typography variant="${FtTypographyVariants.body2medium}" class="ftds-page-layout--breadcrumb-item">
+                                    ${item.label}
+                                </ft-typography>`}
+                        </li>`)}
+                    <li>
+                        <ft-typography class="ftds-page-layout--title"
+                                       aria-current="${ifDefined(this.breadcrumb ? "page" : undefined)}"
+                                       variant="${FtTypographyVariants.body2semibold}">
+                            ${this.title}
+                        </ft-typography>
+                    </li>
+                </ol>
+            </nav>
+        `;
+    }
+    renderPopover() {
+        return html `
+            <ftds-popover ?hidden=${!this.popoverHasContent} closeButtonLabel=${i18nContext.messages.popoverCloseButtonLabel()}
+                          openButtonLabel=${i18nContext.messages.popoverOpenButtonLabel()} openButtonTooltipPosition="bottom"
+                          openButtonFamily=${DesignSystemFamily.info} openButtonSize=${DesignSystemSize.medium}>
+                <slot name="popover-content" @slotchange=${this.onSlotChange}></slot>
+            </ftds-popover>`;
+    }
+    onSlotChange(e) {
+        const el = e.target;
+        switch (el.getAttribute("name")) {
+            case "popover-content":
+                this.popoverHasContent = this.popoverContent.length > 0;
+                break;
+            case "footer-right":
+            case "footer-left":
+                this.footerHasContent = this.footerLeftContent.length > 0 || this.footerRightContent.length > 0;
+                break;
+        }
+        e.stopPropagation();
+    }
+}
+FtdsPageLayout.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ftds-popover": FtdsPopover,
+    "ftds-chip": FtdsChip,
+    "ftds-link": FtdsLink,
+};
+FtdsPageLayout.styles = styles;
+__decorate([
+    property()
+], FtdsPageLayout.prototype, "title", void 0);
+__decorate([
+    property()
+], FtdsPageLayout.prototype, "breadcrumb", void 0);
+__decorate([
+    property()
+], FtdsPageLayout.prototype, "subTitle", void 0);
+__decorate([
+    property()
+], FtdsPageLayout.prototype, "chipsContent", void 0);
+__decorate([
+    state()
+], FtdsPageLayout.prototype, "footerHasContent", void 0);
+__decorate([
+    state()
+], FtdsPageLayout.prototype, "popoverHasContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "footer-left" })
+], FtdsPageLayout.prototype, "footerLeftContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "footer-right" })
+], FtdsPageLayout.prototype, "footerRightContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "popover-content" })
+], FtdsPageLayout.prototype, "popoverContent", void 0);
+export { FtdsPageLayout };

package/build/ftds-page-layout.properties.d.ts

@@ -0,0 +1,16 @@
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+export interface FtdsPageLayoutChipContent {
+    icon: string;
+    label: string;
+    family: DesignSystemFamily;
+}
+export interface FtdsPageLayoutBreadcrumbItem {
+    label: string;
+    link?: string;
+}
+export interface FtdsPageLayoutProperties {
+    title: string;
+    breadcrumb?: FtdsPageLayoutBreadcrumbItem[];
+    subTitle?: string;
+    chipsContent?: FtdsPageLayoutChipContent[];
+}

package/build/ftds-page-layout.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-page-layout.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const FtdsPageLayoutCssVariables: {
+    contentVerticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    contentHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ftds-page-layout.styles.js

@@ -0,0 +1,135 @@
+import { css } from "lit";
+import { FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
+import { pageFooter, pageHeader, titleBreadcrumb, typographies } from "@fluid-topics/design-system-variables";
+export const FtdsPageLayoutCssVariables = {
+    contentVerticalPadding: FtCssVariableFactory.create("--ft-page-layout--content-vertical-padding", "", "SIZE", "0"),
+    contentHorizontalPadding: FtCssVariableFactory.create("--ft-page-layout--content-horizontal-padding", "", "SIZE", "0"),
+};
+// language=CSS
+export const styles = css `
+    :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: ${pageHeader.backgroundColor};
+        color: ${pageHeader.parentTitleColor};
+        font-family: ${typographies["body-1-regular"].fontFamily}, system-ui, sans-serif;
+        font-size: ${typographies["body-1-regular"].fontSize};
+    }
+
+    .ftds-page-layout--left-slot {
+        flex-grow: 1;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    .ftds-page-layout--right-slot {
+        height: 100%;
+        display: flex;
+        gap: ${pageHeader.parentButtonsGroupVerticalGap} ${pageHeader.parentButtonsGroupHorizontalGap};
+        align-items: center;
+    }
+
+    .ftds-page-layout--child .ftds-page-layout--right-slot {
+        gap: ${pageHeader.childButtonsGroupVerticalGap} ${pageHeader.childButtonsGroupHorizontalGap};
+    }
+
+    /* HEADER */
+    .ftds-page-layout--header {
+        display: flex;
+        text-align: center;
+        min-height: ${pageHeader.childMinHeight};
+        border-bottom: ${pageHeader.bottomBorderWidth} solid ${pageHeader.bottomBorderColor};
+        padding: ${pageHeader.parentTopPadding} ${pageHeader.parentHorizontalPadding} ${pageHeader.parentBottomPadding};
+    }
+
+    .ftds-page-layout--header .ftds-page-layout--left-slot {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: ${pageHeader.parentVerticalGap}
+    }
+
+    .ftds-page-layout--header.ftds-page-layout--child {
+        min-height: ${pageHeader.childMinHeight};
+        padding: ${pageHeader.childTopPadding} ${pageHeader.childHorizontalPadding} ${pageHeader.childBottomPadding};
+    }
+
+    .ftds-page-layout--title-container {
+        display: flex;
+        align-items: center;
+    }
+
+    .ftds-page-layout--title {
+        color: ${pageHeader.parentTitleColor};
+    }
+
+    .ftds-page-layout--sub-title {
+        color: ${pageHeader.parentSubtitleColor};
+    }
+
+    ftds-popover {
+        margin-left: ${pageHeader.parentHelpLeftMargin};
+    }
+
+    .ftds-page-layout--chips-container {
+        margin-left: ${pageHeader.parentChipLeftMargin};
+        align-self: center;
+    }
+
+    /* BREADCRUMB */
+    nav.ftds-page-layout--breadcrumb {
+        display: flex;
+        gap: ${titleBreadcrumb.horizontalGap};
+        align-items: center;
+    }
+
+    nav.ftds-page-layout--breadcrumb ol {
+        margin: 0;
+        padding-left: 0;
+        list-style: none;
+    }
+
+    nav.ftds-page-layout--breadcrumb li {
+        display: inline;
+    }
+
+    nav.ftds-page-layout--breadcrumb ft-typography.ftds-page-layout--breadcrumb-item {
+        color: ${titleBreadcrumb.previousNonClickableColor};
+    }
+
+    nav.ftds-page-layout--breadcrumb li + li::before {
+        display: inline-block;
+        margin: 0 0.25em;
+        height: 0.8em;
+        content: ">";
+        color: ${titleBreadcrumb.iconColor};
+    }
+
+    nav.ftds-page-layout--breadcrumb .ftds-page-layout--title {
+        color: ${titleBreadcrumb.currentColor};
+        font-weight: 600;
+    }
+
+    /* MAIN */
+    main {
+        overflow: auto;
+        flex-grow: 1;
+        padding: ${FtdsPageLayoutCssVariables.contentVerticalPadding} ${FtdsPageLayoutCssVariables.contentHorizontalPadding};
+    }
+
+    /* FOOTER */
+    .ftds-page-layout--footer {
+        display: flex;
+        text-align: center;
+        min-height: ${pageFooter.minHeight};
+        border-top: ${pageFooter.topBorderWidth} solid ${pageFooter.topBorderColor};
+        padding: ${pageFooter.verticalPadding} ${pageFooter.horizontalPadding} ${pageFooter.verticalPadding} ${pageFooter.horizontalPadding}
+    }
+
+    .ftds-page-layout--footer[hidden] {
+        display: none;
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-page-layout.styles";
+export * from "./ftds-page-layout.properties";
+export * from "./ftds-page-layout";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsPageLayout } from "./ftds-page-layout";
+export * from "./ftds-page-layout.styles";
+export * from "./ftds-page-layout.properties";
+export * from "./ftds-page-layout";
+customElement("ftds-page-layout")(FtdsPageLayout);

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@fluid-topics/ft-page-layout",
+    "version": "1.2.0",
+    "description": "A page layout component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-page-layout.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/design-system-variables": "0.1.5",
+        "@fluid-topics/ft-wc-utils": "1.2.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.2.0"
+    },
+    "gitHead": "d1ed0b804f7bfe8e386c93c0b854cc4707d75377"
+}