npm - @aquera/nile-elements - Versions diffs - 0.0.16 → 0.0.18 - Mend

@aquera/nile-elements 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/src/nile-button/nile-button.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,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 Button CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; /\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border : none;\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n box-shadow: none;\n }\n\n / Primary /\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600);\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-700);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-900);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n box-shadow: none;\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-700);\n }\n .button--standard.button--tertiary.button--disabled {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n box-shadow: none;\n }\n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n /\n * Outline buttons\n /\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n / Default /\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Primary /\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n / Success /\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n / Neutral /\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Warning /\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n / Danger /\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /\n * Pill modifier\n /\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /\n * Circle modifier\n /\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n / Caret modifier /\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /\n * Loading modifier\n /\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n`;\n"]}
1	+ {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbxB,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 Button CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; /\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-button-secondary);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-hover);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-pressed);\n border-color: var(--nile-colors-button-secondary-pressed-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n / Primary /\n .button--standard.button--primary {\n background-color: var(--nile-colors-button-primary);\n border-color: var(--nile-colors-button-primary-border);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-hover);\n border-color: var(--nile-colors-button-primary-hover);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-pressed);\n border-color: var(--nile-colors-button-primary-pressed);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-button-tertiary);\n border-color: var(--nile-colors-button-tertiary-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: var(--nile-colors-button-tertiary-pressed-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-button-caution);\n border-color: var(--nile-colors-button-caution);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-hover);\n border-color: var(--nile-colors-button-caution-hover);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-pressed);\n border-color: var(--nile-colors-button-caution-pressed);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution.button--disabled,\n .button--standard.button--caution.button--disabled:hover,\n .button--standard.button--caution.button--disabled:active {\n background-color: var(--nile-colors-button-caution-disabled);\n border-color: var(--nile-colors-button-caution-disabled);\n color: var(--nile-colors-button-caution-disabled-text);\n }\n\n\n / Primary Variant - Nile Icon Fill /\n .button--standard.button--primary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n /\n * Outline buttons\n /\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n / Default /\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Primary /\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n / Success /\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n / Neutral /\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Warning /\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n / Danger /\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /\n * Pill modifier\n /\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /\n * Circle modifier\n /\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n / Caret modifier /\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /\n * Loading modifier\n /\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n`;\n"]}

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

@@ -81,8 +81,17 @@ export const styles = css `
     cursor: pointer;
   }
+  .current-date {
+    border: 1px solid #1978b8;
+  }
+  .day:hover {
+    background-color: #e5e9eb;
+  }
   .filler {
-    color: grey;
+    color: #7f7f7f;
+    pointer-events: none;
   }
   .selected-date {
@@ -91,12 +100,15 @@ export const styles = css `
     background: #a5d3f3;
   }
+  .selected-date:hover {
+    background: #a5d3f3;
+  }
   .calendar-wrapper {
     background: white;
     display: flex;
     justify-content: space-between;
     width: 365px;
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
   .selected-date,
@@ -148,6 +160,10 @@ export const styles = css `
     width: 365px;
   }
+  .base__relative {
+    width: 446px;
+  }
   .base__range {
     padding: 24px;
   }
@@ -158,6 +174,10 @@ export const styles = css `
     width: 365px;
   }
