@aquera/nile-elements 0.0.68 → 0.0.70

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

@@ -9,7 +9,6 @@ import { html, nothing, property } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
-import { HasSlotController } from '../internal/slot';
 import NileElement from '../internal/nile-element';
 /**
  * Nile empty-state component.
@@ -20,10 +19,10 @@ import NileElement from '../internal/nile-element';
 let NileEmptyState = class NileEmptyState extends NileElement {
     constructor() {
         super(...arguments);
-        this.hasSlotController = new HasSlotController(this, 'actions');
         this.size = 'md';
         this.variant = 'tonal';
         this.icon = 'error';
+        this.grayscale = false;
         this.text = 'Empty State';
         this.subText = 'No Data';
         /* #endregion */
@@ -42,7 +41,6 @@ let NileEmptyState = class NileEmptyState extends NileElement {
      * @slot This is a slot test
      */
     render() {
-        const hasContentSlot = this.hasSlotController.test('content');
         return html `
 		<div class="${classMap({
             'empty-state': true,
@@ -50,35 +48,34 @@ let NileEmptyState = class NileEmptyState extends NileElement {
             'empty-state--md': this.size == 'md',
             'empty-state--lg': this.size == 'lg'
         })}">
-			<div class="${classMap({
-            'empty-state__body': true,
-        })}">
-			${this.variant == 'content' ? html `
-				<div class="empty-state__body--content">
-					<slot name="content"></slot>
-					${!this.icon ? nothing :
-            html `
-						<div class="${classMap({
-                'empty-state__img__icon': true,
-                'empty-state__img__icon--abs': hasContentSlot
-            })}">
-							<nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-						</div>`}
-				</div>` : nothing}
+      <div class="${classMap({ 'empty-state__body': true })}">
+
+        ${this.variant == 'content' ? html `
+        <div class="empty-state__body--content">
+          
+          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale': this.grayscale })}"></div>
+          ${!this.icon ? nothing : html `
+          <div class="empty-state__img__icon">
+            <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+          </div>`}
+        </div>` : nothing}
 				
-			${this.variant == 'tonal' ? html `
+			  ${this.variant == 'tonal' ? html `
 				<div class="empty-state__body--tonal">
 					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>` : nothing}
 
-			${this.variant == 'flat' ? html `
+			  ${this.variant == 'flat' ? html `
 				<div class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
 						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
 					</span>
 				</div>` : nothing}
-				<div class="empty-state__text">${this.text}</div>
-				<div class="empty-state__subtext">${this.subText}</div>
+      
+        <div class="empty__state__text-section">
+          <div class="empty-state__text">${this.text}</div>
+          <div class="empty-state__subtext">${this.subText}</div>
+        </div>
 			</div>
 
 			<div class="empty-state-actions">
@@ -97,6 +94,9 @@ __decorate([
 __decorate([
     property()
 ], NileEmptyState.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileEmptyState.prototype, "grayscale", void 0);
 __decorate([
     property()
 ], NileEmptyState.prototype, "text", void 0);

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 { state, html, nothing, property, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement from '../internal/nile-element';\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  private readonly hasSlotController = new HasSlotController(\n    this,\n    'actions'\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 = 'error';\n\n  @property() text: String = 'Empty State';\n  @property() subText: String = 'No Data';\n\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    const hasContentSlot = this.hasSlotController.test('content');\n    return html`\n\t\t<div 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\t\t\t<div class=\"${classMap({\n      'empty-state__body': true,\n    })}\">\n\t\t\t${this.variant == 'content' ? html`\n\t\t\t\t<div class=\"empty-state__body--content\">\n\t\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t\t\t${!this.icon ? nothing :\n          html`\n\t\t\t\t\t\t<div class=\"${classMap({\n            'empty-state__img__icon': true,\n            'empty-state__img__icon--abs': hasContentSlot\n          })}\">\n\t\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n\t\t\t\t\t\t</div>`\n        }\n\t\t\t\t</div>`: nothing\n      }\n\t\t\t\t\n\t\t\t${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\t\t\t\t</div>`: nothing\n      }\n\n\t\t\t${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n      }\n\t\t\t\t<div class=\"empty-state__text\">${this.text}</div>\n\t\t\t\t<div class=\"empty-state__subtext\">${this.subText}</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}
+{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAS,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAkC,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,GAAuB,IAAI,CAAC;QAEhC,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QAC7B,YAAO,GAAW,SAAS,CAAC;QA4DxC,gBAAgB;IAClB,CAAC;IAhFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC;YACnB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;oBACc,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;UAEjD,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;+BAGX,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,+BAA+B,EAAC,IAAI,CAAC,SAAS,EAAG,CAAC;YAC5G,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;+BAER,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;iBAE3G;eACK,CAAA,CAAC,CAAC,OACT;;OAED,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEb,IAAI,CAAC,IAAI;WACtB,CAAA,CAAC,CAAC,OACL;;OAED,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;yBAGX,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;WAEtF,CAAA,CAAC,CAAC,OACL;;;2CAGmC,IAAI,CAAC,IAAI;8CACN,IAAI,CAAC,OAAO;;;;;;;;GAQvD,CAAC;IACF,CAAC;CAGF,CAAA;AAxEa;IAAX,QAAQ,EAAE;4CAAiC;AAEhC;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AAC7B;IAAX,QAAQ,EAAE;+CAA6B;AArB7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkF1B;SAlFY,cAAc;AAoF3B,eAAe,cAAc,CAAC","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 { state, html, nothing, property, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } 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';\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() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property() subText: String = 'No Data';\n\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\t\t<div 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 class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div class=\"empty-state__body--content\">\n          \n          <div src=\"\" class=\"${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}\"></div>\n          ${!this.icon ? nothing : html`\n          <div class=\"empty-state__img__icon\">\n            <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div class=\"empty__state__text-section\">\n          <div class=\"empty-state__text\">${this.text}</div>\n          <div class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}

package/dist/src/nile-format-date/index.d.ts

@@ -0,0 +1 @@
+export { NileFormatDate } from './nile-format-date';

package/dist/src/nile-format-date/index.js

@@ -0,0 +1,2 @@
+export { NileFormatDate } from './nile-format-date';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-format-date/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-format-date/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileFormatDate } from './nile-format-date';"]}

package/dist/src/nile-format-date/nile-format-date.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * FormatDate CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-format-date/nile-format-date.css.js

@@ -0,0 +1,17 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * FormatDate CSS
+ */
+export const styles = css `
+	:host {
+
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-format-date.css.js.map

package/dist/src/nile-format-date/nile-format-date.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-format-date.css.js","sourceRoot":"","sources":["../../../src/nile-format-date/nile-format-date.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 {css} from 'lit-element';\n\n/**\n * FormatDate CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-format-date/nile-format-date.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile format-date component.
+ *
+ * @tag nile-format-date
+ *
+ */
+export declare class NileFormatDate extends NileElement {
+    /**
+     * The styles for nile-format-date
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
+     * recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
+     * in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+     */
+    date: Date | string;
+    /** The format for displaying the weekday. */
+    weekday: 'narrow' | 'short' | 'long';
+    /** The format for displaying the era. */
+    era: 'narrow' | 'short' | 'long';
+    /** The format for displaying the year. */
+    year: 'numeric' | '2-digit';
+    /** The format for displaying the month. */
+    month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+    /** The format for displaying the day. */
+    day: 'numeric' | '2-digit';
+    /** The format for displaying the hour. */
+    hour: 'numeric' | '2-digit';
+    /** The format for displaying the minute. */
+    minute: 'numeric' | '2-digit';
+    /** The format for displaying the second. */
+    second: 'numeric' | '2-digit';
+    /** The format for displaying the time. */
+    timeZoneName: 'short' | 'long';
+    /** The time zone to express the time in. */
+    timeZone: string;
+    /** The format for displaying the hour. */
+    hourFormat: 'auto' | '12' | '24';
+    /** The separator for the date format. */
+    dateSeparator: '-' | '/';
+    formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
+    render(): TemplateResult<1> | undefined;
+}
+export default NileFormatDate;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-format-date': NileFormatDate;
+    }
+}

package/dist/src/nile-format-date/nile-format-date.js

@@ -0,0 +1,129 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-format-date.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile format-date component.
+ *
+ * @tag nile-format-date
+ *
+ */
+let NileFormatDate = class NileFormatDate extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
+         * recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
+         * in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+         */
+        this.date = new Date();
+        /** The format for displaying the hour. */
+        this.hourFormat = 'auto';
+        /** The separator for the date format. */
+        this.dateSeparator = '-';
+    }
+    /**
+     * The styles for nile-format-date
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    formatDate(dateToFormat, options) {
+        dateToFormat = new Date(dateToFormat);
+        const formatter = new Intl.DateTimeFormat('en-GB', options);
+        const parts = formatter.formatToParts(dateToFormat);
+        const formattedDate = parts.map(({ type, value }) => {
+            if (type === 'day' || type === 'month' || type === 'year') {
+                return value;
+            }
+            if (type === 'literal' && value === '/') {
+                return this.dateSeparator;
+            }
+            return value;
+        }).join('');
+        return formattedDate;
+    }
+    // formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {
+    //   dateToFormat = new Date(dateToFormat);
+    //   return new Intl.DateTimeFormat('en-GB', options).format(dateToFormat);
+    // }
+    render() {
+        const date = new Date(this.date);
+        const hour12 = this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';
+        // Check for an invalid date
+        if (isNaN(date.getMilliseconds())) {
+            return undefined;
+        }
+        return html `
+      <time datetime=${date.toISOString()}>
+        ${this.formatDate(date, {
+            weekday: this.weekday,
+            era: this.era,
+            year: this.year,
+            month: this.month,
+            day: this.day,
+            hour: this.hour,
+            minute: this.minute,
+            second: this.second,
+            timeZoneName: this.timeZoneName,
+            timeZone: this.timeZone,
+            hour12: hour12,
+        })}
+      </time>
+    `;
+    }
+};
+__decorate([
+    property()
+], NileFormatDate.prototype, "date", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "weekday", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "era", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "year", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "month", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "day", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "hour", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "minute", void 0);
+__decorate([
+    property()
+], NileFormatDate.prototype, "second", void 0);
+__decorate([
+    property({ attribute: 'time-zone-name' })
+], NileFormatDate.prototype, "timeZoneName", void 0);
+__decorate([
+    property({ attribute: 'time-zone' })
+], NileFormatDate.prototype, "timeZone", void 0);
+__decorate([
+    property({ attribute: 'hour-format' })
+], NileFormatDate.prototype, "hourFormat", void 0);
+__decorate([
+    property({ attribute: 'date-separator' })
+], NileFormatDate.prototype, "dateSeparator", void 0);
+NileFormatDate = __decorate([
+    customElement('nile-format-date')
+], NileFormatDate);
+export { NileFormatDate };
+/* #endregion */
+export default NileFormatDate;
+//# sourceMappingURL=nile-format-date.js.map

package/dist/src/nile-format-date/nile-format-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-format-date.js","sourceRoot":"","sources":["../../../src/nile-format-date/nile-format-date.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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-format-date.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile format-date component.\n *\n * @tag nile-format-date\n *\n */\n@customElement('nile-format-date')\nexport class NileFormatDate extends NileElement {\n  /**\n   * The styles for nile-format-date\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  /**\n   * The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\n   * recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\n   * in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n   */\n  @property() date: Date | string = new Date();\n\n  /** The format for displaying the weekday. */\n  @property() weekday: 'narrow' | 'short' | 'long';\n\n  /** The format for displaying the era. */\n  @property() era: 'narrow' | 'short' | 'long';\n\n  /** The format for displaying the year. */\n  @property() year: 'numeric' | '2-digit';\n\n  /** The format for displaying the month. */\n  @property() month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';\n\n  /** The format for displaying the day. */\n  @property() day: 'numeric' | '2-digit';\n\n  /** The format for displaying the hour. */\n  @property() hour: 'numeric' | '2-digit';\n\n  /** The format for displaying the minute. */\n  @property() minute: 'numeric' | '2-digit';\n\n  /** The format for displaying the second. */\n  @property() second: 'numeric' | '2-digit';\n\n  /** The format for displaying the time. */\n  @property({ attribute: 'time-zone-name' }) timeZoneName: 'short' | 'long';\n\n  /** The time zone to express the time in. */\n  @property({ attribute: 'time-zone' }) timeZone: string;\n\n  /** The format for displaying the hour. */\n  @property({ attribute: 'hour-format' }) hourFormat: 'auto' | '12' | '24' =\n    'auto';\n\n  /** The separator for the date format. */\n  @property({ attribute: 'date-separator' }) dateSeparator: '-' | '/' = '-';\n\n  formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {\n    dateToFormat = new Date(dateToFormat);\n    const formatter = new Intl.DateTimeFormat('en-GB', options);\n    const parts = formatter.formatToParts(dateToFormat);\n    const formattedDate = parts.map(({ type, value }) => {\n      if (type === 'day' || type === 'month' || type === 'year') {\n        return value;\n      }\n      if (type === 'literal' && value === '/') {\n        return this.dateSeparator;\n      }\n      return value;\n    }).join('');\n    return formattedDate;\n  }\n\n  // formatDate(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {\n  //   dateToFormat = new Date(dateToFormat);\n  //   return new Intl.DateTimeFormat('en-GB', options).format(dateToFormat);\n  // }\n\n\n  render() {\n    const date = new Date(this.date);\n    const hour12 =\n      this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';\n\n    // Check for an invalid date\n    if (isNaN(date.getMilliseconds())) {\n      return undefined;\n    }\n\n    return html`\n      <time datetime=${date.toISOString()}>\n        ${this.formatDate(date, {\n          weekday: this.weekday,\n          era: this.era,\n          year: this.year,\n          month: this.month,\n          day: this.day,\n          hour: this.hour,\n          minute: this.minute,\n          second: this.second,\n          timeZoneName: this.timeZoneName,\n          timeZone: this.timeZone,\n          hour12: hour12,\n        })}\n      </time>\n    `;\n  }\n}\n\t/* #endregion */\n\nexport default NileFormatDate;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-format-date': NileFormatDate;\n  }\n}\n"]}

package/dist/src/nile-hero/nile-hero.css.js

@@ -11,57 +11,38 @@ import { css } from 'lit-element';
 export const styles = css `
 
 	:host {
-		min-height:var(--nile-hero-height);
+		display:block;
+		--transition:2000ms;
+	}
+	.hero__container{
+		overflow:hidden;
 		width:100%;
 		position:relative;
 		display:block;
-		border-bottom: 1px solid #EAECF0;
-		background: linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+  		transition: var(--transition);
 	}
-
 	.hero__body {
 		height:100%;
 	}
 
-	.hero__header {
-		display: flex;
-		align-items: center;
-		padding: var(--nile-hero-first-elements-padding);
-		gap: .75rem;
-	}
-
-	.icon__container {
-		height: 25px;
-		place-items: center;
-		display: grid;
-		aspect-ratio: 1 / 1;
-		border-radius: 8px;
-		border: 1px solid #EAECF0;
-		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
-	}
-
-	.hero__text {
-		color: var(--nile-hero-text-color);
-		font-size: var(--nile-hero-text-font-size);
-		font-style: normal;
-		font-weight: var(--nile-hero-text-font-weight);
-	}
-
 	.hero__slot {
-		padding: var(--nile-hero-first-elements-padding);
+		padding-left: 48px;
+		padding-top: 24px 
 	}
 
 	.hero__img__container {
-		height:100%;
+		height:var(--nile-hero-height);
+		overflow:hidden;
 		width:max-content;
 		position: absolute;
 		right: 0;
-		top:0;
+		bottom:0;
+		transition:var(--transition);
 	}
 
 	.hero__img {
 		object-fit:cover;
-		height:100%;
+		height:var(--nile-hero-height);
 		width:auto;
 	}
 `;

package/dist/src/nile-hero/nile-hero.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-hero.css.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 {css} from 'lit-element';\n\n/**\n * Hero CSS\n */\nexport const styles = css`\n\n\t:host {\n\t\tmin-height:var(--nile-hero-height);\n\t\twidth:100%;\n\t\tposition:relative;\n\t\tdisplay:block;\n\t\tborder-bottom: 1px solid #EAECF0;\n\t\tbackground: linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);\n\t}\n\n\t.hero__body {\n\t\theight:100%;\n\t}\n\n\t.hero__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: var(--nile-hero-first-elements-padding);\n\t\tgap: .75rem;\n\t}\n\n\t.icon__container {\n\t\theight: 25px;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid #EAECF0;\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__text {\n\t\tcolor: var(--nile-hero-text-color);\n\t\tfont-size: var(--nile-hero-text-font-size);\n\t\tfont-style: normal;\n\t\tfont-weight: var(--nile-hero-text-font-weight);\n\t}\n\n\t.hero__slot {\n\t\tpadding: var(--nile-hero-first-elements-padding);\n\t}\n\n\t.hero__img__container {\n\t\theight:100%;\n\t\twidth:max-content;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop:0;\n\t}\n\n\t.hero__img {\n\t\tobject-fit:cover;\n\t\theight:100%;\n\t\twidth:auto;\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-hero.css.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 {css} from 'lit-element';\n\n/**\n * Hero CSS\n */\nexport const styles = css`\n\n\t:host {\n\t\tdisplay:block;\n\t\t--transition:2000ms;\n\t}\n\t.hero__container{\n\t\toverflow:hidden;\n\t\twidth:100%;\n\t\tposition:relative;\n\t\tdisplay:block;\n  \t\ttransition: var(--transition);\n\t}\n\t.hero__body {\n\t\theight:100%;\n\t}\n\n\t.hero__slot {\n\t\tpadding-left: 48px;\n\t\tpadding-top: 24px \n\t}\n\n\t.hero__img__container {\n\t\theight:var(--nile-hero-height);\n\t\toverflow:hidden;\n\t\twidth:max-content;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tbottom:0;\n\t\ttransition:var(--transition);\n\t}\n\n\t.hero__img {\n\t\tobject-fit:cover;\n\t\theight:var(--nile-hero-height);\n\t\twidth:auto;\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-hero/nile-hero.d.ts

@@ -13,7 +13,11 @@ import NileElement from '../internal/nile-element';
  *
  */
 export declare class NileHero extends NileElement {
+    heroContainer: HTMLElement;
+    heroHeader: HTMLElement;
+    imgContainer: HTMLElement;
     icon: string;
+    collapse: boolean;
     imgSrc: string;
     heroText: string;
     /**
@@ -21,6 +25,8 @@ export declare class NileHero extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    updateOnCollapseChange(): void;
     /**
      * Render method
      * @slot This is a slot test

package/dist/src/nile-hero/nile-hero.js

@@ -6,9 +6,10 @@
  */
 import { __decorate } from "tslib";
 import { html, property } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query } from 'lit/decorators.js';
 import { styles } from './nile-hero.css';
 import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
 /**
  * Nile hero component.
  *
@@ -19,6 +20,7 @@ let NileHero = class NileHero extends NileElement {
     constructor() {
         super(...arguments);
         this.icon = 'action';
+        this.collapse = false;
         this.imgSrc = '';
         this.heroText = 'Nile Hero';
         /* #endregion */
@@ -31,39 +33,74 @@ let NileHero = class NileHero extends NileElement {
         return [styles];
     }
     /* #endregion */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            this.updateOnCollapseChange();
+        });
+    }
     /* #region Methods */
+    updateOnCollapseChange() {
+        if (!this.heroContainer)
+            return;
+        const heroHeaderHeight = this.heroHeader.scrollHeight;
+        if (this.collapse) {
+            this.heroContainer.style.height = heroHeaderHeight + 'px';
+            this.heroContainer.style.background = "var(--nile-hero-collapsed-background,#fff)";
+            this.heroContainer.style.borderBottom = "1px solid #EAECF0";
+            this.imgContainer.style.opacity = '0';
+        }
+        else {
+            this.heroContainer.style.height = "var(--nile-hero-height)";
+            this.heroContainer.style.background = "linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%)";
+            this.heroContainer.style.borderBottom = '';
+            this.imgContainer.style.opacity = '1';
+        }
+    }
     /**
      * Render method
      * @slot This is a slot test
      */
     render() {
         return html `
+		<div class="hero__container">
 			<div class="hero__body">
-				<div class="hero__header">
-					<span class="icon__container">
-						<nile-icon name="${this.icon}" ></nile-icon>
-					</span>
-					<span class="hero__text">${this.heroText}</span>
-				</div>
+				<nile-hero-header hero-text="${this.heroText}" icon="${this.icon}"></nile-hero-header>
 				<div class="hero__slot">
 					<slot></slot>
 				</div>
 			</div>
-			<div class="hero__img__container">
+			<div class="hero__img__container" id="hero__img__container">
 				<img src="${this.imgSrc}" class="hero__img">
 			</div>
+		</div>
 		`;
     }
 };
