@aquera/nile-elements 2.0.3 → 2.0.5

package/dist/src/nile-empty-state/nile-empty-state.js

@@ -11,6 +11,41 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
 import { ifDefined } from 'lit/directives/if-defined.js';
+const STATUS_PRESETS = {
+    'empty': {
+        icon: 'ng-database', tone: 'neutral', role: 'status', live: 'polite',
+        text: 'No data yet', subText: `Rows appear here once there's something to show.`,
+    },
+    'no-results': {
+        icon: 'ng-search-lg', tone: 'neutral', role: 'status', live: 'polite',
+        text: 'No matches', subText: 'Try removing a filter or broadening your search.',
+    },
+    'not-found': {
+        icon: 'ng-file-06', tone: 'warning', role: 'status', live: 'polite',
+        text: `We couldn't find that`, subText: 'It may have been moved or deleted.',
+    },
+    'no-access': {
+        icon: 'ng-lock', tone: 'warning', role: 'status', live: 'polite',
+        text: `You don't have access`, subText: 'Ask an admin to grant you access to this resource.',
+    },
+    'error': {
+        icon: 'ng-alert-circle', tone: 'error', role: 'alert', live: 'assertive',
+        text: 'Something went wrong', subText: `We couldn't load this. Try again.`,
+    },
+    'offline': {
+        icon: 'ng-cloud-off', tone: 'error', role: 'alert', live: 'assertive',
+        text: 'Connection lost', subText: 'Check your connection and try again.',
+    },
+};
+const TONE_GLYPH_COLOR = {
+    neutral: undefined,
+    info: 'var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))',
+    warning: 'var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))',
+    error: 'var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))',
+};
+const DEFAULT_ICON = 'ng-x-circle';
+const DEFAULT_TEXT = 'Empty State';
+const DEFAULT_SUB_TEXT = 'No Data';
 /**
  * Nile empty-state component.
  *
@@ -22,11 +57,8 @@ let NileEmptyState = class NileEmptyState extends NileElement {
         super(...arguments);
         this.size = 'md';
         this.variant = 'tonal';
-        this.icon = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
-        this.grayscale = false;
-        this.text = 'Empty State';
-        this.subText = 'No Data';
-        this.svgIconSize = 40;
+        this.layout = 'stack';
+        this.bordered = false;
         /* #endregion */
     }
     /**
@@ -36,56 +68,128 @@ let NileEmptyState = class NileEmptyState extends NileElement {
     static get styles() {
         return [styles];
     }
+    get icon() {
+        return this._icon ?? this.preset?.icon ?? DEFAULT_ICON;
+    }
+    set icon(value) {
+        const old = this.icon;
+        this._icon = value ?? undefined;
+        this.requestUpdate('icon', old);
+    }
+    /** Headline. Resolves through the `status` preset to `DEFAULT_TEXT`. */
+    get text() {
+        return this._text ?? this.preset?.text ?? DEFAULT_TEXT;
+    }
+    set text(value) {
+        const old = this.text;
+        this._text = value ?? undefined;
+        this.requestUpdate('text', old);
+    }
+    /** Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`. */
+    get subText() {
+        return this._subText ?? this.preset?.subText ?? DEFAULT_SUB_TEXT;
+    }
+    set subText(value) {
+        const old = this.subText;
+        this._subText = value ?? undefined;
+        this.requestUpdate('subText', old);
+    }
+    get tone() {
+        return this._tone ?? this.preset?.tone ?? 'neutral';
+    }
+    set tone(value) {
+        const old = this.tone;
+        this._tone = value ?? undefined;
+        this.requestUpdate('tone', old);
+    }
     /* #endregion */
     /* #region Methods */
