@aquera/nile-elements 0.0.38 → 0.0.39

package/dist/src/nile-button-filter/nile-button-filter.css.js

@@ -0,0 +1,38 @@
+/**
+ * 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';
+/**
+ * ButtonFilter CSS
+ */
+export const styles = css `
+  :host {
+  }
+
+  .inner__text {
+    display: flex;
+    gap: var(--nile-radius-base-standard);
+	align-items: flex-start;
+  }
+
+  .inner__text span {
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: Colfax-regular;
+    font-size: var(--nile-font-size-base);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--nile-font-size-base); /* 100% */
+    letter-spacing: 0.2px;
+  }
+
+  .inner__text nile-badge {
+    color:var(--nile-colors-white-base);
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-button-filter.css.js.map

package/dist/src/nile-button-filter/nile-button-filter.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-filter.css.js","sourceRoot":"","sources":["../../../src/nile-button-filter/nile-button-filter.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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 * ButtonFilter CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .inner__text {\n    display: flex;\n    gap: var(--nile-radius-base-standard);\n\talign-items: flex-start;\n  }\n\n  .inner__text span {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: Colfax-regular;\n    font-size: var(--nile-font-size-base);\n    font-style: normal;\n    font-weight: 600;\n    line-height: var(--nile-font-size-base); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  .inner__text nile-badge {\n    color:var(--nile-colors-white-base);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-button-filter/nile-button-filter.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 icon component.
+ *
+ * @tag nile-button-filter
+ *
+ */
+export declare class NileButtonFilter extends NileElement {
+    /**
+     * The styles for ButtonFilter
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /** Disables the duplicate entries. */
+    values: any;
+    private isOpen;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    private handleInnerText;
+    render(): TemplateResult;
+}
+export default NileButtonFilter;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-button-filter': NileButtonFilter;
+    }
+}

package/dist/src/nile-button-filter/nile-button-filter.js

@@ -0,0 +1,100 @@
+/**
+ * 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, state } from 'lit/decorators.js';
+import { styles } from './nile-button-filter.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-filter
+ *
+ */
+let NileButtonFilter = class NileButtonFilter extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Disables the duplicate entries. */
+        this.values = [];
+        this.isOpen = false;
+        /* #endregion */
+    }
+    /**
+     * The styles for ButtonFilter
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    handleInnerText(values) {
+        if (!values.length) {
+            return '';
+        }
+        let inner__text__value = values[0].slice(0, 3);
+        if (values[0].length > 3) {
+            inner__text__value = inner__text__value + '.';
+        }
+        let final__value = html `
+      <div class="inner__text">
+        <span> ${inner__text__value}</span>
+        ${values.length > 1
+            ? html `
+              <nile-badge variant="primary" rounded
+                >+${values.length - 1}</nile-badge
+              >
+            `
+            : ``}
+      </div>
+    `;
+        return final__value;
+    }
+    render() {
+        const inner__value = this.handleInnerText(this.values);
+        return html `
+      <nile-button variant="tertiary">
+        <div class="inner__text">
+          <slot></slot>
+          ${inner__value}
+        </div>
+
+        ${!this.isOpen
+            ? html ` <nile-icon
+              slot="suffix"
+              name="arrowdown"
+              size="16"
+              color="black"
+            ></nile-icon>`
+            : html ` <nile-icon
+              slot="suffix"
+              name="arrowup"
+              size="16"
+              color="black"
+            ></nile-icon>`}
+
+        <nile-icon slot="suffix" name="close" size="16" color="black"></nile-icon>
+      </nile-button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], NileButtonFilter.prototype, "values", void 0);
+__decorate([
+    state()
+], NileButtonFilter.prototype, "isOpen", void 0);
+NileButtonFilter = __decorate([
+    customElement('nile-button-filter')
+], NileButtonFilter);
+export { NileButtonFilter };
+export default NileButtonFilter;
+//# sourceMappingURL=nile-button-filter.js.map