+__decorate([
+    query('.hero__container')
+], NileHero.prototype, "heroContainer", void 0);
+__decorate([
+    query('nile-hero-header')
+], NileHero.prototype, "heroHeader", void 0);
+__decorate([
+    query('.hero__img__container')
+], NileHero.prototype, "imgContainer", void 0);
 __decorate([
     property({ reflect: true })
 ], NileHero.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], NileHero.prototype, "collapse", void 0);
 __decorate([
     property({ reflect: true, attribute: 'img-src' })
 ], NileHero.prototype, "imgSrc", void 0);
 __decorate([
     property({ reflect: true, attribute: 'hero-text' })
 ], NileHero.prototype, "heroText", void 0);
+__decorate([
+    watch('collapse')
+], NileHero.prototype, "updateOnCollapseChange", null);
 NileHero = __decorate([
     customElement('nile-hero')
 ], NileHero);

package/dist/src/nile-hero/nile-hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-hero.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAE,QAAQ,EAAiC,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QACoB,SAAI,GAAQ,QAAQ,CAAA;QACK,WAAM,GAAQ,EAAE,CAAC;QACf,aAAQ,GAAQ,WAAW,CAAC;QAqCjF,gBAAgB;IACjB,CAAC;IApCA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;yBAIY,IAAI,CAAC,IAAI;;gCAEF,IAAI,CAAC,QAAQ;;;;;;;gBAO7B,IAAI,CAAC,MAAM;;GAExB,CAAC;IACH,CAAC;CAGD,CAAA;AAxC0B;IAAzB,QAAQ,CAAC,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC;sCAAqB;AACK;IAAlD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;wCAAkB;AACf;IAApD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CAA6B;AAHrE,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyCpB;SAzCY,QAAQ;AA2CrB,eAAe,QAAQ,CAAC","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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-hero.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile hero component.\n *\n * @tag nile-hero\n *\n */\n@customElement('nile-hero')\nexport class NileHero extends NileElement {\n\t@property({reflect:true}) icon:string='action'\n\t@property({ reflect: true, attribute: 'img-src' }) imgSrc:string='';\n\t@property({ reflect: true, attribute: 'hero-text' }) heroText:string='Nile Hero';\n\n\t/**\n\t * The styles for nile-hero\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=\"hero__body\">\n\t\t\t\t<div class=\"hero__header\">\n\t\t\t\t\t<span class=\"icon__container\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" ></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"hero__text\">${this.heroText}</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"hero__slot\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"hero__img__container\">\n\t\t\t\t<img src=\"${this.imgSrc}\" class=\"hero__img\">\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileHero;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-hero': NileHero;\n  }\n}"]}
+{"version":3,"file":"nile-hero.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.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 {LitElement, html, property, CSSResultArray, TemplateResult,nothing} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport {styles} from './nile-hero.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile hero component.\n *\n * @tag nile-hero\n *\n */\n@customElement('nile-hero')\nexport class NileHero extends NileElement {\n\t@query('.hero__container') heroContainer:HTMLElement;\n\t@query('nile-hero-header') heroHeader:HTMLElement;\n\t@query('.hero__img__container') imgContainer:HTMLElement;\n\t@property({ reflect: true }) icon: string = 'action';\n\t@property({ reflect: true, type: Boolean }) collapse: boolean = false;\n\t\n\t@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';\n\t@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';\n\n\t/**\n\t * The styles for nile-hero\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.updateComplete.then(() => {\n\t\t\tthis.updateOnCollapseChange();\n\t\t});\n\t}\n\t/* #region Methods */\n\n\t@watch('collapse')\n\tupdateOnCollapseChange(){\n\t\tif(!this.heroContainer) return;\n\t\tconst heroHeaderHeight=this.heroHeader.scrollHeight;\n\t\tif(this.collapse){\n\t\t\tthis.heroContainer.style.height=heroHeaderHeight+'px';\n\t\t\tthis.heroContainer.style.background=\"var(--nile-hero-collapsed-background,#fff)\";\n\t\t\tthis.heroContainer.style.borderBottom=\"1px solid #EAECF0\";\n\t\t\tthis.imgContainer.style.opacity='0';\n\t\t}\n\t\telse{\n\t\t\tthis.heroContainer.style.height=\"var(--nile-hero-height)\";\n\t\t\tthis.heroContainer.style.background=\"linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%)\";\n\t\t\tthis.heroContainer.style.borderBottom='';\n\t\t\tthis.imgContainer.style.opacity='1';\n\t\t}\n\t}\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t<div class=\"hero__container\">\n\t\t\t<div class=\"hero__body\">\n\t\t\t\t<nile-hero-header hero-text=\"${this.heroText}\" icon=\"${this.icon}\"></nile-hero-header>\n\t\t\t\t<div class=\"hero__slot\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"hero__img__container\" id=\"hero__img__container\">\n\t\t\t\t<img src=\"${this.imgSrc}\" class=\"hero__img\">\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileHero;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-hero': NileHero;\n  }\n}"]}

package/dist/src/nile-hero-header/index.d.ts

@@ -0,0 +1 @@
+export { NileHeroHeader } from './nile-hero-header';

package/dist/src/nile-hero-header/index.js

@@ -0,0 +1,2 @@
+export { NileHeroHeader } from './nile-hero-header';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-hero-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-hero-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileHeroHeader } from './nile-hero-header';"]}

package/dist/src/nile-hero-header/nile-hero-header.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * HeroHeader CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;