@fluid-topics/ft-notice 2.0.38 → 2.1.1

package/build/ft-notice.styles.d.ts

@@ -1,13 +1,13 @@
 export declare const FtNoticeCssVariables: {
-    noticeColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    noticeLabelColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    noticeIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    denseIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    infoColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    warningColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    errorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    successColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    noticeColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    noticeLabelColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    noticeIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    denseIconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    infoColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    warningColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    errorColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    successColor: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

package/build/index.d.ts

@@ -1,7 +1,4 @@
 export * from "./ft-notice";
 export * from "./ft-notice.styles";
 export * from "./ft-notice.properties";
-export * from "./ftds-notice";
-export * from "./ftds-notice.styles";
-export * from "./ftds-notice.properties";
 import "./define";

package/build/index.js

@@ -1,7 +1,4 @@
 export * from "./ft-notice";
 export * from "./ft-notice.styles";
 export * from "./ft-notice.properties";
-export * from "./ftds-notice";
-export * from "./ftds-notice.styles";
-export * from "./ftds-notice.properties";
 import "./define";

package/package.json

@@ -1,29 +1,29 @@
 {
-    "name": "@fluid-topics/ft-notice",
-    "version": "2.0.38",
-    "description": "Notice to display different messages",
-    "keywords": [
-        "Lit"
-    ],
-    "author": "Fluid Topics <devtopics@antidot.net>",
-    "license": "ISC",
-    "main": "build/index.js",
-    "web": "build/ft-notice.min.js",
-    "typings": "build/index",
-    "files": [
-        "build/**/*.ts",
-        "build/**/*.js"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
-    },
-    "dependencies": {
-        "@fluid-topics/design-system-variables": "3.4.1",
-        "@fluid-topics/ft-icon": "2.0.38",
-        "@fluid-topics/ft-typography": "2.0.38",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
-        "lit": "3.1.0"
-    },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+  "name": "@fluid-topics/ft-notice",
+  "version": "2.1.1",
+  "description": "Notice to display different messages",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/index.js",
+  "web": "build/ft-notice.min.js",
+  "typings": "build/index",
+  "files": [
+    "build/**/*.ts",
+    "build/**/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "dependencies": {
+    "@fluid-topics/design-system-variables": "3.5.0",
+    "@fluid-topics/ft-icon": "2.1.1",
+    "@fluid-topics/ft-typography": "2.1.1",
+    "@fluid-topics/ft-wc-utils": "2.1.1",
+    "lit": "3.1.0"
+  },
+  "gitHead": "a9f1e471fb2dba9aeb8c12394a25460f675597dc"
 }

package/build/ftds-notice.d.ts

@@ -1,18 +0,0 @@
-import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-import { FtdsNoticeProperties, FtdsNoticeVariant } from "./ftds-notice.properties";
-import { PropertyValues } from "lit";
-import { DesignSystemFamily, ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
-export declare class FtdsNotice extends FtdsBase implements FtdsNoticeProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult;
-    collapsible: boolean;
-    dense: boolean;
-    icon?: string;
-    family: DesignSystemFamily;
-    variant?: FtdsNoticeVariant;
-    forcedIcon?: string;
-    private iconByFamily;
-    protected willUpdate(props: PropertyValues): void;
-    protected render(): import("lit-html").TemplateResult<1>;
-    get typographyVariant(): FtdsTypographyVariants;
-}

package/build/ftds-notice.js

@@ -1,94 +0,0 @@
-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 { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-import { FtdsNoticeVariant } from "./ftds-notice.properties";
-import { dsStyles } from "./ftds-notice.styles";
-import { property } from "lit/decorators.js";
-import { html } from "lit";
-import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
-import { classMap } from "lit/directives/class-map.js";
-import { DesignSystemFamily, FtdsBase } from "@fluid-topics/ft-wc-utils";
-export class FtdsNotice extends FtdsBase {
-    constructor() {
-        super(...arguments);
-        this.collapsible = false;
-        this.dense = false;
-        // Override default value
-        this.family = DesignSystemFamily.info;
-        this.iconByFamily = {
-            [DesignSystemFamily.error]: FtIcons.CLOSE_PLAIN,
-            [DesignSystemFamily.info]: FtIcons.INFO,
-            [DesignSystemFamily.success]: FtIcons.CHECK_PLAIN,
-            [DesignSystemFamily.warning]: FtIcons.WARNING,
-        };
-    }
-    willUpdate(props) {
-        super.willUpdate(props);
-        if (props.has("variant") && this.variant) {
-            switch (this.variant) {
-                case FtdsNoticeVariant.info:
-                    this.family = DesignSystemFamily.info;
-                    break;
-                case FtdsNoticeVariant.success:
-                    this.family = DesignSystemFamily.success;
-                    break;
-                case FtdsNoticeVariant.warning:
-                    this.family = DesignSystemFamily.warning;
-                    break;
-                case FtdsNoticeVariant.error:
-                    this.family = DesignSystemFamily.error;
-                    break;
-            }
-        }
-        if (props.has("forcedIcon") && this.forcedIcon) {
-            this.icon = this.forcedIcon;
-        }
-    }
-    render() {
-        const classes = {
-            "ftds-notice--collapsible": this.collapsible,
-            "ftds-notice--dense": this.dense,
-            ...this.getDesignSystemBaseClasses(),
-        };
-        return html `
-            <div class="${classMap(classes)}" part="container">
-                <div part="icon">
-                    <ft-icon value="${this.icon || this.iconByFamily[this.family]}"></ft-icon>
-                </div>
-                <ftds-typography part="label" variant="${this.typographyVariant}">
-                    <slot></slot>
-                </ftds-typography>
-            </div>
-        `;
-    }
-    get typographyVariant() {
-        return this.dense ? FtdsTypographyVariants.caption1medium : FtdsTypographyVariants.body2regular;
-    }
-}
-FtdsNotice.elementDefinitions = {
-    "ft-icon": FtIcon,
-    "ftds-typography": FtdsTypography,
-};
-FtdsNotice.styles = dsStyles;
-__decorate([
-    property({ type: Boolean })
-], FtdsNotice.prototype, "collapsible", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsNotice.prototype, "dense", void 0);
-__decorate([
-    property({ type: String })
-], FtdsNotice.prototype, "icon", void 0);
-__decorate([
-    property()
-], FtdsNotice.prototype, "family", void 0);
-__decorate([
-    property()
-], FtdsNotice.prototype, "variant", void 0);
-__decorate([
-    property()
-], FtdsNotice.prototype, "forcedIcon", void 0);

package/build/ftds-notice.properties.d.ts

@@ -1,17 +0,0 @@
-import { FtdsBaseProperties } from "@fluid-topics/ft-wc-utils";
-/** @deprecated */
-export declare enum FtdsNoticeVariant {
-    info = "info",
-    warning = "warning",
-    error = "error",
-    success = "success"
-}
-export interface FtdsNoticeProperties extends Omit<FtdsBaseProperties, "size"> {
-    collapsible: boolean;
-    dense: boolean;
-    icon?: string;
-    /** @deprecated */
-    variant?: FtdsNoticeVariant;
-    /** @deprecated */
-    forcedIcon?: string;
-}

package/build/ftds-notice.properties.js

@@ -1,8 +0,0 @@
-/** @deprecated */
-export var FtdsNoticeVariant;
-(function (FtdsNoticeVariant) {
-    FtdsNoticeVariant["info"] = "info";
-    FtdsNoticeVariant["warning"] = "warning";
-    FtdsNoticeVariant["error"] = "error";
-    FtdsNoticeVariant["success"] = "success";
-})(FtdsNoticeVariant || (FtdsNoticeVariant = {}));

package/build/ftds-notice.styles.d.ts

@@ -1,2 +0,0 @@
-export { notice as FtdsNoticeCssVariables } from "@fluid-topics/design-system-variables";
-export declare const dsStyles: import("lit").CSSResult;

package/build/ftds-notice.styles.js

@@ -1,85 +0,0 @@
-import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
-import { css } from "lit";
-import { notice } from "@fluid-topics/design-system-variables";
-export { notice as FtdsNoticeCssVariables } from "@fluid-topics/design-system-variables";
-// language=CSS
-export const dsStyles = css `
-    [part="container"] {
-        display: inline-flex;
-        align-items: flex-start;
-        box-sizing: border-box;
-        border-width: ${notice.borderWidth};
-        border-style: solid;
-        border-radius: ${notice.borderRadius};
-        padding: ${notice.verticalPadding} ${notice.horizontalPadding};
-        gap: ${notice.gap};
-
-        ${FtIconCssVariables.size.set(notice.iconSize)};
-
-        &.ftds-notice--dense {
-            background-color: transparent;
-            border: ${notice.denseBorderWidth};
-            font-size: 16px;
-            gap: ${notice.denseGap};
-            padding: ${notice.denseVerticalPadding} ${notice.denseHorizontalPadding};
-
-            ${FtIconCssVariables.size.set(notice.denseIconSize)};
-        }
-    }
-
-    [part="icon"] {
-        align-self: baseline;
-        display: flex;
-        align-items: flex-start;
-    }
-
-    .ftds-notice--collapsible [part="label"] {
-        display: none;
-    }
-
-    .ftds-notice--collapsible:hover [part="label"] {
-        display: initial;
-    }
-
-    /** Family styles **/
-
-    .ftds--family-info {
-        color: ${notice.infoColor};
-        border-color: ${notice.infoBorderColor};
-        background-color: ${notice.infoBackgroundColor};
-
-        [part="icon"] {
-            color: ${notice.infoIconColor};
-        }
-    }
-
-    .ftds--family-warning {
-        color: ${notice.warningColor};
-        border-color: ${notice.warningBorderColor};
-        background-color: ${notice.warningBackgroundColor};
-
-        [part="icon"] {
-            color: ${notice.warningIconColor};
-        }
-    }
-
-    .ftds--family-error {
-        color: ${notice.errorColor};
-        border-color: ${notice.errorBorderColor};
-        background-color: ${notice.errorBackgroundColor};
-
-        [part="icon"] {
-            color: ${notice.errorIconColor};
-        }
-    }
-
-    .ftds--family-success {
-        color: ${notice.successColor};
-        border-color: ${notice.successBorderColor};
-        background-color: ${notice.successBackgroundColor};
-
-        [part="icon"] {
-            color: ${notice.successIconColor};
-        }
-    }
-`;