@fluid-topics/ft-notice 1.3.28 → 1.3.30

package/build/ft-notice.d.ts

@@ -1,8 +1,13 @@
-import { FtNoticeProperties } from "./ft-notice.properties";
-import { FtBaseNotice } from "./ft-base-notice";
+import { FtNoticeFamily, FtNoticeProperties } from "./ft-notice.properties";
 import { FtTypographyVariants } from "@fluid-topics/ft-typography";
-export declare class FtNotice extends FtBaseNotice implements FtNoticeProperties {
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export declare class FtNotice extends FtLitElement implements FtNoticeProperties {
+    static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    family: FtNoticeFamily;
+    dense: boolean;
+    icon?: string;
+    private iconByFamily;
+    protected render(): import("lit-html").TemplateResult<1>;
     get typographyVariant(): FtTypographyVariants;
-    get noticeClasses(): Record<string, boolean>;
 }

package/build/ft-notice.js

@@ -1,13 +1,61 @@
-import { FtBaseNotice } from "./ft-base-notice";
-import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+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 { FtNoticeFamily } from "./ft-notice.properties";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { styles } from "./ft-notice.styles";
-class FtNotice extends FtBaseNotice {
-    get typographyVariant() {
-        return FtTypographyVariants.body2;
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+class FtNotice extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.family = FtNoticeFamily.info;
+        this.dense = false;
+        this.iconByFamily = {
+            [FtNoticeFamily.info]: FtIcons.SQUARE_INFO_SOLID,
+            [FtNoticeFamily.warning]: FtIcons.WARNING,
+            [FtNoticeFamily.error]: FtIcons.CLOSE_PLAIN,
+            [FtNoticeFamily.success]: FtIcons.CHECK_PLAIN,
+        };
+    }
+    render() {
+        const classes = {
+            [this.family]: true,
+            dense: this.dense,
+        };
+        return html `
+            <div class="${classMap(classes)}" part="container">
+                <div part="icon">
+                    <ft-icon value="${this.icon || this.iconByFamily[this.family]}"></ft-icon>
+                </div>
+                <ft-typography part="label" variant="${this.typographyVariant}">
+                    <slot></slot>
+                </ft-typography>
+            </div>
+        `;
     }
-    get noticeClasses() {
-        return {};
+    get typographyVariant() {
+        return this.dense ? FtTypographyVariants.caption : FtTypographyVariants.body2;
     }
 }
+FtNotice.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-typography": FtTypography,
+};
 FtNotice.styles = styles;
+__decorate([
+    property()
+], FtNotice.prototype, "family", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtNotice.prototype, "dense", void 0);
+__decorate([
+    property({ type: String })
+], FtNotice.prototype, "icon", void 0);
 export { FtNotice };