package/dist/src/nile-button-filter/nile-button-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-filter.js","sourceRoot":"","sources":["../../../src/nile-button-filter/nile-button-filter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QASL,sCAAsC;QACX,WAAM,GAAQ,EAAE,CAAC;QAE3B,WAAM,GAAG,KAAK,CAAC;QA6DhC,gBAAgB;IAClB,CAAC;IAzEC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEK,eAAe,CAAC,MAAW;QACjC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAClB,OAAO,EAAE,CAAC;SACX;QACD,IAAI,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC/C,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACxB,kBAAkB,GAAG,kBAAkB,GAAG,GAAG,CAAC;SAC/C;QACD,IAAI,YAAY,GAAG,IAAI,CAAA;;iBAEV,kBAAkB;UACzB,MAAM,CAAC,MAAM,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAA;;oBAEI,MAAM,CAAC,MAAM,GAAG,CAAC;;aAExB;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;QACF,OAAO,YAAY,CAAC;IACtB,CAAC;IAEM,MAAM;QACX,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvD,OAAO,IAAI,CAAA;;;;YAIH,YAAY;;;UAGd,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;0BAKU;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;0BAKU;;;;KAIrB,CAAC;IACJ,CAAC;CAGF,CAAA;AAhE4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAkB;AAEnC;IAAR,KAAK,EAAE;gDAAwB;AAZrB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA0E5B;SA1EY,gBAAgB;AA4E7B,eAAe,gBAAgB,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-button-filter.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-button-filter\n *\n */\n@customElement('nile-button-filter')\nexport class NileButtonFilter extends NileElement {\n  /**\n   * The styles for ButtonFilter\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  /** Disables the duplicate entries. */\n  @property({ type: Array }) values: any = [];\n\n  @state() private isOpen = false;\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleInnerText(values: any) {\n    if (!values.length) {\n      return '';\n    }\n    let inner__text__value = values[0].slice(0, 3);\n    if (values[0].length > 3) {\n      inner__text__value = inner__text__value + '.';\n    }\n    let final__value = html`\n      <div class=\"inner__text\">\n        <span> ${inner__text__value}</span>\n        ${values.length > 1\n          ? html`\n              <nile-badge variant=\"primary\" rounded\n                >+${values.length - 1}</nile-badge\n              >\n            `\n          : ``}\n      </div>\n    `;\n    return final__value;\n  }\n\n  public render(): TemplateResult {\n    const inner__value = this.handleInnerText(this.values);\n    return html`\n      <nile-button variant=\"tertiary\">\n        <div class=\"inner__text\">\n          <slot></slot>\n          ${inner__value}\n        </div>\n\n        ${!this.isOpen\n          ? html` <nile-icon\n              slot=\"suffix\"\n              name=\"arrowdown\"\n              size=\"16\"\n              color=\"black\"\n            ></nile-icon>`\n          : html` <nile-icon\n              slot=\"suffix\"\n              name=\"arrowup\"\n              size=\"16\"\n              color=\"black\"\n            ></nile-icon>`}\n\n        <nile-icon slot=\"suffix\" name=\"close\" size=\"16\" color=\"black\"></nile-icon>\n      </nile-button>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileButtonFilter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button-filter': NileButtonFilter;\n  }\n}\n"]}

package/dist/src/nile-button-toggle/nile-button-toggle.css.js

