@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/atoms/gv-checkbox.js

@@ -1,187 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { classMap } from 'lit/directives/class-map';
-
-import { LitElement, html, css } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { dispatchCustomEvent } from '../lib/events';
-import { InputElement } from '../mixins/input-element';
-
-/**
- * A wrapper of a <checkbox> component.
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-checkbox:input - mirrors native input events with the `value` on `detail`
- * @fires input - native input event
- * @fires change - native change event
- *
- * @attr {Boolean} disabled - same as native checkbox element `disabled` attribute
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- * @attr {String} value - The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on
- * @attr {Boolean} checked - true if the checkbox is checked, false otherwise
- * @attr {String} label - label of the checkbox
- * @attr {String} title - title of the checkbox
- *
- * @cssprop {Color} [--gv-checkbox--bgc=var(--gv-theme-color, #5a7684)] - Checked background color
- */
-export class GvCheckbox extends InputElement(LitElement) {
-  static get properties() {
-    return {
-      disabled: { type: Boolean },
-      skeleton: { type: Boolean },
-      value: { type: String, reflect: true },
-      checked: { type: Boolean, reflect: true },
-      label: { type: String },
-      title: { type: String },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      // language=CSS
-      css`
-        :host {
-          cursor: pointer;
-          --gv-icon--c: var(--gv-theme-neutral-color-dark, #d9d9d9);
-          --gv-icon--s: 30px;
-        }
-
-        .container {
-          position: relative;
-          height: 30px;
-        }
-
-        /* BASE */
-        input {
-          border: 1px solid var(--gv-theme-neutral-color-dark, #d9d9d9);
-          box-sizing: border-box;
-          border-radius: 4px;
-          outline: none;
-          padding: 10px;
-          cursor: pointer;
-        }
-
-        input:disabled {
-          cursor: default;
-          opacity: 0.5;
-        }
-
-        label {
-          cursor: pointer;
-          line-height: 29px;
-          padding-left: 15px;
-        }
-
-        .required > label::after {
-          content: '*';
-          color: var(--gv-theme-color-danger);
-        }
-
-        gv-icon {
-          position: absolute;
-        }
-
-        gv-icon.checked {
-          --gv-icon--s: 20px;
-          background-color: var(--gv-checkbox--bgc, var(--gv-theme-color, #5a7684));
-          display: inherit !important;
-          margin: 5px;
-          border-radius: 4px;
-          height: 20px;
-        }
-
-        gv-icon:disabled {
-          cursor: default;
-          opacity: 0.5;
-        }
-
-        .disabled,
-        .skeleton {
-          cursor: default;
-        }
-
-        label abbr {
-          position: absolute;
-          left: 0;
-          color: red;
-          font-variant: none;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._type = 'checkbox';
-    this.checked = false;
-    this.value = 'off';
-  }
-
-  _renderLabel() {
-    if (this.label) {
-      return html`<label
-        class="${classMap({
-          disabled: this.disabled,
-          skeleton: this.skeleton,
-          'checkbox-label': true,
-        })}"
-        title="${this.label}"
-      >
-        ${this.label}
-      </label> `;
-    }
-    return '';
-  }
-
-  _onInput() {
-    if (!(this.disabled || this.skeleton)) {
-      this.checked = !this.checked;
-      // Must dispatch events after all properties are updated
-      setTimeout(() => {
-        dispatchCustomEvent(this, 'input', this.checked);
-        this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-      }, 0);
-    }
-  }
-
-  updated(properties) {
-    if (properties.has('checked') && (this.value === 'off' || this.value === 'on')) {
-      this.value = this.checked ? 'on' : 'off';
-    }
-  }
-
-  render() {
-    const classes = {
-      skeleton: this.skeleton,
-      disabled: this.disabled,
-      required: this.required,
-      container: true,
-    };
-    return html`
-      <div class=${classMap(classes)}>
-        <gv-icon shape="design:border" @click=${this._onInput}></gv-icon>
-        <gv-icon style="display: none;" @click=${this._onInput} class=${classMap({ checked: this.checked })} shape="code:check"></gv-icon>
-        <label @click=${this._onInput}>${this._renderLabel()}</label>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-checkbox', GvCheckbox);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCheckbox=void 0;const e=require("lit/directives/class-map"),t=require("lit"),i=require("../styles/skeleton"),s=require("../lib/events"),l=require("../mixins/input-element");class o extends((0,l.InputElement)(t.LitElement)){static get properties(){return{disabled:{type:Boolean},skeleton:{type:Boolean},value:{type:String,reflect:!0},checked:{type:Boolean,reflect:!0},label:{type:String},title:{type:String}}}static get styles(){return[i.skeleton,t.css`:host{cursor:pointer;--gv-icon--c:var(--gv-theme-neutral-color-dark, #d9d9d9);--gv-icon--s:30px}.container{position:relative;height:30px}input{border:1px solid var(--gv-theme-neutral-color-dark,#d9d9d9);box-sizing:border-box;border-radius:4px;outline:0;padding:10px;cursor:pointer}input:disabled{cursor:default;opacity:.5}label{cursor:pointer;line-height:29px;padding-left:15px}.required>label::after{content:'*';color:var(--gv-theme-color-danger)}gv-icon{position:absolute}gv-icon.checked{--gv-icon--s:20px;background-color:var(--gv-checkbox--bgc,var(--gv-theme-color,#5a7684));display:inherit!important;margin:5px;border-radius:4px;height:20px}gv-icon:disabled{cursor:default;opacity:.5}.disabled,.skeleton{cursor:default}label abbr{position:absolute;left:0;color:red;font-variant:none}`]}constructor(){super(),this._type="checkbox",this.checked=!1,this.value="off"}_renderLabel(){return this.label?t.html`<label class="${(0,e.classMap)({disabled:this.disabled,skeleton:this.skeleton,"checkbox-label":!0})}" title="${this.label}">${this.label}</label>`:""}_onInput(){this.disabled||this.skeleton||(this.checked=!this.checked,setTimeout((()=>{(0,s.dispatchCustomEvent)(this,"input",this.checked),this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))}),0))}updated(e){!e.has("checked")||"off"!==this.value&&"on"!==this.value||(this.value=this.checked?"on":"off")}render(){const i={skeleton:this.skeleton,disabled:this.disabled,required:this.required,container:!0};return t.html`<div class="${(0,e.classMap)(i)}"><gv-icon shape="design:border" @click="${this._onInput}"></gv-icon><gv-icon style="display:none" @click="${this._onInput}" class="${(0,e.classMap)({checked:this.checked})}" shape="code:check"></gv-icon><label @click="${this._onInput}">${this._renderLabel()}</label></div>`}}exports.GvCheckbox=o,window.customElements.define("gv-checkbox",o);