+  .calender-input--relative {
+    width: 446px;
+  }
   .from {
     display: flex;
     justify-content: space-between;
@@ -181,7 +201,101 @@ export const styles = css `
   .button-contaner {
     width: 100%;
     text-align: right;
-    padding: 12px 0 0 0;
+    padding: 24px 0 0 0;
+  }
+  .calendar-config {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+  .calendar-switcher {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e9eb;
+  }
+  .calendar-switch {
+    padding-bottom: 12px;
+    cursor: pointer;
+  }
+  .calendar-switch__active {
+    padding-bottom: 12px;
+    border-bottom: 4px solid #005ea6;
+  }
+  .unit-container {
+    display: flex;
+    flex-direction: column;
+    width: 446px;
+    margin-top: 24px;
+  }
+  .time-unit-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+    gap: 24px;
+  }
+  .time-unit-name {
+    width: 54px;
+  }
+  .time-unit-name span {
+    margin-right: 24px;
+    color: var(--color-text-default, #000);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+  .time-unit-value {
+    display: flex;
+  }
+  .time-value {
+    display: inline-flex;
+    width: 48px;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 5px;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    margin-right: 16px;
+    border-radius: 4px;
+    border: 1px solid #c7ced4;
+    background: rgba(255, 255, 255, 0.2);
+  }
+  .time-value--selected {
+    background: #a5d3f3;
+  }
+  .time-value:last-child {
+    margin-right: 0;
+  }
+  .time-value:hover {
+    background: #e5e9eb;
+  }
+  .time-value--selected:hover {
+    background-color: #a5d3f3;
+  }
+  .hidden {
+    display: none !important;
   }
 `;
 export default [styles];

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

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KxB~~,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 .filler {\n color: ~~grey~~;\n }\n\n .selected-date {\n color: white;\n border-radius: 4px;\n background: #a5d3f3;\n }\n\n .calendar-wrapper {\n background: white;\n display: flex;\n justify-content: space-between;\n width: 365px;\n ~~box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\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__range {\n padding: 24px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding-bottom: 0px;\n width: 365px;\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: 12px 0 0 0;\n }\n`;\n\nexport default [styles];\n"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSxB,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 display: flex;\n align-items: flex-start;\n gap: 24px;\n justify-content: space-between;\n border-bottom: 1px solid #e5e9eb;\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"]}

package/dist/src/nile-calendar/nile-calendar.d.ts CHANGED Viewed

@@ -33,6 +33,10 @@ export declare class NileCalendar extends NileElement {
     endDate: Date | null;
     isSelectingStart: boolean;
     range: boolean;
+    type: string;
+    selectedUnit: string;
+    selectedValue: number;
+    selectedTimeZone: string;
     valueChanged(): void;
     updated(changedProperties: PropertyValues): void;
     static get observedAttributes(): string[];
@@ -45,6 +49,8 @@ export declare class NileCalendar extends NileElement {
     private prevMonth;
     private selectDate;
     private confimRange;
+    convertTZ(date: Date, tzString: any): Date;
+    isCurrentDate(day: number, month: number, year: number): boolean;
     private renderMonth;
     private formatDate;
     private formatDateRange;
@@ -57,9 +63,18 @@ export declare class NileCalendar extends NileElement {
     private parseTime;
     private handleStartTimeInput;
     private handleEndTimeInput;
+    setType(newType: string): void;
+    createRelativePeriod(unit: String, value: number): {
+        startDate: Date;
+        endDate: Date;
+    };
+    handleTimeValueClick(unit: string, value: number, event: any): void;
+    renderTimeValues(unit: string, values: any[]): TemplateResult<1>[];
+    handleDurationChange(event: any): void;
+    handleUnitChange(event: any): void;
+    handleTimeZoneChange(event: any): void;
     /**
      * Render method
-     * @slot This is a slot test
      */
     render(): TemplateResult;
 }

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

@@ -12,6 +12,7 @@ import { query } from 'lit/decorators.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import '../nile-popup';
+import { TIMEZONES } from './timezones';
 /**
  * Nile icon component.
  *
@@ -28,8 +29,10 @@ let NileCalendar = class NileCalendar extends NileElement {
         this.formattedDate = null;
         this.startDate = null;
         this.endDate = null;
-        this.isSelectingStart = true; // flag to indicate what we're selecting
+        this.isSelectingStart = true;
         this.range = false;
+        this.type = 'absolute';
+        this.selectedTimeZone = 'local';
     }
     /**
      * The styles for NileCalendar
@@ -189,6 +192,10 @@ let NileCalendar = class NileCalendar extends NileElement {
     }
     confimRange() {
         if (this.startDate && this.endDate) {
+            if (this.selectedTimeZone !== 'local') {
+                this.startDate = this.convertTZ(this.startDate, this.selectedTimeZone);
+                this.endDate = this.convertTZ(this.endDate, this.selectedTimeZone);
+            }
             this.emit('nile-changed', {
                 startDate: this.startDate,
                 endDate: this.endDate,
@@ -202,6 +209,15 @@ let NileCalendar = class NileCalendar extends NileElement {
             };
         }
     }
+    convertTZ(date, tzString) {
+        return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString }));
+    }
+    isCurrentDate(day, month, year) {
+        const today = new Date();
+        return (day === today.getDate() &&
+            month + 1 === today.getMonth() + 1 &&
+            year === today.getFullYear());
+    }
     renderMonth(year, month, daysArray) {
         const firstDay = new Date(year, month, 1).getDay();
         const lastDay = new Date(year, month + 1, 0).getDay();
@@ -242,7 +258,12 @@ let NileCalendar = class NileCalendar extends NileElement {
         return html `
       <div class="calendar">
         <div class="calendar-header">
-          <nile-icon class="calendar-header__month-navigation" name="arrowleft" color="black" @click="${this.prevMonth}">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            name="arrowleft"
+            color="black"
+            @click="${this.prevMonth}"
+          >
           </nile-icon>
           <span
             >${new Date(year, month).toLocaleString('default', {
@@ -250,7 +271,12 @@ let NileCalendar = class NileCalendar extends NileElement {
         })}
             ${year}</span
           >
-          <nile-icon class="calendar-header__month-navigation" name="arrowright" color="black" @click="${this.nextMonth}">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            name="arrowright"
+            color="black"
+            @click="${this.nextMonth}"
+          >
           </nile-icon>
         </div>
         <div class="day-names">
@@ -269,7 +295,11 @@ let NileCalendar = class NileCalendar extends NileElement {
             return html ` <div
               class="day ${isSelectedDate(day, month, year, isCurrentMonth)} ${isInRange(day, month, year, isCurrentMonth)
                 ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}"
+                : ''} ${!isCurrentMonth ? 'filler' : ''}
+                ${this.isCurrentDate(day, month, year) && isCurrentMonth
+                ? 'current-date'
+                : ''}
+                "
               @click="${() => {
                 if (isCurrentMonth) {
                     this.selectDate(day, month, year);
@@ -386,34 +416,197 @@ let NileCalendar = class NileCalendar extends NileElement {
         }
         this.requestUpdate();
     }
-    /* #endregion */
-    /* #region Methods */
+    setType(newType) {
+        this.type = newType;
+    }
+    createRelativePeriod(unit, value) {
+        const endTime = new Date();
+        const startTime = new Date();
+        switch (unit) {
+            case 'minutes':
+                startTime.setMinutes(startTime.getMinutes() - value);
+                break;
+            case 'hours':
+                startTime.setHours(startTime.getHours() - value);
+                break;
+            case 'days':
+                startTime.setDate(startTime.getDate() - value);
+                break;
+            case 'weeks':
+                startTime.setDate(startTime.getDate() - 7 * value); // Subtract weeks as days
+                break;
+            case 'months':
+                startTime.setMonth(startTime.getMonth() - value);
+                break;
+        }
+        this.startDate = new Date(startTime.getTime());
+        this.endDate = new Date(endTime.getTime());
+        this.requestUpdate();
+        return {
+            startDate: this.startDate,
+            endDate: this.endDate,
+        };
+    }
+    handleTimeValueClick(unit, value, event) {
+        const timestamps = this.createRelativePeriod(unit, value);
+        this.selectedUnit = unit;
+        this.selectedValue = value;
+        this.requestUpdate();
+    }
+    renderTimeValues(unit, values) {
+        return values.map(value => html `
+          <div
+            class="time-value ${this.selectedUnit === unit &&
+            this.selectedValue === value
+            ? 'time-value--selected'
+            : ''}"
+            @click=${(e) => this.handleTimeValueClick(unit, value, e)}
+          >
+            ${value}
+          </div>
+        `);
+    }
+    handleDurationChange(event) {
+        this.selectedValue = Number(event.detail.value);
+        if (this.selectedUnit && this.selectedValue) {
+            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+        }
+    }
+    handleUnitChange(event) {
+        this.selectedUnit = event.detail.value;
+        if (this.selectedUnit && this.selectedValue) {
+            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+        }
+    }
+    handleTimeZoneChange(event) {
+        this.selectedTimeZone = event.detail.value;
+        this.requestUpdate();
+    }
     /**
      * Render method
-     * @slot This is a slot test
      */
     render() {
+        const timeZones = TIMEZONES;
         const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
         const nextMonth = (this.currentMonth + 1) % 12;
         const nextYear = this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
         const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
         return html `
+      <div
+        class="base ${this.range ? 'base__range' : ''} ${this.type ===
+            'relative'
+            ? 'base__relative'
+            : ''}"
+      >
+        <div class="calendar-config ${!this.range ? 'hidden' : ''}">
+          <div class="calendar-switcher">
+            <div
+              class="calendar-switch${this.type === 'absolute'
+            ? '__active'
+            : ''}"
+              @click="${() => this.setType('absolute')}"
+            >
+              Absolute
+            </div>
+            <div
+              class="calendar-switch${this.type === 'relative'
+            ? '__active'
+            : ''}"
+              @click="${() => this.setType('relative')}"
+            >
+              Relative
+            </div>
+          </div>
-        <div class="base ${this.range ? 'base__range' : ''}">
-          <div class="calendar-wrapper" >
-            <div class="calendar-container ${this.range ? 'with-margin' : ''}">
-              ${this.renderMonth(this.currentYear, this.currentMonth, this.getDaysArray(this.currentYear, this.currentMonth))}
+          <div class="calendar-timezone">
+            <nile-select
+              searchEnabled
+              hoist
+              value=${this.selectedTimeZone}
+              @nile-change=${this.handleTimeZoneChange}
+            >
+              <nile-option value="local">Local Time Zone</nile-option>
+              ${timeZones.map(timeZone => html `
+                  <nile-option value="${timeZone}">${timeZone}</nile-option>
+                `)}
+            </nile-select>
+          </div>
+        </div>
+        <div
+          class="calendar-wrapper  ${this.type !== 'absolute' ? 'hidden' : ''}"
+        >
+          <div class="calendar-container ${this.range ? 'with-margin' : ''}">
+            ${this.renderMonth(this.currentYear, this.currentMonth, this.getDaysArray(this.currentYear, this.currentMonth))}
+          </div>
+        </div>
+        <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Minutes</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('minutes', [1, 3, 5, 15, 30, 45])}
             </div>
-            <!-- ${this.range
-            ? html `
-                  <div class="calendar-container">
-                    ${this.renderMonth(this.currentYear, (this.currentMonth + 1) % 12, this.getDaysArray(this.currentYear, (this.currentMonth + 1) % 12))}
-                  </div>
-                `
-            : ''} -->
+          </div>
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Hours</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
+            </div>
+          </div>
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Days</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
+            </div>
           </div>
-          ${this.range
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Weeks</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
+            </div>
+          </div>
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Months:</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('months', [3, 6, 12, 15])}
+            </div>
+          </div>
+        </div>
+        ${this.range && this.type === 'relative'
+            ? html `
+          <div class="calender-input calender-input--relative">
+            <div class="from">
+              <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-change="${this.handleUnitChange}"
+              >
+                <nile-option value="minutes"> Minutes </nile-option>
+                <nile-option value="hours"> Hours </nile-option>
+                <nile-option value="days"> Days </nile-option>
+                <nile-option value="weeks"> Weeks </nile-option>
+                <nile-option value="months"> Months </nile-option>
+          </nile-select>
+            </div>
+          <div class="button-contaner">
+            <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate}"  @click="${this.confimRange}"> Apply</nile-button>
+            </div>
+        </div>
+        </div>
+        `
+            : ''}
+        ${this.range && this.type === 'absolute'
             ? html `
           <div class="calender-input">
             <span class="manual-input-label">From </span>
@@ -437,7 +630,7 @@ let NileCalendar = class NileCalendar extends NileElement {
         </div>
         `
             : ''}
-        </div>
+      </div>
     `;
     }
 };
@@ -471,6 +664,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileCalendar.prototype, "range", void 0);
+__decorate([
+    property({ type: String })
+], NileCalendar.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NileCalendar.prototype, "selectedUnit", void 0);
+__decorate([
+    property({ type: Number })
+], NileCalendar.prototype, "selectedValue", void 0);
+__decorate([
+    property({ type: String })
+], NileCalendar.prototype, "selectedTimeZone", void 0);
 __decorate([
     watch('value')
 ], NileCalendar.prototype, "valueChanged", null);