@@ -43,10 +43,11 @@ export const styles = css `
 
   .nile-button-toggle__end {
     border-radius: 0 4px 4px 0;
+    border-left: 0;
   }
 
   .nile-button-toggle__middle {
-    border-width: 1px 0px;
+    border-width: 1px 1px 1px 0;
     border-style: solid;
     border-color: #ccc;
     border-radius: 0;

package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,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 * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: 12px;\n    border: 1px solid #ccc;\n    cursor: pointer;\n    border-radius: 4px;\n    color: #000;\n    text-align: center;\n    font-family: Colfax-regular;\n    font-size: 14px;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .nile-button-toggle:hover {\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-button-toggle:active {\n    background: #E5E9EB;\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: 4px 0 0 4px;\n  }\n\n  .nile-button-toggle__end {\n    border-radius: 0 4px 4px 0;\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 0px;\n    border-style: solid;\n    border-color: #ccc;\n    border-radius: 0;\n  }\n\n  .nile-button-toggle__active {\n    background-color: #c7ced4;\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: #c7ced4;\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;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 * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: 12px;\n    border: 1px solid #ccc;\n    cursor: pointer;\n    border-radius: 4px;\n    color: #000;\n    text-align: center;\n    font-family: Colfax-regular;\n    font-size: 14px;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .nile-button-toggle:hover {\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-button-toggle:active {\n    background: #E5E9EB;\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: 4px 0 0 4px;\n  }\n\n  .nile-button-toggle__end {\n    border-radius: 0 4px 4px 0;\n    border-left: 0;\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 1px 1px 0;\n    border-style: solid;\n    border-color: #ccc;\n    border-radius: 0;\n  }\n\n  .nile-button-toggle__active {\n    background-color: #c7ced4;\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: #c7ced4;\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -14,14 +14,11 @@ export const styles = css `
 
   .calendar-container {
     font-family: Colfax-regular;
-    width: 365px;
+    width: 290px;
     height: auto;
     text-align: center;
     background: white;
-  }
-
-  .calendar-container.with-margin {
-    margin-right: 20px;
+    border-radius: 8px;
   }
 
   .calendar-header {
@@ -35,6 +32,12 @@ export const styles = css `
     letter-spacing: 0.2px;
   }
 
+  .header-divider {
+    background: #c7ced4;
+    height: 1px;
+    width: 100%;
+  }
+
   .calendar-header__month-navigation {
     cursor: pointer;
   }
@@ -51,6 +54,7 @@ export const styles = css `
     line-height: 14px;
     letter-spacing: 0.2px;
     height: 50px;
+    padding: 0 12px 0 12px;
   }
 
   .day-names,
@@ -58,23 +62,22 @@ export const styles = css `
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    height: auto;
     align-items: center;
+    gap: 4px 7px;
   }
 
   .days {
     height: auto;
+    padding: 0 12px 12px 12px;
   }
 
   .day {
-    flex-basis: calc(100% / 7);
+    flex-basis: auto;
+    min-width: 32px;
+    min-height: 32px;
+    flex-grow: 0;
+    flex-shrink: 0;
     box-sizing: border-box;
-    width: 48px;
-    align-items: center;
-    padding: 10px;
-    height: 32px;
-    margin-top: 6px;
-    margin-bottom: 6px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -108,7 +111,8 @@ export const styles = css `
     background: white;
     display: flex;
     justify-content: space-between;
-    width: 365px;
+    width: 290px;
+    border-radius: 8px;
   }
 
   .selected-date,
@@ -156,26 +160,23 @@ export const styles = css `
 
   .base {
     background-color: white;
-    border-radius: 4px;
-    width: 365px;
+    border-radius: 8px;
+    width: 290px;
   }
 
   .base__relative {
-    width: 446px;
-  }
-
-  .base__range {
-    padding: 24px;
+    width: 494px;
   }
 
   .calender-input {
     margin-top: 6px;
-    padding-bottom: 0px;
-    width: 365px;
+    padding: 0 16px;
+    width: 290px;
   }
 
   .calender-input--relative {
-    width: 446px;
+    width: 494px;
+    padding: 0;
   }
 
   .from {
@@ -183,6 +184,7 @@ export const styles = css `
     justify-content: space-between;
     gap: 8px;
     margin-top: 12px;
