igniteui-webcomponents 1.0.0-beta.1 → 1.0.0

package/README.md

@@ -2,18 +2,47 @@
 
 [![Node.js CI](https://github.com/IgniteUI/igniteui-webcomponents/workflows/Node.js%20CI/badge.svg)](https://github.com/IgniteUI/igniteui-webcomponents/actions/workflows/node.js.yml)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-webcomponents/badge.svg)](https://coveralls.io/github/IgniteUI/igniteui-webcomponents)
+[![npm version](https://badge.fury.io/js/igniteui-webcomponents.svg)](https://badge.fury.io/js/igniteui-webcomponents)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
 [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
 
 ## Usage
 
-TODO:
+In order to use the Ignite UI Web Components in your application you should install the `igniteui-webcomponents` package:
 
+```
+npm install igniteui-webcomponents
+```
+
+Next you will need to import the components that you want to use. You could import one or more components using the `defineComponents` function like this:
+
+```ts
+import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcAvatarComponent, IgcBadgeComponent);
+```
+
+You could also import all of the components using the `defineAllComponents` function:
+
+```ts
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+```
+
+Please note that importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.
+
+After the components are imported you could use them in your html:
+
+```html
+<igc-avatar initials="AZ"></igc-avatar>
+<igc-badge></igc-badge>
+```
 
 ## Setup
 
-From the root folder run:
+In order to run the repository locally from the root folder run:
 
 ```
 npm install

package/components/avatar/avatar.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 declare const IgcAvatarComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/sizable.js").SizableInterface> & typeof LitElement;
 export default class IgcAvatarComponent extends IgcAvatarComponent_base {
+    static tagName: string;
     static styles: import("lit").CSSResult[];
     src: string;
     private hasError;
@@ -9,6 +10,7 @@ export default class IgcAvatarComponent extends IgcAvatarComponent_base {
     shape: 'circle' | 'rounded' | 'square';
     private get classes();
     constructor();
+    protected handleErrorState(): void;
     protected render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAqBvC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,uBAAwB;IAEtE,OAAc,MAAM,4BAAY;IAIzB,GAAG,EAAG,MAAM,CAAC;IAGpB,OAAO,CAAC,QAAQ,CAAS;IAIlB,GAAG,EAAG,MAAM,CAAC;IAIb,QAAQ,EAAG,MAAM,CAAC;IAIlB,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAY;IAEzD,OAAO,KAAK,OAAO,GAWlB;;IAOD,SAAS,CAAC,MAAM;CAyBjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAqBvC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,uBAAwB;IAEtE,OAAc,OAAO,SAAgB;IAGrC,OAAc,MAAM,4BAAY;IAIzB,GAAG,EAAG,MAAM,CAAC;IAGpB,OAAO,CAAC,QAAQ,CAAS;IAIlB,GAAG,EAAG,MAAM,CAAC;IAIb,QAAQ,EAAG,MAAM,CAAC;IAIlB,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAY;IAEzD,OAAO,KAAK,OAAO,GAWlB;;IAQD,SAAS,CAAC,gBAAgB;IAI1B,SAAS,CAAC,MAAM;CAyBjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}

package/components/avatar/avatar.js

@@ -5,12 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../common/decorators/watch.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
 import { styles } from './avatar.material.css';
-let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElement) {
+export default class IgcAvatarComponent extends SizableMixin(LitElement) {
     constructor() {
         super();
         this.hasError = false;
@@ -28,6 +29,9 @@ let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElemen
             large: size === 'large',
         };
     }
+    handleErrorState() {
+        this.hasError = false;
+    }
     render() {
         return html `
       <div
@@ -53,7 +57,8 @@ let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElemen
       </div>
     `;
     }
-};
+}
+IgcAvatarComponent.tagName = 'igc-avatar';
 IgcAvatarComponent.styles = [styles];
 __decorate([
     property()
@@ -70,8 +75,7 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcAvatarComponent.prototype, "shape", void 0);
-IgcAvatarComponent = __decorate([
-    customElement('igc-avatar')
-], IgcAvatarComponent);
-export default IgcAvatarComponent;
+__decorate([
+    watch('src')
+], IgcAvatarComponent.prototype, "handleErrorState", null);
 //# sourceMappingURL=avatar.js.map

package/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAgB/C,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAoCtE;QACE,KAAK,EAAE,CAAC;QA5BF,aAAQ,GAAG,KAAK,CAAC;QAYlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAhBD,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAOS,MAAM;QACd,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AAhEe,yBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AAIhC;IADC,QAAQ,EAAE;+CACS;AAGpB;IADC,KAAK,EAAE;oDACiB;AAIzB;IADC,QAAQ,EAAE;+CACS;AAIpB;IADC,QAAQ,EAAE;oDACc;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AArBtC,kBAAkB;IADtC,aAAa,CAAC,YAAY,CAAC;GACP,kBAAkB,CAkEtC;eAlEoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './avatar.material.css';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\n@customElement('igc-avatar')\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  /** @private */\n  public static styles = [styles];\n\n  /** The image source to use. */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /** Alternative text for the image. */\n  @property()\n  public alt!: string;\n\n  /** Initials to use as a fallback when no image is available. */\n  @property()\n  public initials!: string;\n\n  /** The shape of the avatar. */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  protected render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAe/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAuCtE;QACE,KAAK,EAAE,CAAC;QA5BF,aAAQ,GAAG,KAAK,CAAC;QAYlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAhBD,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAQS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAvEa,0BAAO,GAAG,YAAY,CAAC;AAGvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,EAAE;+CACS;AAGpB;IADC,KAAK,EAAE;oDACiB;AAIzB;IADC,QAAQ,EAAE;+CACS;AAIpB;IADC,QAAQ,EAAE;oDACc;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAqBzD;IADC,KAAK,CAAC,KAAK,CAAC;0DAGZ","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './avatar.material.css';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  /** @private */\n  public static tagName = 'igc-avatar';\n\n  /** @private */\n  public static styles = [styles];\n\n  /** The image source to use. */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /** Alternative text for the image. */\n  @property()\n  public alt!: string;\n\n  /** Initials to use as a fallback when no image is available. */\n  @property()\n  public initials!: string;\n\n  /** The shape of the avatar. */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

package/components/badge/badge.d.ts

@@ -1,10 +1,10 @@
 import { LitElement } from 'lit';
 export default class IgcBadgeComponent extends LitElement {
+    static tagName: string;
     static styles: import("lit").CSSResult;
     variant?: 'primary' | 'info' | 'success' | 'warning' | 'danger';
     outlined: boolean;
     shape?: 'rounded' | 'square';
-    private get classes();
     protected render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAgBvC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;IAEvD,OAAc,MAAM,0BAAU;IAIvB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAC1D;IAIL,QAAQ,UAAS;IAIjB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAa;IAEhD,OAAO,KAAK,OAAO,GAalB;IAED,SAAS,CAAC,MAAM;CAYjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;IAEvD,OAAc,OAAO,SAAe;IAGpC,OAAc,MAAM,0BAAU;IAIvB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAC1D;IAIL,QAAQ,UAAS;IAIjB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAa;IAEhD,SAAS,CAAC,MAAM;CAOjB;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

package/components/badge/badge.js

@@ -5,42 +5,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
 import { styles } from './badge.material.css';
-let IgcBadgeComponent = class IgcBadgeComponent extends LitElement {
+export default class IgcBadgeComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.variant = 'primary';
         this.outlined = false;
         this.shape = 'rounded';
     }
-    get classes() {
-        const { shape, variant } = this;
-        return {
-            primary: variant === 'primary',
-            info: variant === 'info',
-            success: variant === 'success',
-            warning: variant === 'warning',
-            danger: variant === 'danger',
-            rounded: shape === 'rounded',
-            square: shape === 'square',
-            outlined: this.outlined,
-        };
-    }
     render() {
         return html `
-      <span
-        part="base"
-        class=${classMap(this.classes)}
-        role="img"
-        aria-label="badge"
-      >
+      <span part="base" role="img" aria-label="badge">
         <slot></slot>
       </span>
     `;
     }
-};
+}
+IgcBadgeComponent.tagName = 'igc-badge';
 IgcBadgeComponent.styles = styles;
 __decorate([
     property({ reflect: true })
@@ -51,8 +33,4 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], IgcBadgeComponent.prototype, "shape", void 0);
-IgcBadgeComponent = __decorate([
-    customElement('igc-badge')
-], IgcBadgeComponent);
-export default IgcBadgeComponent;
 //# sourceMappingURL=badge.js.map

package/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAa9C,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAAzD;;QAMS,YAAO,GACZ,SAAS,CAAC;QAIL,aAAQ,GAAG,KAAK,CAAC;QAIjB,UAAK,GAA0B,SAAS,CAAC;IA6BlD,CAAC;IA3BC,IAAY,OAAO;QACjB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAEhC,OAAO;YACL,OAAO,EAAE,OAAO,KAAK,SAAS;YAC9B,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,OAAO,EAAE,OAAO,KAAK,SAAS;YAC9B,OAAO,EAAE,OAAO,KAAK,SAAS;YAC9B,MAAM,EAAE,OAAO,KAAK,QAAQ;YAC5B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;KAMjC,CAAC;IACJ,CAAC;CACF,CAAA;AA1Ce,wBAAM,GAAG,MAAO,CAAA;AAI9B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAEhB;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACoB;AAf7B,iBAAiB;IADrC,aAAa,CAAC,WAAW,CAAC;GACN,iBAAiB,CA4CrC;eA5CoB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './badge.material.css';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\n@customElement('igc-badge')\nexport default class IgcBadgeComponent extends LitElement {\n  /** @private */\n  public static styles = styles;\n\n  /** The type of badge. */\n  @property({ reflect: true })\n  public variant?: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    'primary';\n\n  /** Sets whether to draw an outlined version of the badge. */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /** The shape of the badge. */\n  @property({ reflect: true })\n  public shape?: 'rounded' | 'square' = 'rounded';\n\n  private get classes() {\n    const { shape, variant } = this;\n\n    return {\n      primary: variant === 'primary',\n      info: variant === 'info',\n      success: variant === 'success',\n      warning: variant === 'warning',\n      danger: variant === 'danger',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      outlined: this.outlined,\n    };\n  }\n\n  protected render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap(this.classes)}\n        role=\"img\"\n        aria-label=\"badge\"\n      >\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.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,sBAAsB,CAAC;AAY9C,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,UAAU;IAAzD;;QASS,YAAO,GACZ,SAAS,CAAC;QAIL,aAAQ,GAAG,KAAK,CAAC;QAIjB,UAAK,GAA0B,SAAS,CAAC;IASlD,CAAC;IAPW,MAAM;QACd,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAxBa,yBAAO,GAAG,WAAW,CAAC;AAGtB,wBAAM,GAAG,MAAM,CAAC;AAI9B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAEhB;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACoB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './badge.material.css';\n\n/**\n * The badge is a component indicating a status on a related item or an area\n * where some active indication is required.\n *\n * @element igc-badge\n *\n * @slot - Default slot for the badge.\n *\n * @csspart base - The base wrapper of the badge.\n */\nexport default class IgcBadgeComponent extends LitElement {\n  /** @private */\n  public static tagName = 'igc-badge';\n\n  /** @private */\n  public static styles = styles;\n\n  /** The type of badge. */\n  @property({ reflect: true })\n  public variant?: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    'primary';\n\n  /** Sets whether to draw an outlined version of the badge. */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /** The shape of the badge. */\n  @property({ reflect: true })\n  public shape?: 'rounded' | 'square' = 'rounded';\n\n  protected render() {\n    return html`\n      <span part=\"base\" role=\"img\" aria-label=\"badge\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\n// export const badgeDefinition: IgcComponentDefinition = {\n//   tag: 'igc-badge',\n//   component: IgcBadgeComponent,\n// };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-badge': IgcBadgeComponent;\n  }\n}\n"]}

package/components/badge/badge.material.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.material.css.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.material.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAAi6C,CAAC"}
+{"version":3,"file":"badge.material.css.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.material.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAAyqD,CAAC"}

package/components/badge/badge.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:.75rem;min-height:.75rem;max-height:1.5rem;font-size:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family)}:host(:not(:empty)) span{padding:.25rem .5rem;min-width:1.5rem}.rounded{border-radius:.75rem}.square{border-radius:0}.primary{background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}.info{background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}.success{background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}.warning{background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}.danger{background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}.outlined{-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;--size: 0.75rem;font-weight:500}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);max-height:calc(var(--size)*2);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family);font-size:var(--igc-subtitle-1-font-size);font-weight:inherit}:host(:not(:empty)) [part=base]{padding:.25rem .5rem;min-width:calc(var(--size)*2)}:host([variant=primary]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=info]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=success]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=warning]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=danger]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([shape=rounded]){border-radius:var(--size)}:host([shape=square]){border-radius:0}:host([outlined]){-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;
 //# sourceMappingURL=badge.material.css.js.map

package/components/badge/badge.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.material.css.js","sourceRoot":"","sources":["../../../src/components/badge/badge.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,25CAA25C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:.75rem;min-height:.75rem;max-height:1.5rem;font-size:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family)}:host(:not(:empty)) span{padding:.25rem .5rem;min-width:1.5rem}.rounded{border-radius:.75rem}.square{border-radius:0}.primary{background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}.info{background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}.success{background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}.warning{background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}.danger{background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}.outlined{-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;\n"]}
+{"version":3,"file":"badge.material.css.js","sourceRoot":"","sources":["../../../src/components/badge/badge.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mqDAAmqD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;--size: 0.75rem;font-weight:500}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);max-height:calc(var(--size)*2);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--igc-font-family);font-size:var(--igc-subtitle-1-font-size);font-weight:inherit}:host(:not(:empty)) [part=base]{padding:.25rem .5rem;min-width:calc(var(--size)*2)}:host([variant=primary]){background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast)}:host([variant=info]){background:hsla(var(--igc-info-500), var(--igc-info-a));color:var(--igc-info-500-contrast)}:host([variant=success]){background:hsla(var(--igc-success-500), var(--igc-success-a));color:var(--igc-success-500-contrast)}:host([variant=warning]){background:hsla(var(--igc-warn-500), var(--igc-warn-a));color:var(--igc-warn-500-contrast)}:host([variant=danger]){background:hsla(var(--igc-error-500), var(--igc-error-a));color:var(--igc-error-500-contrast)}:host([shape=rounded]){border-radius:var(--size)}:host([shape=square]){border-radius:0}:host([outlined]){-webkit-box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a));box-shadow:inset 0 0 0 .125rem hsla(var(--igc-gray-50), var(--igc-gray-a))}`;\n"]}

package/components/button/button-base.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
 export interface IgcButtonEventMap {
     igcFocus: CustomEvent<void>;
@@ -6,26 +6,22 @@ export interface IgcButtonEventMap {
 }
 declare const IgcButtonBaseComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & Constructor<import("../common//mixins/event-emitter.js").EventEmitterInterface<IgcButtonEventMap>> & Constructor<LitElement>;
 export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseComponent_base {
-    static styles: import("lit").CSSResult[];
     private nativeElement;
+    type: 'button' | 'reset' | 'submit';
+    href: string;
+    download: string;
+    target: '_blank' | '_parent' | '_self' | '_top' | undefined;
+    rel: string;
     disabled: boolean;
-    variant: 'flat' | 'contained' | 'outlined' | 'fab';
     focus(options?: FocusOptions): void;
     blur(): void;
     protected handleFocus(): void;
     protected handleBlur(): void;
-    protected get classes(): {
-        native: boolean;
-        flat: boolean;
-        outlined: boolean;
-        contained: boolean;
-        fab: boolean;
-        small: boolean;
-        medium: boolean;
-        large: boolean;
-        disabled: boolean;
-    };
-    protected renderContent(): import("lit").TemplateResult<1>;
+    protected get classes(): {};
+    private renderButton;
+    private renderLinkButton;
+    protected abstract renderContent(): TemplateResult;
+    protected render(): TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=button-base.d.ts.map

package/components/button/button-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAI9D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC5B;;AAED,8BAAsB,sBAAuB,SAAQ,2BAEpD;IAIC,OAAc,MAAM,4BAAY;IAMhC,OAAO,CAAC,aAAa,CAAe;IAM7B,QAAQ,UAAS;IAIjB,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,KAAK,CAAU;IAI5D,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,IAAI;IAIX,SAAS,CAAC,WAAW;IAIrB,SAAS,CAAC,UAAU;IAIpB,SAAS,KAAK,OAAO;;;;;;;;;;MAcpB;IAED,SAAS,CAAC,aAAa;CAWxB"}
+{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG9D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC5B;;AAED,8BAAsB,sBAAuB,SAAQ,2BAEpD;IAKC,OAAO,CAAC,aAAa,CAAe;IAO7B,IAAI,EAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAIrC,IAAI,EAAG,MAAM,CAAC;IAId,QAAQ,EAAG,MAAM,CAAC;IAIlB,MAAM,EAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAO7D,GAAG,EAAG,MAAM,CAAC;IAMb,QAAQ,UAAS;IAIjB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,IAAI;IAIX,SAAS,CAAC,WAAW;IAIrB,SAAS,CAAC,UAAU;IAIpB,SAAS,KAAK,OAAO,OAEpB;IAED,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,gBAAgB;IAmBxB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAElD,SAAS,CAAC,MAAM;CAIjB"}

package/components/button/button-base.js

@@ -6,15 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { alternateName } from '../common/decorators';
 import { SizableMixin } from '../common/mixins/sizable.js';
-import { styles } from './button.material.css';
 export class IgcButtonBaseComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
     constructor() {
         super(...arguments);
         this.disabled = false;
-        this.variant = 'flat';
     }
     focus(options) {
         this.nativeElement.focus(options);
@@ -29,41 +29,67 @@ export class IgcButtonBaseComponent extends SizableMixin(EventEmitterMixin(LitEl
         this.emitEvent('igcBlur');
     }
     get classes() {
-        const { size, variant } = this;
-        return {
-            native: true,
-            flat: variant === 'flat',
-            outlined: variant === 'outlined',
-            contained: variant === 'contained',
-            fab: variant === 'fab',
-            small: size === 'small',
-            medium: size === 'medium',
-            large: size === 'large',
-            disabled: this.disabled,
-        };
+        return {};
     }
-    renderContent() {
+    renderButton() {
         return html `
-      <span part="prefix">
-        <slot name="prefix"></slot>
-      </span>
-      <slot></slot>
-      <span part="suffix">
-        <slot name="suffix"></slot>
-      </span>
+      <button
+        part="base"
+        .disabled=${this.disabled}
+        class=${classMap(this.classes)}
+        type=${ifDefined(this.type)}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        ${this.renderContent()}
+      </button>
     `;
     }
+    renderLinkButton() {
+        return html `
+      <a
+        part="base"
+        role="button"
+        href=${ifDefined(this.href)}
+        target=${ifDefined(this.target)}
+        download=${ifDefined(this.download)}
+        rel=${ifDefined(this.rel)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        class=${classMap(this.classes)}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+    }
+    render() {
+        const link = this.href !== undefined;
+        return link ? this.renderLinkButton() : this.renderButton();
+    }
 }
-IgcButtonBaseComponent.styles = [styles];
 __decorate([
-    query('.native', true)
+    query('[part="base"]', true)
 ], IgcButtonBaseComponent.prototype, "nativeElement", void 0);
+__decorate([
+    alternateName('displayType'),
+    property()
+], IgcButtonBaseComponent.prototype, "type", void 0);
+__decorate([
+    property()
+], IgcButtonBaseComponent.prototype, "href", void 0);
+__decorate([
+    property()
+], IgcButtonBaseComponent.prototype, "download", void 0);
+__decorate([
+    property()
+], IgcButtonBaseComponent.prototype, "target", void 0);
+__decorate([
+    property()
+], IgcButtonBaseComponent.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcButtonBaseComponent.prototype, "disabled", void 0);
-__decorate([
-    property({ reflect: true })
-], IgcButtonBaseComponent.prototype, "variant", void 0);
 __decorate([
     alternateName('focusComponent')
 ], IgcButtonBaseComponent.prototype, "focus", null);

package/components/button/button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAO/C,MAAM,OAAgB,sBAAuB,SAAQ,YAAY,CAC/D,iBAAiB,CAA6C,UAAU,CAAC,CAC1E;IAFD;;QAkBS,aAAQ,GAAG,KAAK,CAAC;QAIjB,YAAO,GAA8C,MAAM,CAAC;IAiDrE,CAAC;IA7CQ,KAAK,CAAC,OAAsB;QACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIM,IAAI;QACT,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC;IAED,IAAc,OAAO;QACnB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAhEa,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMhC;IADC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;6DACa;AAMpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACuC;AAInE;IADC,aAAa,CAAC,gBAAgB,CAAC;mDAG/B;AAID;IADC,aAAa,CAAC,eAAe,CAAC;kDAG9B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { alternateName } from '../common/decorators';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './button.material.css';\n\nexport interface IgcButtonEventMap {\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\nexport abstract class IgcButtonBaseComponent extends SizableMixin(\n  EventEmitterMixin<IgcButtonEventMap, Constructor<LitElement>>(LitElement)\n) {\n  /**\n   * @private\n   */\n  public static styles = [styles];\n\n  /**\n   * @private\n   */\n  @query('.native', true)\n  private nativeElement!: HTMLElement;\n\n  /**\n   * Determines whether the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Sets the variant of the button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'flat';\n\n  /** Sets focus in the button. */\n  @alternateName('focusComponent')\n  public focus(options?: FocusOptions) {\n    this.nativeElement.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @alternateName('blurComponent')\n  public blur() {\n    this.nativeElement.blur();\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  protected get classes() {\n    const { size, variant } = this;\n\n    return {\n      native: true,\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <span part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <slot></slot>\n      <span part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAO3D,MAAM,OAAgB,sBAAuB,SAAQ,YAAY,CAC/D,iBAAiB,CAA6C,UAAU,CAAC,CAC1E;IAFD;;QAuCS,aAAQ,GAAG,KAAK,CAAC;IAkE1B,CAAC;IA9DQ,KAAK,CAAC,OAAsB;QACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIM,IAAI;QACT,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC;IAED,IAAc,OAAO;QACnB,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,QAAQ;gBACjB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;eACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAA;;;;eAIA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;mBACpB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;cAC7B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBACxC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;iBACrB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAIS,MAAM;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;QACrC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;IAC9D,CAAC;CACF;AAlGC;IADC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC;6DACO;AAOpC;IAFC,aAAa,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE;oDACiC;AAI5C;IADC,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;wDACc;AAIzB;IADC,QAAQ,EAAE;sDACyD;AAOpE;IADC,QAAQ,EAAE;mDACS;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACnB;AAIxB;IADC,aAAa,CAAC,gBAAgB,CAAC;mDAG/B;AAID;IADC,aAAa,CAAC,eAAe,CAAC;kDAG9B","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { alternateName } from '../common/decorators';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\n\nexport interface IgcButtonEventMap {\n  igcFocus: CustomEvent<void>;\n  igcBlur: CustomEvent<void>;\n}\n\nexport abstract class IgcButtonBaseComponent extends SizableMixin(\n  EventEmitterMixin<IgcButtonEventMap, Constructor<LitElement>>(LitElement)\n) {\n  /**\n   * @private\n   */\n  @query('[part=\"base\"]', true)\n  private nativeElement!: HTMLElement;\n\n  /**\n   * The type of the button. Defaults to undefined.\n   */\n  @alternateName('displayType')\n  @property()\n  public type!: 'button' | 'reset' | 'submit';\n\n  /** The URL the button points to. */\n  @property()\n  public href!: string;\n\n  /** Prompts to save the linked URL instead of navigating to it. */\n  @property()\n  public download!: string;\n\n  /** Where to display the linked URL, as the name for a browsing context. */\n  @property()\n  public target!: '_blank' | '_parent' | '_self' | '_top' | undefined;\n\n  /**\n   * The relationship of the linked URL.\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n   */\n  @property()\n  public rel!: string;\n\n  /**\n   * Determines whether the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Sets focus in the button. */\n  @alternateName('focusComponent')\n  public focus(options?: FocusOptions) {\n    this.nativeElement.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @alternateName('blurComponent')\n  public blur() {\n    this.nativeElement.blur();\n  }\n\n  protected handleFocus() {\n    this.emitEvent('igcFocus');\n  }\n\n  protected handleBlur() {\n    this.emitEvent('igcBlur');\n  }\n\n  protected get classes() {\n    return {};\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        class=${classMap(this.classes)}\n        type=${ifDefined(this.type)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n\n  private renderLinkButton() {\n    return html`\n      <a\n        part=\"base\"\n        role=\"button\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        download=${ifDefined(this.download)}\n        rel=${ifDefined(this.rel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        class=${classMap(this.classes)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </a>\n    `;\n  }\n\n  protected abstract renderContent(): TemplateResult;\n\n  protected render() {\n    const link = this.href !== undefined;\n    return link ? this.renderLinkButton() : this.renderButton();\n  }\n}\n"]}

package/components/button/button.d.ts

@@ -1,7 +1,20 @@
 import { IgcButtonBaseComponent } from './button-base.js';
 export default class IgcButtonComponent extends IgcButtonBaseComponent {
-    type: 'button' | 'reset' | 'submit';
-    protected render(): import("lit").TemplateResult<1>;
+    static tagName: string;
+    static styles: import("lit").CSSResult[];
+    variant: 'flat' | 'contained' | 'outlined' | 'fab';
+    constructor();
+    protected get classes(): {
+        flat: boolean;
+        outlined: boolean;
+        contained: boolean;
+        fab: boolean;
+        small: boolean;
+        medium: boolean;
+        large: boolean;
+        disabled: boolean;
+    };
+    protected renderContent(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoB1D,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;IAM7D,IAAI,EAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE5C,SAAS,CAAC,MAAM;CAcjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoB1D,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;IAEpE,OAAc,OAAO,SAAgB;IAKrC,OAAc,MAAM,4BAAY;IAIzB,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,KAAK,CAAe;;IAOxE,SAAS,KAAK,OAAO;;;;;;;;;MAapB;IAED,SAAS,CAAC,aAAa;CAWxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}

package/components/button/button.js

@@ -5,33 +5,43 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { alternateName } from '../common/decorators';
+import { property } from 'lit/decorators.js';
 import { IgcButtonBaseComponent } from './button-base.js';
-let IgcButtonComponent = class IgcButtonComponent extends IgcButtonBaseComponent {
-    render() {
+import { styles } from './button.material.css';
+export default class IgcButtonComponent extends IgcButtonBaseComponent {
+    constructor() {
+        super();
+        this.variant = 'contained';
+        this.size = 'medium';
+    }
+    get classes() {
+        const { size, variant } = this;
+        return {
+            flat: variant === 'flat',
+            outlined: variant === 'outlined',
+            contained: variant === 'contained',
+            fab: variant === 'fab',
+            small: size === 'small',
+            medium: size === 'medium',
+            large: size === 'large',
+            disabled: this.disabled,
+        };
+    }
+    renderContent() {
         return html `
-      <button
-        part="base"
-        .disabled=${this.disabled}
-        class=${classMap(this.classes)}
-        type=${ifDefined(this.type)}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      >
-        ${this.renderContent()}
-      </button>
+      <span part="prefix">
+        <slot name="prefix"></slot>
+      </span>
+      <slot></slot>
+      <span part="suffix">
+        <slot name="suffix"></slot>
+      </span>
     `;
     }
-};
+}
+IgcButtonComponent.tagName = 'igc-button';
+IgcButtonComponent.styles = [styles];
 __decorate([
-    alternateName('displayType'),
-    property()
-], IgcButtonComponent.prototype, "type", void 0);
-IgcButtonComponent = __decorate([
-    customElement('igc-button')
-], IgcButtonComponent);
-export default IgcButtonComponent;
+    property({ reflect: true })
+], IgcButtonComponent.prototype, "variant", void 0);
 //# sourceMappingURL=button.js.map

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoB1D,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,sBAAsB;IAQ1D,MAAM;QACd,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,QAAQ;gBACjB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;eACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;;UAErB,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;CACF,CAAA;AAhBC;IAFC,aAAa,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE;gDACiC;AANzB,kBAAkB;IADtC,aAAa,CAAC,YAAY,CAAC;GACP,kBAAkB,CAsBtC;eAtBoB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { alternateName } from '../common/decorators';\nimport { IgcButtonBaseComponent } from './button-base.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\n@customElement('igc-button')\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  /**\n   * The type of the button. Defaults to undefined.\n   */\n  @alternateName('displayType')\n  @property()\n  public type!: 'button' | 'reset' | 'submit';\n\n  protected render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        class=${classMap(this.classes)}\n        type=${ifDefined(this.type)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAmB/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;IAapE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAc,OAAO;QACnB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAzCa,0BAAO,GAAG,YAAY,CAAC;AAKvB,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAIhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './button.material.css';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  /** @private */\n  public static tagName = 'igc-button';\n\n  /**\n   * @private\n   */\n  public static styles = [styles];\n\n  /** Sets the variant of the button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected get classes() {\n    const { size, variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <span part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <slot></slot>\n      <span part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}

package/components/button/button.material.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.material.css.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.material.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAAm9I,CAAC"}
+{"version":3,"file":"button.material.css.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.material.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAA4gJ,CAAC"}

package/components/button/button.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}a,button{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:calc(var(--igc-border-radius)*2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}a.disabled,button.disabled{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));pointer-events:none;-webkit-box-shadow:none;box-shadow:none}a:hover:not(.disabled),button:hover:not(.disabled){cursor:pointer}a::before,button::before{position:absolute;content:"";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}[name=prefix]::slotted(*){-webkit-margin-end:var(--igc-spacing-large);margin-inline-end:var(--igc-spacing-large)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}span[part=prefix],span[part=suffix]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flat,.outlined{background:transparent;color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.flat::before,.outlined::before{opacity:0}.flat:hover:not(.disabled)::before,.outlined:hover:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.12}.flat:focus:not(.disabled)::before,.outlined:focus:not(.disabled)::before,.flat:active:not(.disabled)::before,.outlined:active:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}.outlined{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.outlined.disabled{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}.contained,.fab{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast);-webkit-box-shadow:var(--igc-elevation-2);box-shadow:var(--igc-elevation-2);-webkit-transition:-webkit-box-shadow .1s ease-out;transition:-webkit-box-shadow .1s ease-out;-o-transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out}.contained::before,.fab::before{opacity:0}.contained:hover:not(.disabled),.fab:hover:not(.disabled){-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4)}.contained:hover:not(.disabled)::before,.fab:hover:not(.disabled)::before{background:#fff;opacity:.12}.contained:focus:not(.disabled),.fab:focus:not(.disabled),.contained:active:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-8);box-shadow:var(--igc-elevation-8)}.contained:focus:not(.disabled)::before,.fab:focus:not(.disabled)::before,.contained:active:not(.disabled)::before,.fab:active:not(.disabled)::before{background:#fff;opacity:.24}.fab{border-radius:calc(var(--igc-border-radius)*12);-webkit-box-shadow:var(--igc-elevation-6);box-shadow:var(--igc-elevation-6)}.fab:hover:not(.disabled),.fab:focus:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-12);box-shadow:var(--igc-elevation-12)}.fab.large{min-width:3rem;min-height:3rem}.fab.medium{min-width:2.5rem;min-height:2.5rem}.fab.small{min-width:2rem;min-height:2rem}.large{height:var(--size, 36px);padding:0 calc(var(--igc-spacing-large)*2)}.medium{height:var(--size, 30px);padding:0 calc(var(--igc-spacing-medium)*3)}.small{height:var(--size, 24px);padding:0 calc(var(--igc-spacing-small)*4)}`;
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}a,button{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:calc(var(--igc-border-radius)*2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}a.disabled,button.disabled{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));pointer-events:none;-webkit-box-shadow:none;box-shadow:none}a:hover:not(.disabled),button:hover:not(.disabled){cursor:pointer}a::before,button::before{position:absolute;content:"";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}[name=prefix]::slotted(*){-webkit-margin-end:var(--igc-spacing-large);margin-inline-end:var(--igc-spacing-large)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}span[part=prefix],span[part=suffix]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flat,.outlined{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a));background:transparent}.flat.disabled,.disabled.outlined{background:transparent}.flat::before,.outlined::before{opacity:0}.flat:hover:not(.disabled)::before,.outlined:hover:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.12}.flat:focus:not(.disabled)::before,.outlined:focus:not(.disabled)::before,.flat:active:not(.disabled)::before,.outlined:active:not(.disabled)::before{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}.outlined{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}.outlined.disabled{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}.contained,.fab{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast);-webkit-box-shadow:var(--igc-elevation-2);box-shadow:var(--igc-elevation-2);-webkit-transition:-webkit-box-shadow .1s ease-out;transition:-webkit-box-shadow .1s ease-out;-o-transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out;transition:box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out}.contained::before,.fab::before{opacity:0}.contained:hover:not(.disabled),.fab:hover:not(.disabled){-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4)}.contained:hover:not(.disabled)::before,.fab:hover:not(.disabled)::before{background:#fff;opacity:.12}.contained:focus:not(.disabled),.fab:focus:not(.disabled),.contained:active:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-8);box-shadow:var(--igc-elevation-8)}.contained:focus:not(.disabled)::before,.fab:focus:not(.disabled)::before,.contained:active:not(.disabled)::before,.fab:active:not(.disabled)::before{background:#fff;opacity:.24}.fab{border-radius:calc(var(--igc-border-radius)*12);-webkit-box-shadow:var(--igc-elevation-6);box-shadow:var(--igc-elevation-6)}.fab:hover:not(.disabled),.fab:focus:not(.disabled),.fab:active:not(.disabled){-webkit-box-shadow:var(--igc-elevation-12);box-shadow:var(--igc-elevation-12)}.fab.large{min-width:3rem;min-height:3rem}.fab.medium{min-width:2.5rem;min-height:2.5rem}.fab.small{min-width:2rem;min-height:2rem}.large{height:var(--size, 36px);padding:0 calc(var(--igc-spacing-large)*2)}.medium{height:var(--size, 30px);padding:0 calc(var(--igc-spacing-medium)*3)}.small{height:var(--size, 24px);padding:0 calc(var(--igc-spacing-small)*4)}`;
 //# sourceMappingURL=button.material.css.js.map