@aquera/nile-elements 0.0.45 → 0.0.46
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/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js +41 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.d.ts +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.js +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js +10 -2
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.d.ts +9 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js +114 -25
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-date-picker/nile-date-picker.d.ts +4 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-date-picker/nile-date-picker.js +25 -6
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-date-picker/nile-date-picker.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-popover/nile-popover.d.ts +6 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-popover/nile-popover.js +21 -2
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-popover/nile-popover.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.iife.js +127 -57
- package/dist/nile-button/nile-button.cjs.js +1 -1
- package/dist/nile-button/nile-button.cjs.js.map +1 -1
- package/dist/nile-button/nile-button.css.cjs.js +1 -1
- package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
- package/dist/nile-button/nile-button.css.esm.js +43 -2
- package/dist/nile-button/nile-button.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
- package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
- package/dist/nile-calendar/nile-calendar.css.esm.js +10 -2
- package/dist/nile-calendar/nile-calendar.esm.js +44 -28
- package/dist/nile-date-picker/nile-date-picker.cjs.js +1 -1
- package/dist/nile-date-picker/nile-date-picker.cjs.js.map +1 -1
- package/dist/nile-date-picker/nile-date-picker.esm.js +12 -8
- package/dist/nile-popover/nile-popover.cjs.js +1 -1
- package/dist/nile-popover/nile-popover.cjs.js.map +1 -1
- package/dist/nile-popover/nile-popover.esm.js +5 -4
- package/dist/src/nile-button/nile-button.css.js +41 -0
- package/dist/src/nile-button/nile-button.css.js.map +1 -1
- package/dist/src/nile-button/nile-button.d.ts +1 -1
- package/dist/src/nile-button/nile-button.js +1 -0
- package/dist/src/nile-button/nile-button.js.map +1 -1
- package/dist/src/nile-calendar/nile-calendar.css.js +10 -2
- package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
- package/dist/src/nile-calendar/nile-calendar.d.ts +9 -1
- package/dist/src/nile-calendar/nile-calendar.js +114 -25
- package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
- package/dist/src/nile-date-picker/nile-date-picker.d.ts +4 -0
- package/dist/src/nile-date-picker/nile-date-picker.js +25 -6
- package/dist/src/nile-date-picker/nile-date-picker.js.map +1 -1
- package/dist/src/nile-popover/nile-popover.d.ts +6 -0
- package/dist/src/nile-popover/nile-popover.js +21 -2
- package/dist/src/nile-popover/nile-popover.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/nile-button/nile-button.css.ts +41 -0
- package/src/nile-button/nile-button.ts +2 -1
- package/src/nile-calendar/nile-calendar.css.ts +10 -2
- package/src/nile-calendar/nile-calendar.ts +206 -80
- package/src/nile-date-picker/nile-date-picker.ts +21 -7
- package/src/nile-popover/nile-popover.ts +20 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["../index-cd83c5c8.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(){_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 .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: 352px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding: 0 16px;\n width: 290px;\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:
|
|
1
|
+
System.register(["../index-cd83c5c8.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(){_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 .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: 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 .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: 352px;\n }\n\n .calender-input {\n margin-top: 6px;\n padding: 0 16px;\n width: 290px;\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:
|
|
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 .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: 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":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -162,6 +162,9 @@ import{i as e}from"../index-cd2f9c12.esm.js";const t=e`
|
|
|
162
162
|
margin-top: 6px;
|
|
163
163
|
padding: 0 16px;
|
|
164
164
|
width: 290px;
|
|
165
|
+
display:flex;
|
|
166
|
+
flex-wrap:wrap;
|
|
167
|
+
gap:8px;
|
|
165
168
|
}
|
|
166
169
|
|
|
167
170
|
.calender-input--relative {
|
|
@@ -174,11 +177,11 @@ import{i as e}from"../index-cd2f9c12.esm.js";const t=e`
|
|
|
174
177
|
justify-content: space-between;
|
|
175
178
|
gap: 8px;
|
|
176
179
|
margin-top: 12px;
|
|
177
|
-
width:
|
|
180
|
+
width:auto;
|
|
178
181
|
}
|
|
179
182
|
|
|
180
183
|
.manual-input {
|
|
181
|
-
width:
|
|
184
|
+
width:125px;
|
|
182
185
|
}
|
|
183
186
|
|
|
184
187
|
.manual-input-label {
|
|
@@ -329,4 +332,9 @@ import{i as e}from"../index-cd2f9c12.esm.js";const t=e`
|
|
|
329
332
|
.months-values {
|
|
330
333
|
gap: 16px;
|
|
331
334
|
}
|
|
335
|
+
|
|
336
|
+
.not-allowed {
|
|
337
|
+
pointer-events: none;
|
|
338
|
+
color:var(--nile-colors-dark-500);
|
|
339
|
+
}
|
|
332
340
|
`;export{t as s};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";import{query as e,customElement as
|
|
1
|
+
import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";import{query as e,state as s,customElement as n}from"lit/decorators.js";import{s as a}from"./nile-calendar.css.esm.js";import{w as h}from"../internal/watch.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../nile-popup/nile-popup.esm.js";import{n as d}from"../property-09139d3c.esm.js";import"lit";import"lit/directives/class-map.js";import"../nile-popup/nile-popup.css.esm.js";let r=class extends l{constructor(){super(...arguments),this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.dropDownOpened=!1,this.allowedDates={},this.valueAttribute=null,this.formattedDate=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.range=!1,this.type="absolute",this.selectedTimeZone="local",this.validAllowedDates=!0,this.hideTimeInput=!1,this.hideDurationFields=[],this.hideTimeZone=!1}static get styles(){return[a]}firstUpdated(){const t=this.getAttribute("allowed-dates");if(null!==t)try{this.allowedDates=JSON.parse(t)}catch(t){console.error("Error parsing allowed-dates attribute:",t)}else this.validAllowedDates=!1}checkValidAllowedDate(){if(0==Object.keys(this.allowedDates).length)return void(this.validAllowedDates=!1);new Date(Date.UTC(this.allowedDates?.startDate?.slice(0,4),this.allowedDates?.startDate?.slice(5,7)-1,this.allowedDates?.startDate?.slice(8,10)))>new Date(Date.UTC(this.allowedDates?.endDate?.slice(0,4),this.allowedDates?.endDate?.slice(5,7)-1,this.allowedDates?.endDate?.slice(8,10)))?(console.error("StartDate must be greater than endDate"),this.validAllowedDates=!1):this.validAllowedDates=!0}valueChanged(){if(this.range&&this.value)return this.rangeValue=this.value,void(this.value=null);if(this.value&&!isNaN(this.value.getTime())){const t=this.value.getTimezoneOffset(),i=new Date(this.value.getTime()-60*t*1e3);isNaN(i.getTime())||(this.valueAttribute=i.toISOString().split("T")[0],this.formattedDate=`${String(i.getDate()).padStart(2,"0")}/${String(i.getMonth()+1).padStart(2,"0")}/${i.getFullYear()}`)}}updated(t){if(super.updated(t),t.has("valueAttribute")){const t=new Date(this.valueAttribute||"");if(!isNaN(t.getTime())){const i=t.getTimezoneOffset();this.value=new Date(t.getTime()-60*i*1e3),this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear()}}}static get observedAttributes(){return["value","range"]}attributeChangedCallback(t,i,e){"value"===t?(this.valueAttribute=e,this.initializeValue()):"range"===t&&(this.range=null!==e)}initializeValue(){if(this.range)try{const t=JSON.parse(this.valueAttribute||"");this.startDate=new Date(t.startDate),this.endDate=new Date(t.endDate),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),this.rangeValue={startDate:this.startDate,endDate:this.endDate},this.value=null}catch(t){}else if(this.valueAttribute){let t;t=new Date(this.valueAttribute),t=new Date(t.getTime()-6e4*t.getTimezoneOffset()),isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear(),this.rangeValue=null)}this.requestUpdate()}connectedCallback(){if(super.connectedCallback(),this.initializeValue(),this.valueAttribute){const t=new Date(this.valueAttribute);isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear())}this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}getDaysArray(t,i){const e=new Date(t,i+1,0).getDate();return Array.from({length:e},((t,i)=>i+1))}nextMonth(){11===this.currentMonth?(this.currentMonth=0,this.currentYear++):this.currentMonth++,this.requestUpdate()}prevMonth(){0===this.currentMonth?(this.currentMonth=11,this.currentYear--):this.currentMonth--,this.requestUpdate()}selectDate(t,i,e){const s=new Date(e,i,t);if(this.range)if(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart)this.startDate=s,this.endDate&&s>this.endDate&&(this.endDate=null),this.isSelectingStart=!1;else if(this.isSelectingStart=!0,this.startDate&&s<this.startDate)this.startDate=s,this.endDate=null,this.isSelectingStart=!1;else{const t=s;t.setHours(23,59,59,999),this.endDate=t}else this.value=s,this.emit("nile-changed",{value:this.value}),this.dropdown&&this.dropdown.hide();this.requestUpdate()}confimRange(){this.startDate&&this.endDate&&("local"!==this.selectedTimeZone&&(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}),this.dropdown&&this.dropdown.hide(),this.rangeValue={startDate:this.startDate,endDate:this.endDate})}convertTZ(t,i){return new Date(("string"==typeof t?new Date(t):t).toLocaleString("en-US",{timeZone:i}))}isCurrentDate(t,i,e){const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()}isAllowedDate(t,i,e){if(!this.validAllowedDates)return!0;const s=new Date(Date.UTC(e,i,t)),n=new Date(Date.UTC(this.allowedDates?.startDate?.slice(0,4),this.allowedDates?.startDate?.slice(5,7)-1,this.allowedDates?.startDate?.slice(8,10))),a=new Date(Date.UTC(this.allowedDates?.endDate?.slice(0,4),this.allowedDates?.endDate?.slice(5,7)-1,this.allowedDates?.endDate?.slice(8,10)));a.setUTCHours(23,59,59,999);return s>=n&&s<=a}renderMonth(t,e,s){const n=new Date(t,e,1).getDay(),a=new Date(t,e+1,0).getDay(),h=this.getDaysArray(0===e?t-1:t,0===e?11:e-1),l=this.getDaysArray(11===e?t+1:t,11===e?0:e+1),d=h.slice(h.length-n),r=l.slice(0,6-a),o=[...d,...s,...r],u=(t,i,e,s)=>{if(!s)return"";if(!this.range&&this.value){if(t===this.value.getDate()&&i===this.value.getMonth()&&e===this.value.getFullYear())return"selected-date"}const n=this.startDate&&t===this.startDate.getDate()&&i===this.startDate.getMonth()&&e===this.startDate.getFullYear(),a=this.endDate&&t===this.endDate.getDate()&&i===this.endDate.getMonth()&&e===this.endDate.getFullYear();return n?"range-start":a?"range-end":""},c=(t,i,e,s)=>{if(!s)return!1;if(this.startDate&&this.endDate){const s=new Date(e,i,t);return s>=this.startDate&&s<=this.endDate}return!1};return i`
|
|
2
2
|
<div class="calendar">
|
|
3
3
|
<div class="calendar-header">
|
|
4
4
|
<nile-icon
|
|
@@ -31,11 +31,13 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";
|
|
|
31
31
|
<div class="day">Sat</div>
|
|
32
32
|
</div>
|
|
33
33
|
<div class="days">
|
|
34
|
-
${
|
|
35
|
-
class="day
|
|
36
|
-
|
|
34
|
+
${o.map(((n,a)=>{const h=a>=d.length&&a<d.length+s.length;return i` <div
|
|
35
|
+
class="day
|
|
36
|
+
${this.isAllowedDate(n,e,t)?"":"not-allowed"}
|
|
37
|
+
${u(n,e,t,h)} ${c(n,e,t,h)} ${c(n,e,t,h)?"in-range":""} ${h?"":"filler"}
|
|
38
|
+
${this.isCurrentDate(n,e,t)&&h?"current-date":""}
|
|
37
39
|
"
|
|
38
|
-
@click="${()=>{
|
|
40
|
+
@click="${()=>{h&&this.selectDate(n,e,t)}}"
|
|
39
41
|
>
|
|
40
42
|
${n}
|
|
41
43
|
</div>`}))}
|
|
@@ -61,7 +63,7 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";
|
|
|
61
63
|
</div>
|
|
62
64
|
</div>
|
|
63
65
|
|
|
64
|
-
<div class="calendar-timezone ${this.range?"":"
|
|
66
|
+
<div class="calendar-timezone ${!this.range||this.hideTimeZone?"hidden":""}">
|
|
65
67
|
<nile-select
|
|
66
68
|
hoist
|
|
67
69
|
value=${this.selectedTimeZone}
|
|
@@ -81,35 +83,45 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";
|
|
|
81
83
|
</div>
|
|
82
84
|
|
|
83
85
|
<div class="unit-container ${"relative"!==this.type?"hidden":""}">
|
|
84
|
-
<div
|
|
86
|
+
<div
|
|
87
|
+
class="time-unit-group ${this.hideDurationFields?.includes("minutes")?"hidden":""} "
|
|
88
|
+
>
|
|
85
89
|
<div class="time-unit-name"><span>Minutes</span></div>
|
|
86
90
|
<div class="time-unit-value minute-values">
|
|
87
91
|
${this.renderTimeValues("minutes",[1,5,15,30,45])}
|
|
88
92
|
</div>
|
|
89
93
|
</div>
|
|
90
94
|
|
|
91
|
-
<div
|
|
95
|
+
<div
|
|
96
|
+
class="time-unit-group ${this.hideDurationFields?.includes("hours")?"hidden":""}"
|
|
97
|
+
>
|
|
92
98
|
<div class="time-unit-name"><span>Hours</span></div>
|
|
93
99
|
<div class="time-unit-value hours-values">
|
|
94
100
|
${this.renderTimeValues("hours",[1,2,3,6,8,12])}
|
|
95
101
|
</div>
|
|
96
102
|
</div>
|
|
97
103
|
|
|
98
|
-
<div
|
|
104
|
+
<div
|
|
105
|
+
class="time-unit-group ${this.hideDurationFields?.includes("days")?"hidden":""}"
|
|
106
|
+
>
|
|
99
107
|
<div class="time-unit-name"><span>Days</span></div>
|
|
100
108
|
<div class="time-unit-value">
|
|
101
109
|
${this.renderTimeValues("days",[1,2,3,4,5,6])}
|
|
102
110
|
</div>
|
|
103
111
|
</div>
|
|
104
112
|
|
|
105
|
-
<div
|
|
113
|
+
<div
|
|
114
|
+
class="time-unit-group ${this.hideDurationFields?.includes("weeks")?"hidden":""}"
|
|
115
|
+
>
|
|
106
116
|
<div class="time-unit-name"><span>Weeks</span></div>
|
|
107
117
|
<div class="time-unit-value weeks-values ">
|
|
108
118
|
${this.renderTimeValues("weeks",[1,2,4,6])}
|
|
109
119
|
</div>
|
|
110
120
|
</div>
|
|
111
121
|
|
|
112
|
-
<div
|
|
122
|
+
<div
|
|
123
|
+
class="time-unit-group ${this.hideDurationFields?.includes("months")?"hidden":""}"
|
|
124
|
+
>
|
|
113
125
|
<div class="time-unit-name"><span>Months:</span></div>
|
|
114
126
|
<div class="time-unit-value months-values ">
|
|
115
127
|
${this.renderTimeValues("months",[3,6,12,15])}
|
|
@@ -126,11 +138,11 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";
|
|
|
126
138
|
<nile-select class="manual-input time-input" label="Unit of time" style="margin-top:3px" value="${this.selectedUnit}"
|
|
127
139
|
@nile-change="${this.handleUnitChange}"
|
|
128
140
|
>
|
|
129
|
-
<nile-option value="minutes"> Minutes </nile-option>
|
|
130
|
-
<nile-option value="hours"> Hours </nile-option>
|
|
131
|
-
<nile-option value="days"> Days </nile-option>
|
|
132
|
-
<nile-option value="weeks"> Weeks </nile-option>
|
|
133
|
-
<nile-option value="months"> Months </nile-option>
|
|
141
|
+
<nile-option value="minutes" class="${this.hideDurationFields?.includes("minutes")?"hidden":""}"> Minutes </nile-option>
|
|
142
|
+
<nile-option value="hours" class="${this.hideDurationFields?.includes("hours")?"hidden":""}"> Hours </nile-option>
|
|
143
|
+
<nile-option value="days" class="${this.hideDurationFields?.includes("days")?"hidden":""}"> Days </nile-option>
|
|
144
|
+
<nile-option value="weeks" class="${this.hideDurationFields?.includes("weeks")?"hidden":""}"> Weeks </nile-option>
|
|
145
|
+
<nile-option value="months" class="${this.hideDurationFields?.includes("months")?"hidden":""}"> Months </nile-option>
|
|
134
146
|
</nile-select>
|
|
135
147
|
|
|
136
148
|
</div>
|
|
@@ -145,18 +157,22 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";
|
|
|
145
157
|
`:""}
|
|
146
158
|
${this.range&&"absolute"===this.type?i`
|
|
147
159
|
<div class="calender-input">
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
160
|
+
<div>
|
|
161
|
+
<span class="manual-input-label">From </span>
|
|
162
|
+
<div class="from">
|
|
163
|
+
<nile-input class="manual-input" value="${this.formatDate(this.startDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput}"></nile-input>
|
|
164
|
+
<nile-input class="manual-input ${this.hideTimeInput?"hidden":""}" value="${this.formatTime(this.startDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"> </nile-input>
|
|
165
|
+
</div>
|
|
153
166
|
</div>
|
|
154
|
-
|
|
155
|
-
<
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
167
|
+
|
|
168
|
+
<div>
|
|
169
|
+
<span class="manual-input-label">To </span>
|
|
170
|
+
<div class="from">
|
|
171
|
+
<nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>
|
|
172
|
+
<nile-input class="manual-input ${this.hideTimeInput?"hidden":""} " value="${this.formatTime(this.endDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"> </nile-input>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
160
176
|
</div>
|
|
161
177
|
<div class="button-container">
|
|
162
178
|
<nile-button class="apply-button" ?disabled="${!this.startDate||!this.endDate}" @click="${this.confimRange}"> Apply</nile-button>
|
|
@@ -164,4 +180,4 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";
|
|
|
164
180
|
</div>
|
|
165
181
|
`:""}
|
|
166
182
|
</div>
|
|
167
|
-
`}};t([e("nile-dropdown")],r.prototype,"dropdown",void 0),t([
|
|
183
|
+
`}};t([e("nile-dropdown")],r.prototype,"dropdown",void 0),t([d({type:Boolean,reflect:!0})],r.prototype,"dropDownOpened",void 0),t([d({type:Object})],r.prototype,"value",void 0),t([d({type:Object,attribute:"allowed-dates"})],r.prototype,"allowedDates",void 0),t([d({type:Object})],r.prototype,"rangeValue",void 0),t([d({type:String,attribute:"value"})],r.prototype,"valueAttribute",void 0),t([d({type:String,attribute:"value"})],r.prototype,"formattedDate",void 0),t([d({type:Object})],r.prototype,"startDate",void 0),t([d({type:Object})],r.prototype,"endDate",void 0),t([d({type:Boolean})],r.prototype,"isSelectingStart",void 0),t([d({type:Boolean})],r.prototype,"range",void 0),t([d({type:String})],r.prototype,"type",void 0),t([d({type:String})],r.prototype,"selectedUnit",void 0),t([d({type:Number})],r.prototype,"selectedValue",void 0),t([d({type:String})],r.prototype,"selectedTimeZone",void 0),t([s()],r.prototype,"validAllowedDates",void 0),t([h("allowedDates")],r.prototype,"checkValidAllowedDate",null),t([d({type:Boolean,attribute:"hide-time-input"})],r.prototype,"hideTimeInput",void 0),t([d({type:Array,attribute:"hide-duration-fields"})],r.prototype,"hideDurationFields",void 0),t([d({type:Boolean,attribute:"hide-time-zone"})],r.prototype,"hideTimeZone",void 0),t([h("value")],r.prototype,"valueChanged",null),r=t([n("nile-calendar")],r);export{r as N};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-date-picker.css.cjs.js","../internal/nile-element.cjs.js","../property-0f6a51ec.cjs.js","lit"],function(_export,_context){"use strict";var e,t,r,
|
|
1
|
+
System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-date-picker.css.cjs.js","../internal/nile-element.cjs.js","../property-0f6a51ec.cjs.js","lit"],function(_export,_context){"use strict";var e,i,t,r,o,s,n,_templateObject,d;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_index001CjsJs){i=_index001CjsJs.x;},function(_litDecoratorsJs){t=_litDecoratorsJs.query;r=_litDecoratorsJs.customElement;},function(_nileDatePickerCssCjsJs){o=_nileDatePickerCssCjsJs.s;},function(_internalNileElementCjsJs){s=_internalNileElementCjsJs.N;},function(_property002CjsJs){n=_property002CjsJs.n;},function(_lit){}],execute:function(){_export("N",d=/*#__PURE__*/function(_s){_inherits(d,_s);var _super=_createSuper(d);function d(){var _this;_classCallCheck(this,d);_this=_super.apply(this,arguments),_this.range=!1,_this.hideTimeInput=!1,_this.hideTimeZone=!1,_this.hideDurationFields=[];return _this;}_createClass(d,[{key:"render",value:function render(){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <nile-dropdown .hoist=\"","\" distance=\"6\">\n <slot slot=\"trigger\" part=\"trigger\" name=\"trigger\"></slot>\n <nile-calendar\n value=\"","\"\n .range=\"","\"\n @nile-changed=\"","\"\n allowed-dates=\"","\"\n .hideTimeInput=\"","\"\n .hideDurationFields=\"","\"\n .hideTimeZone=\"","\"\n ></nile-calendar>\n </nile-dropdown>\n "])),!0,this.value,this.range,this.handleChanged,this.allowedDates,this.hideTimeInput,this.hideDurationFields,this.hideTimeZone);}},{key:"handleChanged",value:function handleChanged(e){this.emit("nile-changed",e.detail),this.dropdown&&this.dropdown.hide();}},{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(d.prototype),"connectedCallback",this).call(this),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(d.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}}],[{key:"styles",get:function get(){return[o];}}]);return d;}(s));e([n({type:Boolean})],d.prototype,"range",void 0),e([n({type:Boolean,attribute:"hide-time-input"})],d.prototype,"hideTimeInput",void 0),e([n({type:Boolean,attribute:"hide-time-zone"})],d.prototype,"hideTimeZone",void 0),e([n()],d.prototype,"value",void 0),e([n({type:Array,attribute:"hide-duration-fields"})],d.prototype,"hideDurationFields",void 0),e([n({attribute:"allowed-dates"})],d.prototype,"allowedDates",void 0),e([t("nile-dropdown")],d.prototype,"dropdown",void 0),_export("N",d=e([r("nile-date-picker")],d));}};});
|
|
2
2
|
//# sourceMappingURL=nile-date-picker.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-date-picker.cjs.js","sources":["../../../src/nile-date-picker/nile-date-picker.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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-date-picker.css';\nimport NileElement from '../internal/nile-element';\nimport { NileDropdown } from '../nile-dropdown';\n\n/**\n * Nile icon component.\n *\n * @tag nile-date-picker\n *\n */\n@customElement('nile-date-picker')\nexport class NileDatePicker extends NileElement {\n /**\n * The styles for DatePicker\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean }) range = false;\n\n @property() value: any;\n\n @query('nile-dropdown') dropdown: NileDropdown;\n\n
|
|
1
|
+
{"version":3,"file":"nile-date-picker.cjs.js","sources":["../../../src/nile-date-picker/nile-date-picker.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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-date-picker.css';\nimport NileElement from '../internal/nile-element';\nimport { NileDropdown } from '../nile-dropdown';\n\n/**\n * Nile icon component.\n *\n * @tag nile-date-picker\n *\n */\n@customElement('nile-date-picker')\nexport class NileDatePicker extends NileElement {\n /**\n * The styles for DatePicker\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean }) range = false;\n\n @property({ type: Boolean, attribute: 'hide-time-input' }) hideTimeInput =\n false;\n\n @property({ type: Boolean ,attribute: 'hide-time-zone' }) hideTimeZone = false;\n\n @property() value: any;\n @property({ type: Array, attribute: 'hide-duration-fields' })\n hideDurationFields: any = [];\n\n @property({ attribute: 'allowed-dates' })\n allowedDates: any ;\n\n @query('nile-dropdown') dropdown: NileDropdown;\n\n /**\n * Render method\n * @slot This is a slot test\n */\n render(): TemplateResult {\n \n return html`\n <nile-dropdown .hoist=\"${true}\" distance=\"6\">\n <slot slot=\"trigger\" part=\"trigger\" name=\"trigger\"></slot>\n <nile-calendar\n value=\"${this.value}\"\n .range=\"${this.range}\"\n @nile-changed=\"${this.handleChanged}\"\n allowed-dates=\"${this.allowedDates}\"\n .hideTimeInput=\"${this.hideTimeInput}\"\n .hideDurationFields=\"${this.hideDurationFields}\"\n .hideTimeZone=\"${this.hideTimeZone}\"\n ></nile-calendar>\n </nile-dropdown>\n `;\n }\n\n handleChanged(event: any) {\n this.emit('nile-changed', event.detail);\n if (this.dropdown) {\n this.dropdown.hide();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n}\n\nexport default NileDatePicker;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-date-picker': NileDatePicker;\n }\n}\n"],"names":["NileDatePicker","d","this","range","hideTimeInput","hideTimeZone","hideDurationFields","_this","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","handleChanged","allowedDates","event","emit","detail","dropdown","hide","connectedCallback","super","disconnectedCallback","get","styles","NileElement","__decorate","property","type","Boolean","prototype","attribute","Array","query","_export","customElement"],"mappings":"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"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import{__decorate as e}from"tslib";import{x as
|
|
1
|
+
import{__decorate as e}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";import{query as t,customElement as r}from"lit/decorators.js";import{s as o}from"./nile-date-picker.css.esm.js";import{N as s}from"../internal/nile-element.esm.js";import{n}from"../property-09139d3c.esm.js";import"lit";let d=class extends s{constructor(){super(...arguments),this.range=!1,this.hideTimeInput=!1,this.hideTimeZone=!1,this.hideDurationFields=[]}static get styles(){return[o]}render(){return i`
|
|
2
2
|
<nile-dropdown .hoist="${!0}" distance="6">
|
|
3
|
-
<slot
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
<slot slot="trigger" part="trigger" name="trigger"></slot>
|
|
4
|
+
<nile-calendar
|
|
5
|
+
value="${this.value}"
|
|
6
|
+
.range="${this.range}"
|
|
7
|
+
@nile-changed="${this.handleChanged}"
|
|
8
|
+
allowed-dates="${this.allowedDates}"
|
|
9
|
+
.hideTimeInput="${this.hideTimeInput}"
|
|
10
|
+
.hideDurationFields="${this.hideDurationFields}"
|
|
11
|
+
.hideTimeZone="${this.hideTimeZone}"
|
|
12
|
+
></nile-calendar>
|
|
9
13
|
</nile-dropdown>
|
|
10
|
-
`}handleChanged(e){this.emit("nile-changed",e.detail),this.dropdown&&this.dropdown.hide()}connectedCallback(){super.connectedCallback(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}};e([
|
|
14
|
+
`}handleChanged(e){this.emit("nile-changed",e.detail),this.dropdown&&this.dropdown.hide()}connectedCallback(){super.connectedCallback(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}};e([n({type:Boolean})],d.prototype,"range",void 0),e([n({type:Boolean,attribute:"hide-time-input"})],d.prototype,"hideTimeInput",void 0),e([n({type:Boolean,attribute:"hide-time-zone"})],d.prototype,"hideTimeZone",void 0),e([n()],d.prototype,"value",void 0),e([n({type:Array,attribute:"hide-duration-fields"})],d.prototype,"hideDurationFields",void 0),e([n({attribute:"allowed-dates"})],d.prototype,"allowedDates",void 0),e([t("nile-dropdown")],d.prototype,"dropdown",void 0),d=e([r("nile-date-picker")],d);export{d as N};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-popover.css.cjs.js","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";var t,s,i,o,e,r,
|
|
1
|
+
System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-popover.css.cjs.js","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";var t,s,i,o,e,r,l,_templateObject,_templateObject2,_templateObject3,p;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_index001CjsJs){s=_index001CjsJs.s;i=_index001CjsJs.x;},function(_litDecoratorsJs){o=_litDecoratorsJs.state;e=_litDecoratorsJs.customElement;},function(_nilePopoverCssCjsJs){r=_nilePopoverCssCjsJs.s;},function(_property002CjsJs){l=_property002CjsJs.n;}],execute:function(){_export("N",p=/*#__PURE__*/function(_s){_inherits(p,_s);var _super=_createSuper(p);function p(){var _this;_classCallCheck(this,p);_this=_super.apply(this,arguments),_this.placement="top",_this.distance=18,_this.title="",_this.isShow=!1,_this.arrowPlacement="anchor",_this.hoist=!1,_this.flip=!1,_this.handleClick=function(){_this.isShow=!_this.isShow;document.querySelectorAll("nile-popover").forEach(function(t){t!==_assertThisInitialized(_this)&&(t.isShow=!1);});},_this.handleDocumentClick=function(){_this.isShow&&(_this.isShow=!_this.isShow);};return _this;}_createClass(p,[{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(p.prototype),"connectedCallback",this).call(this),document.addEventListener("click",this.handleDocumentClick);}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(p.prototype),"disconnectedCallback",this).call(this),document.removeEventListener("click",this.handleDocumentClick);}},{key:"render",value:function render(){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <nile-popup\n active\n ?arrow=\"","\"\n distance=\"","\"\n placement=\"","\"\n @click=","\n arrowPlacement=\"","\"\n .flip=\"","\"\n shift\n strategy=","\n >\n <slot\n slot=\"anchor\"\n name=\"anchor\"\n aria-describedby=\"tooltip\"\n @click=","\n ></slot>\n ","\n </nile-popup>\n "])),!!this.title&&this.isShow,this.distance,this.placement,function(t){return t.stopPropagation();},this.arrowPlacement,this.flip,this.hoist?"fixed":"absolute",this.handleClick,this.title&&this.isShow?i(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <div\n part=\"popover\"\n class=\"popover__box\"\n >\n <slot name=\"title\" class=\"popover__title\">","</slot>\n <slot part=\"base\"></slot>\n <slot name=\"action\" class=\"popover__action\"> </slot>\n </div>"])),this.title):i(_templateObject3||(_templateObject3=_taggedTemplateLiteral([""]))));}}],[{key:"styles",get:function get(){return[r];}}]);return p;}(s));t([l()],p.prototype,"placement",void 0),t([l({type:Number})],p.prototype,"distance",void 0),t([l({type:String})],p.prototype,"title",void 0),t([o()],p.prototype,"isShow",void 0),t([l({attribute:"arrow-placement"})],p.prototype,"arrowPlacement",void 0),t([l({type:Boolean})],p.prototype,"hoist",void 0),t([l({type:Boolean})],p.prototype,"flip",void 0),_export("N",p=t([e("nile-popover")],p));}};});
|
|
2
2
|
//# sourceMappingURL=nile-popover.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-popover.cjs.js","sources":["../../../src/nile-popover/nile-popover.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 {\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-popover.css';\nimport type NilePopup from '../nile-popup/nile-popup';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends LitElement {\n /**\n * The styles for Popover\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @property() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** The distance in pixels from which to offset the popover away from its target. */\n @property({ type: Number }) distance = 18;\n\n /** Gives the title to the popover */\n @property({ type: String }) title = '';\n\n @state() private isShow = false;\n\n @property({ attribute: 'arrow-placement' }) arrowPlacement:\n | 'start'\n | 'end'\n | 'center'\n | 'anchor' = 'anchor';\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.handleDocumentClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.handleDocumentClick);\n }\n\n private handleClick = () => {\n this.isShow = !this.isShow;\n };\n\n private handleDocumentClick = () => {\n if (this.isShow) {\n this.isShow = !this.isShow;\n }\n };\n\n public render(): TemplateResult {\n return html`\n <nile-popup\n active\n ?arrow=\"${this.title ? this.isShow : false}\"\n distance=\"${this.distance}\"\n placement=\"${this.placement}\"\n @click=${(e: Event) => e.stopPropagation()}\n arrowPlacement=\"${this.arrowPlacement}\"\n flip\n shift\n >\n <slot\n slot=\"anchor\"\n name=\"anchor\"\n aria-describedby=\"tooltip\"\n @click=${this.handleClick}\n ></slot>\n ${this.title && this.isShow\n ? html` <div\n part=\"popover\"\n class=\"popover__box\"\n >\n <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n <slot></slot>\n <slot name=\"action\" class=\"popover__action\"> </slot>\n </div>`\n : html``}\n </nile-popup>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-popover': NilePopover;\n }\n}\n"],"names":["NilePopover","
|
|
1
|
+
{"version":3,"file":"nile-popover.cjs.js","sources":["../../../src/nile-popover/nile-popover.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 {\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-popover.css';\nimport type NilePopup from '../nile-popup/nile-popup';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends LitElement {\n /**\n * The styles for Popover\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @property() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** The distance in pixels from which to offset the popover away from its target. */\n @property({ type: Number }) distance = 18;\n\n /** Gives the title to the popover */\n @property({ type: String }) title = '';\n\n @state() private isShow = false;\n\n @property({ attribute: 'arrow-placement' }) arrowPlacement:\n | 'start'\n | 'end'\n | 'center'\n | 'anchor' = 'anchor';\n\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n @property({ type: Boolean }) flip = false;\n\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.handleDocumentClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.handleDocumentClick);\n }\n\n private handleClick = () => {\n this.isShow = !this.isShow;\n const allPopovers = document.querySelectorAll('nile-popover');\n \n allPopovers.forEach(popover => {\n if (popover !== this) {\n popover.isShow=false;\n }\n });\n };\n\n private handleDocumentClick = () => {\n if (this.isShow) {\n this.isShow = !this.isShow;\n }\n };\n\n public render(): TemplateResult {\n return html`\n <nile-popup\n active\n ?arrow=\"${this.title ? this.isShow : false}\"\n distance=\"${this.distance}\"\n placement=\"${this.placement}\"\n @click=${(e: Event) => e.stopPropagation()}\n arrowPlacement=\"${this.arrowPlacement}\"\n .flip=\"${this.flip}\"\n shift\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n >\n <slot\n slot=\"anchor\"\n name=\"anchor\"\n aria-describedby=\"tooltip\"\n @click=${this.handleClick}\n ></slot>\n ${this.title && this.isShow\n ? html` <div\n part=\"popover\"\n class=\"popover__box\"\n >\n <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n <slot part=\"base\"></slot>\n <slot name=\"action\" class=\"popover__action\"> </slot>\n </div>`\n : html``}\n </nile-popup>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-popover': NilePopover;\n }\n}\n"],"names":["NilePopover","p","this","placement","distance","title","isShow","arrowPlacement","hoist","flip","handleClick","document","querySelectorAll","forEach","popover","handleDocumentClick","_this","_createClass","key","value","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","render","html","_templateObject","_taggedTemplateLiteral","e","stopPropagation","_templateObject2","_templateObject3","get","styles","LitElement","__decorate","property","prototype","type","Number","String","state","attribute","Boolean","customElement"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{s,x as i}from"../index-cd2f9c12.esm.js";import{state as o,customElement as e}from"lit/decorators.js";import{s as r}from"./nile-popover.css.esm.js";import{n as
|
|
1
|
+
import{__decorate as t}from"tslib";import{s,x as i}from"../index-cd2f9c12.esm.js";import{state as o,customElement as e}from"lit/decorators.js";import{s as r}from"./nile-popover.css.esm.js";import{n as l}from"../property-09139d3c.esm.js";let p=class extends s{constructor(){super(...arguments),this.placement="top",this.distance=18,this.title="",this.isShow=!1,this.arrowPlacement="anchor",this.hoist=!1,this.flip=!1,this.handleClick=()=>{this.isShow=!this.isShow;document.querySelectorAll("nile-popover").forEach((t=>{t!==this&&(t.isShow=!1)}))},this.handleDocumentClick=()=>{this.isShow&&(this.isShow=!this.isShow)}}static get styles(){return[r]}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}render(){return i`
|
|
2
2
|
<nile-popup
|
|
3
3
|
active
|
|
4
4
|
?arrow="${!!this.title&&this.isShow}"
|
|
@@ -6,8 +6,9 @@ import{__decorate as t}from"tslib";import{s,x as i}from"../index-cd2f9c12.esm.js
|
|
|
6
6
|
placement="${this.placement}"
|
|
7
7
|
@click=${t=>t.stopPropagation()}
|
|
8
8
|
arrowPlacement="${this.arrowPlacement}"
|
|
9
|
-
flip
|
|
9
|
+
.flip="${this.flip}"
|
|
10
10
|
shift
|
|
11
|
+
strategy=${this.hoist?"fixed":"absolute"}
|
|
11
12
|
>
|
|
12
13
|
<slot
|
|
13
14
|
slot="anchor"
|
|
@@ -20,8 +21,8 @@ import{__decorate as t}from"tslib";import{s,x as i}from"../index-cd2f9c12.esm.js
|
|
|
20
21
|
class="popover__box"
|
|
21
22
|
>
|
|
22
23
|
<slot name="title" class="popover__title">${this.title}</slot>
|
|
23
|
-
<slot></slot>
|
|
24
|
+
<slot part="base"></slot>
|
|
24
25
|
<slot name="action" class="popover__action"> </slot>
|
|
25
26
|
</div>`:i``}
|
|
26
27
|
</nile-popup>
|
|
27
|
-
`}};t([
|
|
28
|
+
`}};t([l()],p.prototype,"placement",void 0),t([l({type:Number})],p.prototype,"distance",void 0),t([l({type:String})],p.prototype,"title",void 0),t([o()],p.prototype,"isShow",void 0),t([l({attribute:"arrow-placement"})],p.prototype,"arrowPlacement",void 0),t([l({type:Boolean})],p.prototype,"hoist",void 0),t([l({type:Boolean})],p.prototype,"flip",void 0),p=t([e("nile-popover")],p);export{p as N};
|
|
@@ -167,6 +167,35 @@ export const styles = css `
|
|
|
167
167
|
box-shadow: none;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
+
/* ghost */
|
|
171
|
+
.button--standard.button--ghost{
|
|
172
|
+
background-color: var(--nile-colors-button-tertiary);
|
|
173
|
+
border-color: transparent;
|
|
174
|
+
color: var(--nile-colors-button-tertiary-text);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.button--standard.button--ghost:hover:not(.button--disabled) {
|
|
178
|
+
background-color: var(--nile-colors-button-tertiary-hover);
|
|
179
|
+
border-color: transparent;
|
|
180
|
+
color: var(--nile-colors-button-tertiary-text);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.button--standard.button--ghost:active:not(.button--disabled) {
|
|
184
|
+
background-color: var(--nile-colors-button-tertiary-pressed);
|
|
185
|
+
border-color:transparent;
|
|
186
|
+
color: var(--nile-colors-button-tertiary-text);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.button--standard.button--ghost.button--disabled,
|
|
190
|
+
.button--standard.button--ghost.button--disabled:hover,
|
|
191
|
+
.button--standard.button--ghost.button--disabled:active {
|
|
192
|
+
border-color:transparent;
|
|
193
|
+
background-color: var(--nile-colors-button-tertiary-disabled);
|
|
194
|
+
color: var(--nile-colors-button-tertiary-disabled-text);
|
|
195
|
+
cursor: not-allowed;
|
|
196
|
+
box-shadow: none;
|
|
197
|
+
}
|
|
198
|
+
|
|
170
199
|
/* caution */
|
|
171
200
|
.button--standard.button--caution {
|
|
172
201
|
background-color: var(--nile-colors-button-caution);
|
|
@@ -231,6 +260,18 @@ export const styles = css `
|
|
|
231
260
|
--nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
|
|
232
261
|
}
|
|
233
262
|
|
|
263
|
+
/* Ghost Variant */
|
|
264
|
+
.button--standard.button--ghost ::slotted(nile-icon) {
|
|
265
|
+
--nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
|
|
266
|
+
}
|
|
267
|
+
.button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),
|
|
268
|
+
.button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {
|
|
269
|
+
--nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
|
|
270
|
+
}
|
|
271
|
+
.button--standard.button--ghost ::slotted(nile-icon) {
|
|
272
|
+
--nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
|
|
273
|
+
}
|
|
274
|
+
|
|
234
275
|
/* Caution Variant */
|
|
235
276
|
.button--standard.button--caution ::slotted(nile-icon) {
|
|
236
277
|
--nile-svg-fill: var(--nile-colors-button-caution-text) !important;
|