+    width: 125px;
   }
 
   .manual-input {
@@ -198,10 +200,11 @@ export const styles = css `
     letter-spacing: 0.2px;
   }
 
-  .button-contaner {
+  .button-container {
     width: 100%;
     text-align: right;
-    padding: 24px 0 0 0;
+    padding: 12px 16px 16px 16px;
+    box-sizing: border-box;
   }
 
   .calendar-config {
@@ -214,6 +217,7 @@ export const styles = css `
   .calendar-switcher {
     width: 100%;
     margin-right: 24px;
+    margin-top: 16px;
   }
 
   .calendar-switch {
@@ -229,8 +233,8 @@ export const styles = css `
   .unit-container {
     display: flex;
     flex-direction: column;
-    width: 446px;
-    margin-top: 24px;
+    width: 494px;
+    padding: 24px 24px 0 24px;
   }
 
   .time-unit-group {
@@ -294,6 +298,24 @@ export const styles = css `
   .hidden {
     display: none !important;
   }
+
+  .calendar-timezone {
+    padding: 0 16px;
+  }
+
+  .unit-input-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 0px 24px;
+  }
+
+  .button-container--relative {
+    width: 100%;
+    text-align: right;
+    padding: 24px;
+    box-sizing: border-box;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-calendar.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RxB,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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .current-date {\n    border: 1px solid #1978b8;\n  }\n\n  .day:hover {\n    background-color: #e5e9eb;\n  }\n\n  .filler {\n    color: #7f7f7f;\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .selected-date:hover {\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__relative {\n    width: 446px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .calender-input--relative {\n    width: 446px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 24px 0 0 0;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin-right: 24px;\n  }\n\n  .calendar-switch {\n    padding-bottom: 12px;\n    cursor: pointer;\n  }\n\n  .calendar-switch__active {\n    padding-bottom: 12px;\n    border-bottom: 4px solid #005ea6;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    width: 446px;\n    margin-top: 24px;\n  }\n\n  .time-unit-group {\n    display: flex;\n    align-items: center;\n    margin-bottom: 24px;\n    gap: 24px;\n  }\n\n  .time-unit-name {\n    width: 54px;\n  }\n\n  .time-unit-name span {\n    margin-right: 24px;\n    color: var(--color-text-default, #000);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .time-unit-value {\n    display: flex;\n  }\n\n  .time-value {\n    display: inline-flex;\n    width: 48px;\n    height: 32px;\n    box-sizing: border-box;\n    padding: 5px;\n    border: 1px solid #ddd;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    margin-right: 16px;\n    border-radius: 4px;\n    border: 1px solid #c7ced4;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .time-value--selected {\n    background: #a5d3f3;\n  }\n\n  .time-value:last-child {\n    margin-right: 0;\n  }\n\n  .time-value:hover {\n    background: #e5e9eb;\n  }\n\n  .time-value--selected:hover {\n    background-color: #a5d3f3;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoTxB,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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 290px;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: 8px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .header-divider {\n    background: #c7ced4;\n    height: 1px;\n    width: 100%;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n    padding: 0 12px 0 12px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 4px 7px;\n  }\n\n  .days {\n    height: auto;\n    padding: 0 12px 12px 12px;\n  }\n\n  .day {\n    flex-basis: auto;\n    min-width: 32px;\n    min-height: 32px;\n    flex-grow: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .current-date {\n    border: 1px solid #1978b8;\n  }\n\n  .day:hover {\n    background-color: #e5e9eb;\n  }\n\n  .filler {\n    color: #7f7f7f;\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .selected-date:hover {\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 290px;\n    border-radius: 8px;\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 8px;\n    width: 290px;\n  }\n\n  .base__relative {\n    width: 494px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding: 0 16px;\n    width: 290px;\n  }\n\n  .calender-input--relative {\n    width: 494px;\n    padding: 0;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n    width: 125px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-container {\n    width: 100%;\n    text-align: right;\n    padding: 12px 16px 16px 16px;\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin-right: 24px;\n    margin-top: 16px;\n  }\n\n  .calendar-switch {\n    padding-bottom: 12px;\n    cursor: pointer;\n  }\n\n  .calendar-switch__active {\n    padding-bottom: 12px;\n    border-bottom: 4px solid #005ea6;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    width: 494px;\n    padding: 24px 24px 0 24px;\n  }\n\n  .time-unit-group {\n    display: flex;\n    align-items: center;\n    margin-bottom: 24px;\n    gap: 24px;\n  }\n\n  .time-unit-name {\n    width: 54px;\n  }\n\n  .time-unit-name span {\n    margin-right: 24px;\n    color: var(--color-text-default, #000);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .time-unit-value {\n    display: flex;\n  }\n\n  .time-value {\n    display: inline-flex;\n    width: 48px;\n    height: 32px;\n    box-sizing: border-box;\n    padding: 5px;\n    border: 1px solid #ddd;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    margin-right: 16px;\n    border-radius: 4px;\n    border: 1px solid #c7ced4;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .time-value--selected {\n    background: #a5d3f3;\n  }\n\n  .time-value:last-child {\n    margin-right: 0;\n  }\n\n  .time-value:hover {\n    background: #e5e9eb;\n  }\n\n  .time-value--selected:hover {\n    background-color: #a5d3f3;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .calendar-timezone {\n    padding: 0 16px;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    padding: 0px 24px;\n  }\n\n  .button-container--relative {\n    width: 100%;\n    text-align: right;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -177,7 +177,9 @@ let NileCalendar = class NileCalendar extends NileElement {
                     this.isSelectingStart = false;
                 }
                 else {
-                    this.endDate = selectedDate;
+                    const endDate = selectedDate;
+                    endDate.setHours(23, 59, 59, 999);
+                    this.endDate = endDate;
                 }
             }
         }