package/src/atoms/gv-date-picker-calendar.d.ts

@@ -0,0 +1,190 @@
+/**
+ * Date Picker Calendar
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-date-picker-cell:select - Custom event when user select cell
+ * @fires gv-date-picker-cell:hover - Custom event when user hover cell
+ *
+ * @attr {Number} dateFrom - unix date form
+ * @attr {Number} dateTo - unix date to
+ * @attr {Array} disabledDates - array of disabled date
+ * @attr {Number} hoveredDate - unix hovered date
+ * @attr {Number} min - unix min date
+ * @attr {Number} max - unix max date
+ * @attr {Object} locale - date-fns locale object
+ *
+ * @cssprop {Color} [--gv-date-picker-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-date-picker-hover--c=var(--gv-theme-font-color-dark, #262626)] - Hover color
+ * @cssprop {Color} [--gv-date-picker-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
+ * @cssprop {Color} [--gv-date-picker-selected--c=var(--gv-theme-font-color-light, #ffffff)] - Selected color
+ */
+export class GvDatePickerCalendar extends LitElement {
+    static get properties(): {
+        dateFrom: {
+            type: NumberConstructor;
+        };
+        dateTo: {
+            type: NumberConstructor;
+        };
+        disabledDates: {
+            type: ArrayConstructor;
+        };
+        hoveredDate: {
+            type: NumberConstructor;
+        };
+        locale: {
+            type: ObjectConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        month: {
+            type: StringConstructor;
+        };
+        monthMode: {
+            type: BooleanConstructor;
+        };
+        next: {
+            type: BooleanConstructor;
+        };
+        prev: {
+            type: BooleanConstructor;
+        };
+        range: {
+            type: BooleanConstructor;
+        };
+        time: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        strict: {
+            type: BooleanConstructor;
+        };
+        year: {
+            type: StringConstructor;
+        };
+        yearMode: {
+            type: BooleanConstructor;
+        };
+        _dayNamesOfWeek: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _dimensions: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _hasGoToday: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _hour: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _minute: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _second: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _monthsList: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _locale: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _from: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _to: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _dayNamesOfWeek: any[];
+    _monthsList: string[];
+    range: boolean;
+    currentDate: number;
+    _hasGoToday: boolean;
+    _hours: string[];
+    _minutes: string[];
+    _seconds: string[];
+    set dateFrom(arg: any);
+    _from: any;
+    _hour: any;
+    _minute: any;
+    _second: any;
+    set dateTo(arg: any);
+    _to: any;
+    computeArrayOfTime(size: any): string[];
+    _renderPreviousNav(): "" | import("lit-html").TemplateResult<1>;
+    _renderCurrentNav(): import("lit-html").TemplateResult<1>;
+    _renderNextNav(): import("lit-html").TemplateResult<1> | undefined;
+    _renderDays(): import("lit-html").TemplateResult<1>;
+    isStrictTime(): boolean;
+    isMinutesDisabled(value: any): boolean;
+    isSecondsDisabled(value: any): boolean;
+    isHoursDisabled(value: any): boolean;
+    _updateTime(): void;
+    getTime(): string;
+    isCurrentDate(data: any): boolean;
+    _updateDays(): void;
+    yearAndMonthChanged(year: any, month: any): void;
+    _dimensions: null[][] | {
+        hover: boolean;
+        date: number;
+        title: string;
+    }[][] | (number | {
+        hover: boolean;
+        date: number;
+        title: number;
+    })[][] | undefined;
+    getYearInterval(year?: any): {
+        start: number;
+        end: number;
+    };
+    computeName(month: any, year: any, _format?: string): string;
+    computeCurrentYearName(): any;
+    _onSelectHour(value: any): void;
+    _onSelectMinute(value: any): void;
+    _onSelectSecond(value: any): void;
+    _onSelectMonth(): void;
+    _dateFrom: any;
+    yearMode: any;
+    monthMode: any;
+    _onSelectYear(): void;
+    get datetimeSelected(): number;
+    _onDateTimeSelected(): void;
+    value: number | undefined;
+    _onNow(): void;
+    month: string | undefined;
+    year: any;
+    get disableValidation(): boolean;
+    _onSelect({ detail }: {
+        detail: any;
+    }): void;
+    hoveredDate: any;
+    _onHover(event: any): void;
+    _onNextMonth(): void;
+    _onPrevMonth(): void;
+    _onNextYear(): void;
+    _onPrevYear(): void;
+    goToday(): void;
+    hasGoToday(): boolean;
+}
+import { LitElement } from "lit-element/lit-element";