@aquera/nile-elements 0.0.2 → 0.0.3-2

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

@@ -0,0 +1,178 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit-element';
+/**
+ * DatePicker CSS
+ */
+export const styles = css `
+  :host {
+  }
+
+  .calendar-container {
+    font-family: Colfax-regular;
+    width: 365px;
+    height: auto;
+    text-align: center;
+    background: white;
+  }
+
+  .calendar-container.with-margin {
+  margin-right: 20px;
+}
+
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    padding: 22px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background: #c7ced4;
+  }
+
+  .day-names {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    height: 50px;
+    margin-top: 10px;
+  }
+
+  .day-names,
+  .days {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    height: auto;
+    align-items: center;
+  }
+
+  .days {
+    height: auto;
+  }
+
+  .day {
+    flex-basis: calc(100% / 7);
+    box-sizing: border-box;
+    width: 48px;
+    align-items: center;
+    padding: 10px;
+    height: 32px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  }
+
+  .filler {
+    color: grey;
+  }
+
+  .selected-date {
+    color: white;
+    border-radius: 4px;
+    background: #a5d3f3;
+  }
+
+
+
+.calendar-wrapper {
+  background: white;
+  display: flex;
+  justify-content: space-between;
+  width: auto;
+}
+
+.selected-date,
+.range-start,
+.range-end {
+  border-radius: 4px;
+  background: #a5d3f3;
+  color: white;
+}
+
+
+.range-start {
+  background: #a5d3f3;
+  border-radius: 4px 0 0 4px;
+  color: white;
+}
+
+.range-end {
+  background: #a5d3f3;
+  border-radius: 0 4px 4px 0;
+  color: white;
+}
+
+.range-middle {
+  background: #a5d3f3;
+  color: white;
+  border-radius: 0;
+}
+
+.day.selected {
+  background: #a5d3f3;
+  color: white;
+  border-radius: 4px;
+}
+
+.day.in-range {
+  background: #a5d3f3;
+  color: white;
+}
+
+.selected-date {
+  color: white;
+  border-radius: 4px;
+  background: #a5d3f3;
+}
+
+.base {
+  background-color: white;
+  border-radius: 4px;
+  padding-bottom: 20px
+}
+
+.calender-input{
+  padding: 20px;
+  padding-bottom: 0px;
+}
+
+.from {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.manual-input{
+  width:100%;
+}
+
+.manual-input-label{
+  font-size: 12px;
+font-style: normal;
+font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.apply-button {
+  text-align: right;
+  display: block;
+  padding-top: 20px;
+}
+`;
+export default [styles];
+//# sourceMappingURL=nile-date-picker.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-date-picker.css.js","sourceRoot":"","sources":["../../../src/nile-date-picker/nile-date-picker.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n  margin-right: 20px;\n}\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .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    margin-top: 10px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n  margin-top: 6px;\n  margin-bottom: 6px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  }\n\n  .filler {\n    color: grey;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n\n\n.calendar-wrapper {\n  background: white;\n  display: flex;\n  justify-content: space-between;\n  width: auto;\n}\n\n.selected-date,\n.range-start,\n.range-end {\n  border-radius: 4px;\n  background: #a5d3f3;\n  color: white;\n}\n\n\n.range-start {\n  background: #a5d3f3;\n  border-radius: 4px 0 0 4px;\n  color: white;\n}\n\n.range-end {\n  background: #a5d3f3;\n  border-radius: 0 4px 4px 0;\n  color: white;\n}\n\n.range-middle {\n  background: #a5d3f3;\n  color: white;\n  border-radius: 0;\n}\n\n.day.selected {\n  background: #a5d3f3;\n  color: white;\n  border-radius: 4px;\n}\n\n.day.in-range {\n  background: #a5d3f3;\n  color: white;\n}\n\n.selected-date {\n  color: white;\n  border-radius: 4px;\n  background: #a5d3f3;\n}\n\n.base {\n  background-color: white;\n  border-radius: 4px;\n  padding-bottom: 20px\n}\n\n.calender-input{\n  padding: 20px;\n  padding-bottom: 0px;\n}\n\n.from {\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n}\n\n.manual-input{\n  width:100%;\n}\n\n.manual-input-label{\n  font-size: 12px;\nfont-style: normal;\nfont-weight: 500;\n  margin-bottom: 10px;\n}\n\n.apply-button {\n  text-align: right;\n  display: block;\n  padding-top: 20px;\n}\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,70 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+import type { PropertyValues } from 'lit';
+import '../nile-popup';
+import { NileDropdown } from '../nile-dropdown';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-date-picker
+ *
+ */
+export declare class NileDatePicker extends NileElement {
+    /**
+     * The styles for DatePicker
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    private currentMonth;
+    private currentYear;
+    dropdown: NileDropdown;
+    dropDownOpened: boolean;
+    value: any;
+    rangeValue: any;
+    valueAttribute: string | null;
+    formattedDate: string | null;
+    startDate: Date | null;
+    endDate: Date | null;
+    isSelectingStart: boolean;
+    range: boolean;
+    valueChanged(): void;
+    updated(changedProperties: PropertyValues): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    initializeValue(): void;
+    connectedCallback(): void;
+    private getDaysArray;
+    private nextMonth;
+    private prevMonth;
+    private selectDate;
+    private confimRange;
+    private renderMonth;
+    private formatDate;
+    private formatDateRange;
+    private handleStartDateInput;
+    private handleEndDateInput;
+    private parseDate;
+    private isValidDateInput;
+    private formatTime;
+    private isValidTimeInput;
+    private parseTime;
+    private handleStartTimeInput;
+    private handleEndTimeInput;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileDatePicker;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-date-picker': NileDatePicker;
+    }
+}