@@ -279,6 +281,7 @@ let NileCalendar = class NileCalendar extends NileElement {
           >
           </nile-icon>
         </div>
+        <div class="header-divider"> </div>
         <div class="day-names">
           <div class="day">Sun</div>
           <div class="day">Mon</div>
@@ -483,7 +486,6 @@ let NileCalendar = class NileCalendar extends NileElement {
         this.requestUpdate();
     }
     onTypeChange(event) {
-        console.log(event);
         this.type = event.detail.value;
     }
     /**
@@ -504,15 +506,16 @@ let NileCalendar = class NileCalendar extends NileElement {
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
-            <nile-tab-group @nile-tab-show="${this.onTypeChange}">
+            <nile-tab-group centered @nile-tab-show="${this.onTypeChange}">
               <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
               <nile-tab slot="nav" panel="relative">Relative</nile-tab>
             </nile-tab-group>
           </div>
 
-          <div class="calendar-timezone">
+        </div>
+
+        <div class="calendar-timezone ${!this.range ? 'hidden' : ''}">
             <nile-select
-              searchEnabled
               hoist
               value=${this.selectedTimeZone}
               @nile-change=${this.handleTimeZoneChange}
@@ -521,7 +524,6 @@ let NileCalendar = class NileCalendar extends NileElement {
               <nile-option value="UTC">UTC</nile-option>
             </nile-select>
           </div>
-        </div>
 
         <div
           class="calendar-wrapper  ${this.type !== 'absolute' ? 'hidden' : ''}"
@@ -571,11 +573,11 @@ let NileCalendar = class NileCalendar extends NileElement {
         ${this.range && this.type === 'relative'
             ? html `
           <div class="calender-input calender-input--relative">
-            <div class="from">
+            <div class="unit-input-container">
               <nile-input class="manual-input" label="Duration"  value="${this.selectedValue}"
               @nile-input="${this.handleDurationChange}"
               placeholder="Enter Value" ></nile-input>
-              <nile-select class="manual-input"  label="Unit" value="${this.selectedUnit}"
+              <nile-select class="manual-input"  label="Unit of time" style="margin-top:3px" value="${this.selectedUnit}"
               @nile-change="${this.handleUnitChange}"
               >
                 <nile-option value="minutes"> Minutes </nile-option>
@@ -587,7 +589,7 @@ let NileCalendar = class NileCalendar extends NileElement {
 
             </div>
 
-          <div class="button-contaner">
+          <div class="button-container--relative">
             <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate}"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
 
@@ -611,12 +613,10 @@ let NileCalendar = class NileCalendar extends NileElement {
             <nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>
             <nile-input class="manual-input" value="${this.formatTime(this.endDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"> </nile-input>
           </div>
-          <div class="button-contaner">
+        </div>
+        <div class="button-container">
             <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate}"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
-
-
-        </div>
         </div>
         `
             : ''}