igniteui-webcomponents 2.0.0-beta.1 → 2.1.0-beta.0

package/components/toast/themes/toast.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/toast/themes/toast.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);color:var(--igc-surface-500-contrast);background:hsla(var(--igc-surface-500), var(--igc-surface-a));outline:1px solid hsla(var(--igc-gray-300), var(--igc-gray-a));padding:.6875rem;-webkit-box-shadow:var(--igc-elevation-10);box-shadow:var(--igc-elevation-10)}`;
+//# sourceMappingURL=toast.bootstrap.css.js.map

package/components/toast/themes/toast.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/toast/themes/toast.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2UAA2U,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);color:var(--igc-surface-500-contrast);background:hsla(var(--igc-surface-500), var(--igc-surface-a));outline:1px solid hsla(var(--igc-gray-300), var(--igc-gray-a));padding:.6875rem;-webkit-box-shadow:var(--igc-elevation-10);box-shadow:var(--igc-elevation-10)}`;\n"]}

package/components/toast/themes/toast.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/toast/themes/toast.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{color:var(--igc-gray-100-contrast);background:hsla(var(--igc-gray-100), var(--igc-gray-a));padding:.5rem .75rem;border-radius:0}`;
+//# sourceMappingURL=toast.fluent.css.js.map

package/components/toast/themes/toast.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.fluent.css.js","sourceRoot":"","sources":["../../../../src/components/toast/themes/toast.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wIAAwI,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{color:var(--igc-gray-100-contrast);background:hsla(var(--igc-gray-100), var(--igc-gray-a));padding:.5rem .75rem;border-radius:0}`;\n"]}

package/components/toast/themes/toast.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/toast/themes/toast.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{border-radius:clamp(0rem,var(--igc-radius-factor)*.375rem,.375rem);color:var(--igc-gray-700-contrast);background:hsla(var(--igc-gray-700), var(--igc-gray-a));padding:.625rem 1rem}`;
+//# sourceMappingURL=toast.indigo.css.js.map

package/components/toast/themes/toast.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.indigo.css.js","sourceRoot":"","sources":["../../../../src/components/toast/themes/toast.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2LAA2L,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{border-radius:clamp(0rem,var(--igc-radius-factor)*.375rem,.375rem);color:var(--igc-gray-700-contrast);background:hsla(var(--igc-gray-700), var(--igc-gray-a));padding:.625rem 1rem}`;\n"]}

package/components/toast/toast.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * A toast component is used to show a notification
+ *
+ * @element igc-toast
+ *
+ * @csspart base - The base wrapper of the toast.
+ */
+export default class IgcToastComponent extends LitElement {
+    /** @private */
+    static tagName: string;
+    /** @private */
+    static styles: import("lit").CSSResult[];
+    private displayTimeout;
+    /** Determines whether the toast is opened. */
+    open: boolean;
+    /** Determines the time after which the toast will close */
+    displayTime: number;
+    /** Determines whether the toast is closed automatically or not. */
+    keepOpen: boolean;
+    /** Closes the toast. */
+    hide(): void;
+    /** Opens the toast. */
+    show(): void;
+    /** Toggles the open state of the toast. */
+    toggle(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-toast': IgcToastComponent;
+    }
+}

package/components/toast/toast.js

@@ -0,0 +1,64 @@
+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, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { themes } from '../../theming';
+import { styles } from './themes/toast.base.css';
+import { styles as bootstrap } from './themes/toast.bootstrap.css';
+import { styles as fluent } from './themes/toast.fluent.css';
+import { styles as indigo } from './themes/toast.indigo.css';
+let IgcToastComponent = class IgcToastComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.displayTime = 4000;
+        this.keepOpen = false;
+    }
+    hide() {
+        if (this.open) {
+            this.open = false;
+        }
+    }
+    show() {
+        window.clearTimeout(this.displayTimeout);
+        if (!this.open) {
+            this.open = true;
+        }
+        if (this.keepOpen === false) {
+            this.displayTimeout = setTimeout(() => {
+                this.open = false;
+            }, this.displayTime);
+        }
+    }
+    toggle() {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+IgcToastComponent.tagName = 'igc-toast';
+IgcToastComponent.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcToastComponent.prototype, "open", void 0);
+__decorate([
+    property({ type: Number, reflect: false, attribute: 'display-time' })
+], IgcToastComponent.prototype, "displayTime", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'keep-open' })
+], IgcToastComponent.prototype, "keepOpen", void 0);
+IgcToastComponent = __decorate([
+    themes({ bootstrap, fluent, indigo })
+], IgcToastComponent);
+export default IgcToastComponent;
+//# sourceMappingURL=toast.js.map

package/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAW7D,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAAzD;;QAWS,SAAI,GAAG,KAAK,CAAC;QAIb,gBAAW,GAAG,IAAI,CAAC;QAInB,aAAQ,GAAG,KAAK,CAAC;IAoC1B,CAAC;IAjCQ,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;IACH,CAAC;IAGM,IAAI;QACT,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEzC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;YAC3B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;gBACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SACtB;IACH,CAAC;IAGM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AArDe,yBAAO,GAAG,WAAY,CAAA;AAGb,wBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AAMzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACvB;AAIpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;sDAC5C;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAC3C;AAnBL,iBAAiB;IADrC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,iBAAiB,CAuDrC;eAvDoB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming';\nimport { styles } from './themes/toast.base.css';\nimport { styles as bootstrap } from './themes/toast.bootstrap.css';\nimport { styles as fluent } from './themes/toast.fluent.css';\nimport { styles as indigo } from './themes/toast.indigo.css';\n\n/**\n * A toast component is used to show a notification\n *\n * @element igc-toast\n *\n * @csspart base - The base wrapper of the toast.\n */\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcToastComponent extends LitElement {\n  /** @private */\n  public static tagName = 'igc-toast';\n\n  /** @private */\n  public static override styles = [styles];\n\n  private displayTimeout: any;\n\n  /** Determines whether the toast is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Determines the time after which the toast will close */\n  @property({ type: Number, reflect: false, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /** Determines whether the toast is closed automatically or not. */\n  @property({ type: Boolean, reflect: true, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /** Closes the toast. */\n  public hide() {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  /** Opens the toast. */\n  public show() {\n    window.clearTimeout(this.displayTimeout);\n\n    if (!this.open) {\n      this.open = true;\n    }\n\n    if (this.keepOpen === false) {\n      this.displayTimeout = setTimeout(() => {\n        this.open = false;\n      }, this.displayTime);\n    }\n  }\n\n  /** Toggles the open state of the toast. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toast': IgcToastComponent;\n  }\n}\n"]}