@aquera/nile-elements 0.0.6-1 → 0.0.6-2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.6-1",
+  "version": "0.0.6-2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-date-picker/nile-date-picker.css.ts

@@ -13,168 +13,6 @@ import { css } from 'lit-element';
 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: 730px;
-}
-
-.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];

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

@@ -12,25 +12,9 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query } from 'lit/decorators.js';
 import { styles } from './nile-date-picker.css';
-import { animateTo, stopAnimations } from '../internal/animate';
-import { classMap } from 'lit/directives/class-map.js';
-import { query } from 'lit/decorators.js';
-import {
-  getAnimation,
-  setDefaultAnimation,
-} from '../utilities/animation-registry';
-import { getTabbableBoundary } from '../internal/tabbable';
-import { waitForEvent } from '../internal/event';
-import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, PropertyValues } from 'lit';
-import type NileButton from '../nile-button/nile-button';
-import type NileIconButton from '../nile-icon-button/nile-icon-button';
-import type { NileMenu } from '../nile-menu';
-import type { NilePopup } from '../nile-popup';
-import '../nile-popup';
 import { NileDropdown } from '../nile-dropdown';
 
 /**
@@ -49,123 +33,32 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
-  private currentMonth: number = new Date().getMonth();
-  private currentYear: number = new Date().getFullYear();
-
-  @query('nile-dropdown') dropdown: NileDropdown;
-
-  @property({ type: Boolean, reflect: true }) dropDownOpened = false;
-
-  @property({ type: Object }) value : any;
-
-  @property({ type: Object }) rangeValue : any;
-
-  @property({ type: String, attribute: 'value' }) valueAttribute:
-    | string
-    | null = null;
-
-  @property({ type: String, attribute: 'value' }) formattedDate: string | null =
-    null;
-
-  @property({ type: Object }) startDate: Date | null = null;
-  @property({ type: Object }) endDate: Date | null = null;
-  @property({ type: Boolean }) isSelectingStart = true; // flag to indicate what we're selecting
-
   @property({ type: Boolean }) range = false;
 
-  @watch('value')
-  valueChanged() {
-
-    if (this.range && this.value) {
-      this.rangeValue = this.value;
-      this.value = null;
-      return;
-    }
-
-    if (this.value && !isNaN(this.value.getTime())) {
-      const offset = this.value.getTimezoneOffset();
-      const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
-      if (!isNaN(localDate.getTime())) {
-        this.valueAttribute = localDate.toISOString().split('T')[0];
-        this.formattedDate = `${String(localDate.getDate()).padStart(
-          2,
-          '0'
-        )}/${String(localDate.getMonth() + 1).padStart(
-          2,
-          '0'
-        )}/${localDate.getFullYear()}`;
-      }
-    }
-  }
-
-
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
+  @property() value: any;
 
-    if (changedProperties.has('valueAttribute')) {
-      const date = new Date(this.valueAttribute || '');
-      if (!isNaN(date.getTime())) {
-        const offset = date.getTimezoneOffset();
-        this.value = new Date(date.getTime() - offset * 60 * 1000);
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
-  }
-
-  static get observedAttributes() {
-    return ['value', 'range'];
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === 'value') {
-      this.valueAttribute = newValue;
-      this.initializeValue();
-    } else if (name === 'range') {
-      this.range = newValue !== null;
-    }
-  }
-
-  initializeValue() {
-    if (this.range) {
-      try {
-        const rangeValue = JSON.parse(this.valueAttribute || '');
-        this.startDate = new Date(rangeValue.startDate);
-        this.endDate = new Date(rangeValue.endDate);
-
-        // Convert to local time
-        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 (e) {
-        // console.error('Invalid range value');
-      }
-    } else {
-      if (this.valueAttribute) {
-        let date: Date;
-
-        date = new Date(this.valueAttribute);
+  @query('nile-dropdown') dropdown: NileDropdown;
 
-        date = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
 
-        if (!isNaN(date.getTime())) {
-          this.value = date;
-          this.currentMonth = this.value.getMonth();
-          this.currentYear = this.value.getFullYear();
-          this.rangeValue = null;
-        }
-      }
-    }
-    this.requestUpdate();
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  render(): TemplateResult {
+    return html`
+      <nile-dropdown .hoist="${true}">
+        <slot
+        slot="trigger"
+        part="trigger"
+        name="trigger"
+      ></slot>
+      <nile-calendar value="${this.value}" .range="${this.range}" @nile-changed="${this.handleChanged}"></nile-calendar>
+      </nile-dropdown>
+    `;
   }
 
-  handleChanged(event:any) {
-    this.emit('nile-changed', { value: event.detail.value });
+  handleChanged(event: any) {
+    this.emit('nile-changed', event.detail);
     if (this.dropdown) {
       this.dropdown.hide();
     }
@@ -173,16 +66,6 @@ export class NileDatePicker extends NileElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.initializeValue();
-
-    if (this.valueAttribute) {
-      const date = new Date(this.valueAttribute);
-      if (!isNaN(date.getTime())) {
-        this.value = date;
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
     this.emit('nile-init');
   }
 
@@ -190,29 +73,6 @@ export class NileDatePicker extends NileElement {
     super.disconnectedCallback();
     this.emit('nile-destroy');
   }
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  render(): TemplateResult {
-
-    return html`
-      <nile-dropdown .hoist="${true}">
-        <slot
-        slot="trigger"
-        part="trigger"
-        name="trigger"
-      ></slot>
-
-<nile-calendar .value="${this.range}" .range="${this.range}" @nile-changed="${this.handleChanged}"> </nile-calendar>
-      </nile-dropdown>
-    `;
-  }
 }
 
 export default NileDatePicker;