+    /** The preset backing the current `status`, or undefined when none is set. */
+    get preset() {
+        return this.status ? STATUS_PRESETS[this.status] : undefined;
+    }
+    get glyphColor() {
+        return this.svgIconColor ?? TONE_GLYPH_COLOR[this.tone];
+    }
+    /** ARIA wiring  */
+    get liveRegion() {
+        const preset = this.preset;
+        if (!preset)
+            return undefined;
+        return { role: preset.role, live: preset.live };
+    }
+    renderGlyph(size) {
+        const color = this.glyphColor;
+        return this.svgIconUrl ? html `
+      <nile-glyph
+        customSvgPath="${this.svgIconUrl}"
+        size="${this.svgIconSize ?? size}"
+        method="stroke"
+        color="${ifDefined(color)}"
+        noFill
+      ></nile-glyph>
+    ` : html `
+      <nile-glyph
+        name="${this.icon}"
+        method="stroke"
+        size="${size}"
+        color="${ifDefined(color)}"
+      ></nile-glyph>
+    `;
+    }
     /**
      * Render method
      * @slot This is a slot test
      */
     render() {
+        const live = this.liveRegion;
+        const inline = this.layout === 'inline';
         return html `
       <div part="container" class="${classMap({
             'empty-state': true,
             'empty-state--sm': this.size == 'sm',
             'empty-state--md': this.size == 'md',
-            'empty-state--lg': this.size == 'lg'
-        })}">
+            'empty-state--lg': this.size == 'lg',
+            'empty-state--stack': this.layout === 'stack',
+            'empty-state--inline': inline,
+            'empty-state--page': this.layout === 'page',
+            'empty-state--bordered': this.bordered,
+            [`empty-state--tone-${this.tone}`]: true,
+        })}"
+        role="${ifDefined(live?.role)}"
+        aria-live="${ifDefined(live?.live)}"
+      >
         <div part="body" class="${classMap({ 'empty-state__body': true })}">
 
-          ${this.variant == 'content' ? html `
+          ${inline ? html `
+            <span part="inline-icon icon-chrome" class="empty-state__body--inline">
+              ${this.renderGlyph(20)}
+            </span>` : nothing}
+
+          ${!inline && this.variant == 'content' ? html `
             <div part="content-image"  class="empty-state__body--content">
               ${!this.icon && !this.svgIconUrl ? nothing : html `
-                <div part="icon-wrapper" class="empty-state__img__icon">
-                  ${this.svgIconUrl ? html `
-                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}"  color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
-                  ` : html `
-                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-                  `}
+                <div part="icon-wrapper icon-chrome" class="empty-state__img__icon">
+                  ${this.renderGlyph(this.size == 'lg' ? 28 : 24)}
                 </div>`}
             </div>` : nothing}
 
-          ${this.variant == 'tonal' ? html `
-            <div part="tonal-body" class="empty-state__body--tonal">
-              ${this.svgIconUrl ? html `
-                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-              ` : html `
-                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
-              `}
+          ${!inline && this.variant == 'tonal' ? html `
+            <div part="tonal-body icon-chrome" class="empty-state__body--tonal">
+              ${this.renderGlyph(40)}
             </div>` : nothing}
 
-          ${this.variant == 'flat' ? html `
+          ${!inline && this.variant == 'flat' ? html `
             <div part="flat-body" class="empty-state__body--flat">
-					<span class="nile-flat-type-icon">
-						${this.svgIconUrl ? html `
-              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-            ` : html `
-              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
-            `}
+					<span part="icon-chrome" class="nile-flat-type-icon">
+						${this.renderGlyph(this.size == 'lg' ? 28 : 24)}
 					</span>
             </div>` : nothing}
 
           <div part="text-section" class="empty__state__text-section">
+            ${this.code ? html `
+              <div part="code" class="empty-state__code">${this.code}</div>
+            ` : nothing}
             <div part="text" class="empty-state__text">${this.text}</div>
             <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
           </div>
@@ -94,37 +198,50 @@ let NileEmptyState = class NileEmptyState extends NileElement {
         <div part="actions" class="empty-state-actions">
           <slot></slot>
         </div>
+
       </div>
     `;
     }
 };
 __decorate([
-    property()
+    property({ type: String, attribute: true })
 ], NileEmptyState.prototype, "size", void 0);
 __decorate([
-    property()
+    property({ type: String, attribute: true })
 ], NileEmptyState.prototype, "variant", void 0);
 __decorate([
-    property()
-], NileEmptyState.prototype, "icon", void 0);
+    property({ type: String, attribute: true, reflect: true })
+], NileEmptyState.prototype, "status", void 0);
 __decorate([
-    property({ type: Boolean })
-], NileEmptyState.prototype, "grayscale", void 0);
+    property({ type: String, attribute: true, reflect: true })
+], NileEmptyState.prototype, "layout", void 0);
 __decorate([
-    property()
-], NileEmptyState.prototype, "text", void 0);
+    property({ type: String, attribute: true })
+], NileEmptyState.prototype, "code", void 0);
 __decorate([
-    property({ attribute: 'sub-text' })
-], NileEmptyState.prototype, "subText", void 0);
+    property({ type: Boolean, attribute: true, reflect: true })
+], NileEmptyState.prototype, "bordered", void 0);
 __decorate([
-    property()
+    property({ type: String, attribute: true })
 ], NileEmptyState.prototype, "svgIconUrl", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: true })
 ], NileEmptyState.prototype, "svgIconSize", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: true })
 ], NileEmptyState.prototype, "svgIconColor", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], NileEmptyState.prototype, "icon", null);
+__decorate([
+    property({ type: String, attribute: true })
+], NileEmptyState.prototype, "text", null);
+__decorate([
+    property({ type: String, attribute: 'sub-text' })
+], NileEmptyState.prototype, "subText", null);
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], NileEmptyState.prototype, "tone", null);
 NileEmptyState = __decorate([
     customElement('nile-empty-state')
 ], NileEmptyState);

package/dist/src/nile-empty-state/nile-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg'  = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n  @property() svgIconUrl: string;\n  @property({type: Number}) svgIconSize: number = 40;\n  @property({type: String}) svgIconColor: string;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div part=\"container\" class=\"${classMap({\n        'empty-state': true,\n        'empty-state--sm': this.size == 'sm',\n        'empty-state--md': this.size == 'md',\n        'empty-state--lg': this.size == 'lg'\n      })}\">\n        <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n          ${this.variant == 'content' ? html`\n            <div part=\"content-image\"  class=\"empty-state__body--content\">\n              ${!this.icon && !this.svgIconUrl ? nothing : html`\n                <div part=\"icon-wrapper\" class=\"empty-state__img__icon\">\n                  ${this.svgIconUrl ? html`\n                    <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\"  color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n                    <!-- <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${this.svgIconColor ? this.svgIconColor : '#ddd'}\"></nile-icon> -->\n                  ` : html`\n                    <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n                  `}\n                </div>`\n              }\n            </div>`: nothing\n          }\n\n          ${this.variant == 'tonal' ? html`\n            <div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n              ${this.svgIconUrl ? html`\n                <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n              ` : html`\n                <nile-icon name=\"${this.icon}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"40\"></nile-icon>\n              `}\n            </div>`: nothing\n          }\n\n          ${this.variant == 'flat' ? html`\n            <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.svgIconUrl ? html`\n              <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" variant=\"secondary\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n            ` : html`\n              <nile-icon name=\"${this.icon}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n            `}\n\t\t\t\t\t</span>\n            </div>`: nothing\n          }\n\n          <div part=\"text-section\" class=\"empty__state__text-section\">\n            <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n            <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n          </div>\n        </div>\n\n        <div part=\"actions\" class=\"empty-state-actions\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}\n"]}
+{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/** What happened. Selects an icon, tone, default copy and ARIA role. */\nexport type NileEmptyStateStatus =\n  | 'empty'\n  | 'no-results'\n  | 'not-found'\n  | 'no-access'\n  | 'error'\n  | 'offline';\n\n/** How loud the state looks. Defaults from `status`, always overridable. */\nexport type NileEmptyStateTone = 'neutral' | 'info' | 'warning' | 'error';\n\n/** What shape the state occupies. */\nexport type NileEmptyStateLayout = 'stack' | 'inline' | 'page';\n\ninterface StatusPreset {\n  icon: string;\n  tone: NileEmptyStateTone;\n  text: string;\n  subText: string;\n  role: 'status' | 'alert';\n  live: 'polite' | 'assertive';\n}\n\nconst STATUS_PRESETS: Record<NileEmptyStateStatus, StatusPreset> = {\n  'empty': {\n    icon: 'ng-database', tone: 'neutral', role: 'status', live: 'polite',\n    text: 'No data yet', subText: `Rows appear here once there's something to show.`,\n  },\n  'no-results': {\n    icon: 'ng-search-lg', tone: 'neutral', role: 'status', live: 'polite',\n    text: 'No matches', subText: 'Try removing a filter or broadening your search.',\n  },\n  'not-found': {\n    icon: 'ng-file-06', tone: 'warning', role: 'status', live: 'polite',\n    text: `We couldn't find that`, subText: 'It may have been moved or deleted.',\n  },\n  'no-access': {\n    icon: 'ng-lock', tone: 'warning', role: 'status', live: 'polite',\n    text: `You don't have access`, subText: 'Ask an admin to grant you access to this resource.',\n  },\n  'error': {\n    icon: 'ng-alert-circle', tone: 'error', role: 'alert', live: 'assertive',\n    text: 'Something went wrong', subText: `We couldn't load this. Try again.`,\n  },\n  'offline': {\n    icon: 'ng-cloud-off', tone: 'error', role: 'alert', live: 'assertive',\n    text: 'Connection lost', subText: 'Check your connection and try again.',\n  },\n};\n\nconst TONE_GLYPH_COLOR: Record<NileEmptyStateTone, string | undefined> = {\n  neutral: undefined,\n  info: 'var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))',\n  warning: 'var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))',\n  error: 'var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))',\n};\n\nconst DEFAULT_ICON = 'ng-x-circle';\nconst DEFAULT_TEXT = 'Empty State';\nconst DEFAULT_SUB_TEXT = 'No Data';\n\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: String, attribute: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ type: String, attribute: true }) variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property({ type: String, attribute: true, reflect: true }) status?: NileEmptyStateStatus;\n  @property({ type: String, attribute: true, reflect: true }) layout: NileEmptyStateLayout = 'stack';\n  @property({ type: String, attribute: true }) code?: string;\n  @property({ type: Boolean, attribute: true, reflect: true }) bordered: boolean = false;\n  @property({ type: String, attribute: true }) svgIconUrl: string;\n  /**\n   * Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\n   * the SVG matches whatever size the current variant/layout draws at.\n   */\n  @property({ type: Number, attribute: true }) svgIconSize?: number;\n  @property({ type: String, attribute: true }) svgIconColor: string;\n\n  private _icon?: string;\n  private _text?: string;\n  private _subText?: string;\n  private _tone?: NileEmptyStateTone;\n  @property({ type: String, attribute: true })\n  get icon(): string {\n    return this._icon ?? this.preset?.icon ?? DEFAULT_ICON;\n  }\n\n  set icon(value: string | null) {\n    const old = this.icon;\n    this._icon = value ?? undefined;\n    this.requestUpdate('icon', old);\n  }\n\n  /** Headline. Resolves through the `status` preset to `DEFAULT_TEXT`. */\n  @property({ type: String, attribute: true })\n  get text(): string {\n    return this._text ?? this.preset?.text ?? DEFAULT_TEXT;\n  }\n\n  set text(value: string | null) {\n    const old = this.text;\n    this._text = value ?? undefined;\n    this.requestUpdate('text', old);\n  }\n\n  /** Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`. */\n  @property({ type: String, attribute: 'sub-text' })\n  get subText(): string {\n    return this._subText ?? this.preset?.subText ?? DEFAULT_SUB_TEXT;\n  }\n\n  set subText(value: string | null) {\n    const old = this.subText;\n    this._subText = value ?? undefined;\n    this.requestUpdate('subText', old);\n  }\n\n  @property({ type: String, attribute: true, reflect: true })\n  get tone(): NileEmptyStateTone {\n    return this._tone ?? this.preset?.tone ?? 'neutral';\n  }\n\n  set tone(value: NileEmptyStateTone | null) {\n    const old = this.tone;\n    this._tone = value ?? undefined;\n    this.requestUpdate('tone', old);\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /** The preset backing the current `status`, or undefined when none is set. */\n  private get preset(): StatusPreset | undefined {\n    return this.status ? STATUS_PRESETS[this.status] : undefined;\n  }\n\n  private get glyphColor(): string | undefined {\n    return this.svgIconColor ?? TONE_GLYPH_COLOR[this.tone];\n  }\n\n  /** ARIA wiring  */\n  private get liveRegion(): { role: string; live: string } | undefined {\n    const preset = this.preset;\n    if (!preset) return undefined;\n    return { role: preset.role, live: preset.live };\n  }\n\n  private renderGlyph(size: number | string): TemplateResult {\n    const color = this.glyphColor;\n    return this.svgIconUrl ? html`\n      <nile-glyph\n        customSvgPath=\"${this.svgIconUrl}\"\n        size=\"${this.svgIconSize ?? size}\"\n        method=\"stroke\"\n        color=\"${ifDefined(color)}\"\n        noFill\n      ></nile-glyph>\n    ` : html`\n      <nile-glyph\n        name=\"${this.icon}\"\n        method=\"stroke\"\n        size=\"${size}\"\n        color=\"${ifDefined(color)}\"\n      ></nile-glyph>\n    `;\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    const live = this.liveRegion;\n    const inline = this.layout === 'inline';\n\n    return html`\n      <div part=\"container\" class=\"${classMap({\n        'empty-state': true,\n        'empty-state--sm': this.size == 'sm',\n        'empty-state--md': this.size == 'md',\n        'empty-state--lg': this.size == 'lg',\n        'empty-state--stack': this.layout === 'stack',\n        'empty-state--inline': inline,\n        'empty-state--page': this.layout === 'page',\n        'empty-state--bordered': this.bordered,\n        [`empty-state--tone-${this.tone}`]: true,\n      })}\"\n        role=\"${ifDefined(live?.role)}\"\n        aria-live=\"${ifDefined(live?.live)}\"\n      >\n        <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n          ${inline ? html`\n            <span part=\"inline-icon icon-chrome\" class=\"empty-state__body--inline\">\n              ${this.renderGlyph(20)}\n            </span>` : nothing\n          }\n\n          ${!inline && this.variant == 'content' ? html`\n            <div part=\"content-image\"  class=\"empty-state__body--content\">\n              ${!this.icon && !this.svgIconUrl ? nothing : html`\n                <div part=\"icon-wrapper icon-chrome\" class=\"empty-state__img__icon\">\n                  ${\n                    this.renderGlyph(this.size == 'lg' ? 28 : 24)}\n                </div>`\n              }\n            </div>`: nothing\n          }\n\n          ${!inline && this.variant == 'tonal' ? html`\n            <div part=\"tonal-body icon-chrome\" class=\"empty-state__body--tonal\">\n              ${this.renderGlyph(40)}\n            </div>`: nothing\n          }\n\n          ${!inline && this.variant == 'flat' ? html`\n            <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span part=\"icon-chrome\" class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.renderGlyph(this.size == 'lg' ? 28 : 24)}\n\t\t\t\t\t</span>\n            </div>`: nothing\n          }\n\n          <div part=\"text-section\" class=\"empty__state__text-section\">\n            ${this.code ? html`\n              <div part=\"code\" class=\"empty-state__code\">${this.code}</div>\n            ` : nothing}\n            <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n            <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n          </div>\n        </div>\n\n        <div part=\"actions\" class=\"empty-state-actions\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}\n"]}

package/dist/src/nile-empty-state/nile-empty-state.test.d.ts

@@ -1 +1,2 @@
 import './nile-empty-state';
+import '@aquera/nile-glyph/nile-glyph';