@aquera/nile-elements 0.0.3-8 → 0.0.4-1

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

@@ -0,0 +1,186 @@
+/**
+ * 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;
+  }
+
+  .calendar-header__month-navigation {
+    cursor: pointer;
+  }
+
+  .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;
+    cursor: pointer;
+  }
+
+  .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;
+    width: 365px;
+  }
+
+  .base__range {
+    width: 730px;
+  }
+
+  .calender-input {
+    padding: 20px;
+    padding-bottom: 0px;
+    background: white;
+  }
+
+  .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;
+  }
+
+  .button-contaner {
+    width: 100%;
+    text-align: right;
+    padding: 10px 0;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-calendar.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6KxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n    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    cursor: pointer;\n  }\n\n  .filler {\n    color: grey;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 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  .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    width: 365px;\n  }\n\n  .base__range {\n    width: 730px;\n  }\n\n  .calender-input {\n    padding: 20px;\n    padding-bottom: 0px;\n    background: white;\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;\n    font-style: normal;\n    font-weight: 500;\n    margin-bottom: 10px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 10px 0;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-calendar/nile-calendar.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-calendar
+ *
+ */
+export declare class NileCalendar extends NileElement {
+    /**
+     * The styles for NileCalendar
+     * @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 NileCalendar;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-calendar': NileCalendar;
+    }
+}