@aquera/nile-elements 0.0.75 → 0.0.76

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.
package/README.md CHANGED
@@ -79,7 +79,11 @@ To run a local development server that serves the basic demo located in `demo/in
79
79
 
80
80
  In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
81
81
 
82
- #### Version 0.0.74
82
+ #### Version 0.0.76
83
+ - Nile drawer - fixed cross icon hover issue
84
+ - dependency: @aquera/nile@0.3.25
85
+
86
+ #### Version 0.0.75
83
87
  - Nile Checkbox - reverted facelift changes
84
88
  - Nile Calender - fixed days alignment issue in safari
85
89
  - Nile Card - fixed hover issue
@@ -1894,6 +1894,7 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
1894
1894
  `}},M.NileBadge.styles=VN,N([$M({reflect:!0})],M.NileBadge.prototype,"variant",void 0),N([$M({type:Boolean,reflect:!0})],M.NileBadge.prototype,"rounded",void 0),N([$M({reflect:!0})],M.NileBadge.prototype,"pilltype",void 0),M.NileBadge=N([FM("nile-badge")],M.NileBadge);const FN=new Map,HN=new WeakMap;function XN(M,N){return"rtl"===N.toLowerCase()?{keyframes:M.rtlKeyframes||M.keyframes,options:M.options}:M}function $N(M,N){FN.set(M,function(M){return M??{keyframes:[],options:{duration:0}}}(N))}function _N(M,N,D){const i=HN.get(M);if(i?.[N])return XN(i[N],D.dir);const j=FN.get(N);return j?XN(j,D.dir):{keyframes:[],options:{duration:0}}}const qN=new Set;function KN(M){if(qN.add(M),!document.body.classList.contains("nile-scroll-lock")){const M=function(){const M=document.documentElement.clientWidth;return Math.abs(window.innerWidth-M)}();document.body.classList.add("nile-scroll-lock"),document.body.style.setProperty("--nile-scroll-lock-size",`${M}px`)}}function MD(M){qN.delete(M),0===qN.size&&(document.body.classList.remove("nile-scroll-lock"),document.body.style.removeProperty("--nile-scroll-lock-size"))}function ND(M,N,D="vertical",i="smooth"){const j=function(M,N){return{top:Math.round(M.getBoundingClientRect().top-N.getBoundingClientRect().top),left:Math.round(M.getBoundingClientRect().left-N.getBoundingClientRect().left)}}(M,N),t=j.top+N.scrollTop,I=j.left+N.scrollLeft,z=N.scrollLeft,u=N.scrollLeft+N.offsetWidth,g=N.scrollTop,e=N.scrollTop+N.offsetHeight;"horizontal"!==D&&"both"!==D||(I<z?N.scrollTo({left:I,behavior:i}):I+M.clientWidth>u&&N.scrollTo({left:I-N.offsetWidth+M.clientWidth,behavior:i})),"vertical"!==D&&"both"!==D||(t<g?N.scrollTo({top:t,behavior:i}):t+M.clientHeight>e&&N.scrollTo({top:t-N.offsetHeight+M.clientHeight,behavior:i}))}function DD(M){return M.charAt(0).toUpperCase()+M.slice(1)}function iD(M,N){return new Promise((D=>{M.addEventListener(N,(function i(j){j.target===M&&(M.removeEventListener(N,i),D())}))}))}function jD(M){const N=M.tagName.toLowerCase();return"-1"!==M.getAttribute("tabindex")&&(!M.hasAttribute("disabled")&&((!M.hasAttribute("aria-disabled")||"false"===M.getAttribute("aria-disabled"))&&(!("input"===N&&"radio"===M.getAttribute("type")&&!M.hasAttribute("checked"))&&(null!==M.offsetParent&&("hidden"!==window.getComputedStyle(M).visibility&&(!("audio"!==N&&"video"!==N||!M.hasAttribute("controls"))||(!!M.hasAttribute("tabindex")||(!(!M.hasAttribute("contenteditable")||"false"===M.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(N)))))))))}function tD(M){const N=[];!function M(D){D instanceof HTMLElement&&(N.push(D),null!==D.shadowRoot&&"open"===D.shadowRoot.mode&&M(D.shadowRoot)),[...D.children].forEach((N=>M(N)))}(M);return{start:N.find((M=>jD(M)))??null,end:N.reverse().find((M=>jD(M)))??null}}let ID=[];class zD{constructor(M){this.tabDirection="forward",this.element=M,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){ID.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){ID=ID.filter((M=>M!==this.element)),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return ID[ID.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:M,end:N}=tD(this.element),D="forward"===this.tabDirection?M:N;"function"==typeof D?.focus&&D.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(M){"Tab"===M.key&&M.shiftKey&&(this.tabDirection="backward",requestAnimationFrame((()=>this.checkFocus())))}handleKeyUp(){this.tabDirection="forward"}}var uD=[z`
1895
1895
  :host {
1896
1896
  box-sizing: border-box;
1897
+ --nile-drawer-remove-icon-color:#000;
1897
1898
  }
1898
1899
 
1899
1900
  :host *,
@@ -2053,6 +2054,10 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
2053
2054
  display: none;
2054
2055
  }
2055
2056
 
2057
+ .drawer__close:hover {
2058
+ cursor:pointer;
2059
+ }
2060
+
2056
2061
  @media (forced-colors: active) {
2057
2062
  .drawer__panel {
2058
2063
  border: solid 1px hsl(0, 0%, 100%);
@@ -2063,7 +2068,12 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
2063
2068
  part="base"
2064
2069
  class=${uN({drawer:!0,"drawer--open":this.open,"drawer--top":"top"===this.placement,"drawer--end":"end"===this.placement,"drawer--bottom":"bottom"===this.placement,"drawer--start":"start"===this.placement,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--rtl":"rtl","drawer--has-footer":this.hasSlotController.test("footer")})}
2065
2070
  >
2066
- <div part="overlay" class="drawer__overlay" @click=${()=>this.requestClose("overlay")} tabindex="-1"></div>
2071
+ <div
2072
+ part="overlay"
2073
+ class="drawer__overlay"
2074
+ @click=${()=>this.requestClose("overlay")}
2075
+ tabindex="-1"
2076
+ ></div>
2067
2077
 
2068
2078
  <div
2069
2079
  part="panel"
@@ -2079,19 +2089,21 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
2079
2089
  <header part="header" class="drawer__header">
2080
2090
  <h2 part="title" class="drawer__title" id="title">
2081
2091
  <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
2082
- <slot name="label"> ${this.label.length>0?this.label:String.fromCharCode(65279)} </slot>
2092
+ <slot name="label">
2093
+ ${this.label.length>0?this.label:String.fromCharCode(65279)}
2094
+ </slot>
2083
2095
  </h2>
2084
2096
  <div part="header-actions" class="drawer__header-actions">
2085
2097
  <slot name="header-actions"></slot>
2086
- <nile-icon-button
2087
- part="close-button"
2088
- exportparts="base:close-button__base"
2098
+ <nile-icon
2089
2099
  class="drawer__close"
2090
2100
  name="close"
2091
- label='close'
2092
- library="system"
2101
+ label="close"
2102
+ part="close-button"
2103
+ exportparts="base:close-button__base"
2104
+ color="var(--nile-drawer-remove-icon-color)"
2093
2105
  @click=${()=>this.requestClose("close-button")}
2094
- ></nile-icon-button>
2106
+ ></nile-icon>
2095
2107
  </div>
2096
2108
  </header>
2097
2109
  `}
@@ -5029,13 +5041,18 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
5029
5041
  align-items: center;
5030
5042
  gap: 4px 7px;
5031
5043
  }
5032
-
5033
- @media not all and (min-resolution: .001dpcm) {
5034
- @supports (-webkit-appearance:none)
5044
+
5045
+ .day-names {
5046
+ flex-wrap: nowrap;
5047
+ }
5048
+
5049
+
5050
+ @media not all and (min-resolution: .001dpcm) {
5051
+ @supports (-webkit-appearance:none)
5035
5052
  { .day-names, .days {
5036
- column-gap: 6px;
5037
- }
5038
- }
5053
+ column-gap: 6px;
5054
+ }
5055
+ }
5039
5056
  }
5040
5057
 
5041
5058
  .days {
@@ -1,2 +1,2 @@
1
- System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif);\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 @media not all and (min-resolution: .001dpcm) { \n @supports (-webkit-appearance:none) \n { .day-names, .days {\n column-gap: 6px; \n } \n } \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 .selected-date:hover,\n .range-start:hover,\n .range-end:hover {\n background: #a5d3f3;\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: 352px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding: 0 16px;\n width: 290px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .calender-input--relative {\n width: 352px;\n padding: 0;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n margin-top: 12px;\n width: auto;\n }\n\n .manual-input {\n width: 125px;\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: 352px;\n gap: 10px;\n padding: 24px 24px 0 24px;\n }\n\n .time-unit-group {\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: center;\n gap: 12px;\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 gap: 3px;\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 .duration-input {\n width: 140px;\n }\n\n .time-input {\n width: 140px;\n }\n\n .minute-values {\n gap: 16px;\n }\n\n .weeks-values {\n gap: 16px;\n }\n\n .months-values {\n gap: 16px;\n }\n\n .not-allowed {\n pointer-events: none;\n color: var(--nile-colors-dark-500);\n }\n"]))));}};});
1
+ System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif);\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 .day-names {\n flex-wrap: nowrap;\n }\n\n\n @media not all and (min-resolution: .001dpcm) {\n @supports (-webkit-appearance:none)\n { .day-names, .days {\n column-gap: 6px;\n }\n }\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 .selected-date:hover,\n .range-start:hover,\n .range-end:hover {\n background: #a5d3f3;\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: 352px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding: 0 16px;\n width: 290px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .calender-input--relative {\n width: 352px;\n padding: 0;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n margin-top: 12px;\n width: auto;\n }\n\n .manual-input {\n width: 125px;\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: 352px;\n gap: 10px;\n padding: 24px 24px 0 24px;\n }\n\n .time-unit-group {\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: center;\n gap: 12px;\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 gap: 3px;\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 .duration-input {\n width: 140px;\n }\n\n .time-input {\n width: 140px;\n }\n\n .minute-values {\n gap: 16px;\n }\n\n .weeks-values {\n gap: 16px;\n }\n\n .months-values {\n gap: 16px;\n }\n\n .not-allowed {\n pointer-events: none;\n color: var(--nile-colors-dark-500);\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-calendar.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"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: var(--nile-font-family-serif);\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 @media not all and (min-resolution: .001dpcm) { \n @supports (-webkit-appearance:none) \n { .day-names, .days {\n column-gap: 6px; \n } \n } \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 .selected-date:hover,\n .range-start:hover,\n .range-end:hover {\n background: #a5d3f3;\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: 352px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding: 0 16px;\n width: 290px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .calender-input--relative {\n width: 352px;\n padding: 0;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n margin-top: 12px;\n width: auto;\n }\n\n .manual-input {\n width: 125px;\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: 352px;\n gap: 10px;\n padding: 24px 24px 0 24px;\n }\n\n .time-unit-group {\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: center;\n gap: 12px;\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 gap: 3px;\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 .duration-input {\n width: 140px;\n }\n\n .time-input {\n width: 140px;\n }\n\n .minute-values {\n gap: 16px;\n }\n\n .weeks-values {\n gap: 16px;\n }\n\n .months-values {\n gap: 16px;\n }\n\n .not-allowed {\n pointer-events: none;\n color: var(--nile-colors-dark-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"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: var(--nile-font-family-serif);\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 .day-names {\n flex-wrap: nowrap;\n }\n\n\n @media not all and (min-resolution: .001dpcm) {\n @supports (-webkit-appearance:none)\n { .day-names, .days {\n column-gap: 6px;\n }\n }\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 .selected-date:hover,\n .range-start:hover,\n .range-end:hover {\n background: #a5d3f3;\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: 352px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding: 0 16px;\n width: 290px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .calender-input--relative {\n width: 352px;\n padding: 0;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n margin-top: 12px;\n width: auto;\n }\n\n .manual-input {\n width: 125px;\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: 352px;\n gap: 10px;\n padding: 24px 24px 0 24px;\n }\n\n .time-unit-group {\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: center;\n gap: 12px;\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 gap: 3px;\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 .duration-input {\n width: 140px;\n }\n\n .time-input {\n width: 140px;\n }\n\n .minute-values {\n gap: 16px;\n }\n\n .weeks-values {\n gap: 16px;\n }\n\n .months-values {\n gap: 16px;\n }\n\n .not-allowed {\n pointer-events: none;\n color: var(--nile-colors-dark-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -55,13 +55,18 @@ import{i as e}from"../index-0a3007c5.esm.js";const t=e`
55
55
  align-items: center;
56
56
  gap: 4px 7px;
57
57
  }
58
-
59
- @media not all and (min-resolution: .001dpcm) {
60
- @supports (-webkit-appearance:none)
58
+
59
+ .day-names {
60
+ flex-wrap: nowrap;
61
+ }
62
+
63
+
64
+ @media not all and (min-resolution: .001dpcm) {
65
+ @supports (-webkit-appearance:none)
61
66
  { .day-names, .days {
62
- column-gap: 6px;
63
- }
64
- }
67
+ column-gap: 6px;
68
+ }
69
+ }
65
70
  }
66
71
 
67
72
  .days {