@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-493e1dd

package/src/molecules/gv-cron-editor.js

@@ -1 +1,685 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCronEditor=void 0,require("../atoms/gv-date-picker"),require("../organisms/gv-tabs"),require("../atoms/gv-input"),require("../atoms/gv-tag");const e=require("lit"),t=require("../styles/skeleton"),s=require("../mixins/input-element"),a=require("object-path"),i=require("lit/directives/repeat"),n=require("../mixins/with-resize-observer"),l=require("../lib/cron-expression"),o=require("../lib/events");class r extends((0,n.withResizeObserver)((0,s.InputElement)(e.LitElement))){static get properties(){return{...super.properties,mode:{type:String},_value:{type:String,attribute:!1},_currentDocumentationId:{type:String,attribute:!1},_small:{type:Boolean},_truncateTabs:{type:Boolean}}}constructor(){super(),this._value="",this.readonly=!1,this.autofocus=!1,this.clipboard=!1,this._modes=["seconds","minutes","hourly","daily","weekly","monthly","yearly","pro"],this._timeRange=[...Array(60).keys()],this._days=[{value:"MON",label:"Monday"},{value:"TUE",label:"Tuesday"},{value:"WED",label:"Wednesday"},{value:"THU",label:"Thursday"},{value:"FRI",label:"Friday"},{value:"SAT",label:"Saturday"},{value:"SUN",label:"Sunday"}],this._months=["January","February","March","April","May","June","July","August","September","October","November","December"],this._state={seconds:{seconds:1},minutes:{minutes:1,seconds:0},hourly:{hours:1,minutes:0,seconds:0},daily:{days:1,time:0,weekdays:!1},weekly:{days:[],time:0},monthly:{day:1,month:1,time:0},yearly:{day:1,month:1,time:0},pro:{value:"",displayDetails:!1}},this._docs=[{id:"second",label:"Second"},{id:"minute",label:"Minute"},{id:"hour",label:"Hour"},{id:"day-month",label:"Day (month)"},{id:"month",label:"Month"},{id:"day-week",label:"Day (week)"}],this._currentDocumentationId=this._docs[0].id,this._handleChange=this._onChange.bind(this),this._small=!1}tryToComputeAndInitModeFromValue(){if(!this.value||this.mode)return void(this.mode=this.mode||"pro");const[e,t,s]=this.value.split(" ");/\d+ \d+ \*\/\d+ \* \* \*/.test(this.value)?(this.mode="hourly",this._state.hourly.hours=Number(s.replace("*/","")),this._state.hourly.minutes=Number(t),this._state.hourly.seconds=Number(e)):/\d+ \*\/\d+ \* \* \* \*/.test(this.value)?(this.mode="minutes",this._state.minutes.minutes=Number(t.replace("*/","")),this._state.minutes.seconds=Number(e)):/\*\/\d+ \* \* \* \* \*/.test(this.value)?(this.mode="seconds",this._state.seconds.seconds=Number(e.replace("*/",""))):this.mode="pro"}onResize({width:e}){this._truncateTabs=e<750,this._small=e<449}set value(e){(0,l.isValidCron)(e,{seconds:!0,alias:!0})&&(this._value=e,""===this._state.pro.value&&(this._state.pro.value=e))}get value(){return"pro"===this.mode?this._state.pro.value:this._value}async firstUpdated(){this.tryToComputeAndInitModeFromValue(),await new Promise((e=>setTimeout(e,0))),this.shadowRoot.querySelectorAll("gv-input, gv-date-picker, gv-checkbox, gv-select").forEach((e=>{e.addEventListener(`${e.tagName.toLowerCase()}:input`,this._handleChange)}))}_onOpenDocumentation(e){this._currentDocumentationId=e}_onChange({target:e,detail:t}){if("cron-input"===e.id&&"pro"!==this.mode&&(this.mode="pro"),e.valid){if(null==e.name)throw new Error("Field target must have a name to update the state");let s=t;"gv-date-picker"===e.tagName.toLowerCase()?s=new Date(t):"number"===e.type&&(s=Number(t).valueOf()),(0,a.set)(this._state,e.name,s),this.generate(),e.classList.contains("request-update")&&this.requestUpdate()}}_onChangeTab(e){e.preventDefault(),e.stopPropagation();const{detail:{to:t}}=e;"pro"===t&&(this._state.pro.value=this.value),this.mode=t,this.generate(),"pro"===this.mode&&this.shadowRoot.querySelector("#cron-input").focus()}_getTimeExpression(e){return e?`${e.getSeconds()} ${e.getMinutes()} ${e.getHours()}`:"* * *"}generate(){let e="";switch(this.mode){case"seconds":e=this._state.seconds.seconds?`*/${this._state.seconds.seconds} * * * * *`:"* * * * * *";break;case"minutes":e=this._state.minutes.minutes?`${this._state.minutes.seconds} */${this._state.minutes.minutes} * * * *`:`${this._state.minutes.seconds} * * * * *`;break;case"hourly":e=this._state.hourly.hours?`${this._state.hourly.seconds} ${this._state.hourly.minutes} */${this._state.hourly.hours} * * *`:`${this._state.minutes.seconds} ${this._state.hourly.minutes} * * * *`;break;case"daily":e=!1===this._state.daily.weekdays?`${this._getTimeExpression(this._state.daily.time)} ${this._state.daily.days} * *`:`${this._getTimeExpression(this._state.daily.time)} * * MON-FRI`;break;case"weekly":e=0===this._state.weekly.days.length?`${this._getTimeExpression(this._state.weekly.time)} * * *`:`${this._getTimeExpression(this._state.weekly.time)} * * ${this._state.weekly.days.join(",")}`;break;case"monthly":e=`${this._getTimeExpression(this._state.monthly.time)} ${this._state.monthly.day} ${this._state.monthly.month} *`;break;case"yearly":e=`${this._getTimeExpression(this._state.yearly.time)} ${this._state.yearly.day} */${this._months.indexOf(this._state.yearly.month)+1} *`;break;case"pro":e=this._state.pro.value;break;default:throw new Error("Invalid cron active tab selection")}this.updateState(e),this.valid&&(this._value=e,this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),(0,o.dispatchCustomEvent)(this,"input",this.value))}updateState(e){super.updateState(e),this.valid&&((0,l.isValidCron)(e,{seconds:!0,alias:!0})?this.setValidity():this.setValidity(!0,"field is not valid cron expression"))}renderLabel(){return this.label?e.html`<label for="${this.id}" title="${this.label}">${this.label}</label>`:""}displayProDetails(){this._state.pro.displayDetails=!this._state.pro.displayDetails,this.requestUpdate()}renderProDetails(){return this._state.pro.displayDetails?e.html`<div class="tab-content_pro-pane_container"><div class="tab-content_pro-pane"><div>Rules for:</div><div>${(0,i.repeat)(this._docs,(e=>e.id),(t=>{const s=t.id===this._currentDocumentationId;return e.html`<gv-tag @gv-tag:click="${this._onOpenDocumentation.bind(this,t.id)}" ?clickable="${!s}" ?major="${s}" ?minor="${!s}">${t.label}</gv-tag>`}))}</div><ul class="help"><li><small>Allowed characters: <code>${this.allowedChar}</code></small></li><li><small>Allowed values: <code>${this.allowedValues}</code></small></li></ul></div><div class="tab-content_pro-pane"><div>Examples:</div><ul class="help"><li><small><code>*</code>: for each unit (0, 1, 2, 3...)</small></li><li><small><code>5,8</code>: units 5 and 8</small></li><li><small><code>2-5</code>: units from 2 to 5 (2, 3, 4, 5)</small></li><li><small><code>*/3</code>: every 3 units (0, 3, 6, 9...)</small></li><li><small><code>10-20/3</code>: every 3 units, between the tenth and the twentieth (10, 13, 16, 19)</small></li></ul></div></div>`:""}render(){return e.html`<div>${this.renderLabel()}<div class="box"><gv-tabs .value="${this.mode}" .options="${this._modes}" .disabled="${this.disabled}" ?small="${this._small}" ?truncate="${this._truncateTabs}" @gv-tabs:change="${this._onChangeTab.bind(this)}"><div slot="title" class="generated-expression"><gv-input name="pro.value" .autofocus="${this.autofocus}" .value="${this.value}" id="cron-input" placeholder="* */30 * * * * (Every 30 min)"></gv-input></div><div slot="content" id="seconds" class="tab-content"><span>Every</span><gv-input small type="number" min="1" name="seconds.seconds" .value="${this._state.seconds.seconds}"></gv-input><span>second(s)</span></div><div slot="content" id="minutes" class="tab-content"><span>Every</span><gv-input small type="number" min="1" name="minutes.minutes" .value="${this._state.minutes.minutes}"></gv-input><span>minute(s) on second</span><gv-input small type="number" min="0" max="59" name="minutes.seconds" .value="${this._state.minutes.seconds}"></gv-input></div><div slot="content" id="hourly" class="tab-content"><span>Every</span><gv-input small type="number" min="1" name="hourly.hours" .value="${this._state.hourly.hours}"></gv-input><span>hour(s) on minute</span><gv-input small type="number" min="0" max="59" name="hourly.minutes" .value="${this._state.hourly.minutes}"></gv-input><span>and second</span><gv-input small type="number" min="0" max="59" name="hourly.seconds" .value="${this._state.hourly.seconds}"></gv-input></div><div slot="content" id="daily" class="tab-content"><span>Every</span><gv-input small type="number" min="1" max="31" name="daily.days" ?disabled="${this._state.daily.weekdays}" .value="${this._state.daily.days}"></gv-input><span class="line">day(s)<gv-checkbox class="request-update" label="of week" name="daily.weekdays" ?checked="${this._state.daily.weekdays}"></gv-checkbox>at</span><gv-date-picker small time strict name="daily.time" .value="${this._state.daily.time}"></gv-date-picker></div><div slot="content" id="weekly" class="tab-content tab-content_weekly"><span>Every</span><gv-select small multiple="multiple" name="weekly.days" .options="${this._days}" .value="${this._state.weekly.days}"></gv-select><span>day(s) at</span><gv-date-picker small time strict name="weekly.time" .value="${this._state.weekly.time}"></gv-date-picker></div><div slot="content" id="monthly" class="tab-content"><span>On the</span><gv-input small type="number" min="1" max="31" name="monthly.day" class="request-update" .value="${this._state.monthly.day}"></gv-input><span><sup>${this._getDaySuffix(this._state.monthly.day)}</sup> </span><span>day of every</span><gv-input small type="number" min="1" max="12" name="monthly.month" .value="${this._state.monthly.month}"></gv-input><span>month(s) at</span><gv-date-picker small time strict name="monthly.time" .value="${this._state.monthly.time}"></gv-date-picker></div><div slot="content" id="yearly" class="tab-content"><span>Every</span><gv-select small name="yearly.month" .options="${this._months}" .value="${this._state.yearly.month}"></gv-select><span>on the</span><gv-input small type="number" min="1" max="31" name="yearly.day" class="request-update" .value="${this._state.yearly.day}"></gv-input><span><sup>${this._getDaySuffix(this._state.yearly.day)}</sup></span> <span>day</span><gv-date-picker small time strict name="yearly.time" .value="${this._state.yearly.time}"></gv-date-picker></div><div slot="content" id="pro" class="tab-content tab-content_pro"><gv-button link small class="tab-content_pro-details_btn" @click="${this.displayProDetails}">${this._state.pro.displayDetails?"Hide information about cron rules and examples":"Display information about cron rules and examples"}</gv-button>${this.renderProDetails()}</div></gv-tabs></div></div>`}get allowedValues(){if("pro"===this.mode)switch(this._currentDocumentationId){case"hour":return"0-23";case"day-month":return"1-31";case"month":return"1-12 or JAN-DEC";case"day-week":return"1-7 or SUN-SAT";default:return"0-59"}return""}get allowedChar(){return"pro"===this.mode?",-*/":""}_getDaySuffix(e=1){return e?e.toString().endsWith("1")?"st":e.toString().endsWith("2")?"nd":e.toString().endsWith("3")?"rd":"th":""}static get styles(){return[t.skeleton,e.css`:host{box-sizing:border-box;display:block;margin:.2rem}:host([invalid]) .box{border-left-color:var(--gv-theme-color-error-dark,#d32f2f);border-left-width:3px}.box{border:1px solid var(--gv-theme-neutral-color-dark,#bfbfbf);border-radius:4px}.generated-expression{display:flex;align-items:center;flex:1}.generated-expression>code,.generated-expression>span{margin:.4rem}.generated-expression code,.generated-expression gv-input{--input-small--fz:16px;font-size:16px}.generated-expression gv-input{--gv-input--bdc:transparent;margin:0;min-width:190px}.tab-content{display:flex;align-items:center;background-color:var(--gv-theme-neutral-color,#f5f5f5);font-style:italic;font-size:var(--gv-theme-font-size-s,12px);padding:.2rem}.tab-content>*{margin:.2rem}.tab-content gv-input[type=number]{width:50px}.tab-content_weekly gv-select{width:auto}.tab-content_pro code{font-size:14px;font-weight:700;font-style:normal}.tab-content_pro{display:flex;flex-direction:column;align-items:normal;--gv-icon--s:18px;padding:.2rem}.tab-content_pro-details_btn{--gv-button--fz:12px}.tab-content_pro-pane_container{display:flex;flex-direction:row}.tab-content_pro-pane{flex:auto}.tab-content_pro>*{margin:.2rem}.tab-content_pro gv-icon,.tab-content_pro small{margin:0 .2rem}gv-tabs{--gv-tabs-options--m:auto 0.2rem auto 0}gv-tabs[small]{--gv-tabs-options--m:auto 0}gv-tabs[small] .tab-content{padding:0}.line{display:flex;align-items:center;margin:0}.line>*{margin:0 .3rem}gv-checkbox{text-decoration:line-through;font-weight:400}gv-checkbox[checked]{text-decoration:none}sup{display:inline-block;font-size:var(--gv-theme-font-size-s,12px)}ul{list-style:none;margin:.5rem 1rem;padding:0}ul.help{padding-left:.2rem;margin-left:.4rem;border-left:2px dotted var(--gv-theme-neutral-color-dark,#bfbfbf)}small{font-size:var(--gv-theme-font-size-s,12px)}`]}}exports.GvCronEditor=r,window.customElements.define("gv-cron-editor",r);
+/*
+ * 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 '../atoms/gv-date-picker';
+import '../organisms/gv-tabs';
+import '../atoms/gv-input';
+import '../atoms/gv-tag';
+import { css, LitElement, html } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { InputElement } from '../mixins/input-element';
+import { set } from 'object-path';
+import { repeat } from 'lit/directives/repeat';
+import { withResizeObserver } from '../mixins/with-resize-observer';
+import { isValidCron } from '../lib/cron-expression';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Cron editor component
+ *
+ * ## Details
+ *
+ * @fires gv-cron-editor:input - input events with the `value` on `detail`
+ *
+ * @attr {String} label - cron editor label
+ * @attr {String} value - cron expression
+ * @attr {String} mode - the opened mode (if no value is set, the pro mode will be opened)
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvCronEditor extends withResizeObserver(InputElement(LitElement)) {
+    static get properties() {
+        return {
+            ...super.properties,
+            mode: { type: String },
+            _value: { type: String, attribute: false },
+            _currentDocumentationId: { type: String, attribute: false },
+            _small: { type: Boolean },
+            _truncateTabs: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this._value = '';
+        this.readonly = false;
+        this.autofocus = false;
+        this.clipboard = false;
+        this._modes = ['seconds', 'minutes', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'pro'];
+        this._timeRange = [...Array(60).keys()];
+        this._days = [
+            { value: 'MON', label: 'Monday' },
+            { value: 'TUE', label: 'Tuesday' },
+            { value: 'WED', label: 'Wednesday' },
+            { value: 'THU', label: 'Thursday' },
+            { value: 'FRI', label: 'Friday' },
+            { value: 'SAT', label: 'Saturday' },
+            { value: 'SUN', label: 'Sunday' },
+        ];
+        this._months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ];
+        this._state = {
+            seconds: {
+                seconds: 1,
+            },
+            minutes: {
+                minutes: 1,
+                seconds: 0,
+            },
+            hourly: {
+                hours: 1,
+                minutes: 0,
+                seconds: 0,
+            },
+            daily: {
+                days: 1,
+                time: 0,
+                weekdays: false,
+            },
+            weekly: {
+                days: [],
+                time: 0,
+            },
+            monthly: {
+                day: 1,
+                month: 1,
+                time: 0,
+            },
+            yearly: {
+                day: 1,
+                month: 1,
+                time: 0,
+            },
+            pro: {
+                value: '',
+                displayDetails: false,
+            },
+        };
+        this._docs = [
+            { id: 'second', label: 'Second' },
+            { id: 'minute', label: 'Minute' },
+            { id: 'hour', label: 'Hour' },
+            { id: 'day-month', label: 'Day (month)' },
+            { id: 'month', label: 'Month' },
+            { id: 'day-week', label: 'Day (week)' },
+        ];
+        this._currentDocumentationId = this._docs[0].id;
+        this._handleChange = this._onChange.bind(this);
+        this._small = false;
+    }
+    tryToComputeAndInitModeFromValue() {
+        if (!this.value || this.mode) {
+            this.mode = this.mode || 'pro';
+            return;
+        }
+        const [seconds, minutes, hours] = this.value.split(' ');
+        if (/\d+ \d+ \*\/\d+ \* \* \*/.test(this.value)) {
+            // Match: `1 42 */15 * * *`
+            this.mode = 'hourly';
+            this._state.hourly.hours = Number(hours.replace('*/', ''));
+            this._state.hourly.minutes = Number(minutes);
+            this._state.hourly.seconds = Number(seconds);
+        }
+        else if (/\d+ \*\/\d+ \* \* \* \*/.test(this.value)) {
+            // Match: `1 */15 * * * *`
+            this.mode = 'minutes';
+            this._state.minutes.minutes = Number(minutes.replace('*/', ''));
+            this._state.minutes.seconds = Number(seconds);
+        }
+        else if (/\*\/\d+ \* \* \* \* \*/.test(this.value)) {
+            // Match: `*/15 * * * * *`
+            this.mode = 'seconds';
+            this._state.seconds.seconds = Number(seconds.replace('*/', ''));
+        }
+        else {
+            this.mode = 'pro';
+        }
+    }
+    onResize({ width }) {
+        this._truncateTabs = width < 750;
+        this._small = width < 449;
+    }
+    set value(value) {
+        if (isValidCron(value, { seconds: true, alias: true })) {
+            this._value = value;
+            if (this._state.pro.value === '') {
+                this._state.pro.value = value;
+            }
+        }
+    }
+    get value() {
+        if (this.mode === 'pro') {
+            return this._state.pro.value;
+        }
+        return this._value;
+    }
+    async firstUpdated() {
+        this.tryToComputeAndInitModeFromValue();
+        // Give the browser a chance to paint
+        // eslint-disable-next-line promise/param-names
+        await new Promise((r) => setTimeout(r, 0));
+        this.shadowRoot.querySelectorAll('gv-input, gv-date-picker, gv-checkbox, gv-select').forEach((element) => {
+            element.addEventListener(`${element.tagName.toLowerCase()}:input`, this._handleChange);
+        });
+    }
+    _onOpenDocumentation(docId) {
+        this._currentDocumentationId = docId;
+    }
+    _onChange({ target, detail }) {
+        if (target.id === 'cron-input' && this.mode !== 'pro') {
+            this.mode = 'pro';
+        }
+        if (target.valid) {
+            if (target.name == null) {
+                throw new Error('Field target must have a name to update the state');
+            }
+            const tagName = target.tagName.toLowerCase();
+            let value = detail;
+            if (tagName === 'gv-date-picker') {
+                value = new Date(detail);
+            }
+            else if (target.type === 'number') {
+                value = Number(detail).valueOf();
+            }
+            set(this._state, target.name, value);
+            this.generate();
+            if (target.classList.contains('request-update')) {
+                this.requestUpdate();
+            }
+        }
+    }
+    _onChangeTab(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: { to }, } = event;
+        if (to === 'pro') {
+            // Needs to be done first otherwise `value` is overridden before using it
+            this._state.pro.value = this.value;
+        }
+        this.mode = to;
+        this.generate();
+        if (this.mode === 'pro') {
+            this.shadowRoot.querySelector('#cron-input').focus();
+        }
+    }
+    _getTimeExpression(date) {
+        if (date) {
+            return `${date.getSeconds()} ${date.getMinutes()} ${date.getHours()}`;
+        }
+        return '* * *';
+    }
+    generate() {
+        let tmpValue = '';
+        switch (this.mode) {
+            case 'seconds':
+                if (this._state.seconds.seconds) {
+                    tmpValue = `*/${this._state.seconds.seconds} * * * * *`;
+                }
+                else {
+                    tmpValue = `* * * * * *`;
+                }
+                break;
+            case 'minutes':
+                if (this._state.minutes.minutes) {
+                    tmpValue = `${this._state.minutes.seconds} */${this._state.minutes.minutes} * * * *`;
+                }
+                else {
+                    tmpValue = `${this._state.minutes.seconds} * * * * *`;
+                }
+                break;
+            case 'hourly':
+                if (this._state.hourly.hours) {
+                    tmpValue = `${this._state.hourly.seconds} ${this._state.hourly.minutes} */${this._state.hourly.hours} * * *`;
+                }
+                else {
+                    tmpValue = `${this._state.minutes.seconds} ${this._state.hourly.minutes} * * * *`;
+                }
+                break;
+            case 'daily':
+                if (this._state.daily.weekdays === false) {
+                    tmpValue = `${this._getTimeExpression(this._state.daily.time)} ${this._state.daily.days} * *`;
+                }
+                else {
+                    tmpValue = `${this._getTimeExpression(this._state.daily.time)} * * MON-FRI`;
+                }
+                break;
+            case 'weekly':
+                if (this._state.weekly.days.length === 0) {
+                    tmpValue = `${this._getTimeExpression(this._state.weekly.time)} * * *`;
+                }
+                else {
+                    tmpValue = `${this._getTimeExpression(this._state.weekly.time)} * * ${this._state.weekly.days.join(',')}`;
+                }
+                break;
+            case 'monthly':
+                tmpValue = `${this._getTimeExpression(this._state.monthly.time)} ${this._state.monthly.day} ${this._state.monthly.month} *`;
+                break;
+            case 'yearly':
+                tmpValue = `${this._getTimeExpression(this._state.yearly.time)} ${this._state.yearly.day} */${this._months.indexOf(this._state.yearly.month) + 1} *`;
+                break;
+            case 'pro':
+                tmpValue = this._state.pro.value;
+                break;
+            default:
+                throw new Error('Invalid cron active tab selection');
+        }
+        this.updateState(tmpValue);
+        if (this.valid) {
+            this._value = tmpValue;
+            this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+            dispatchCustomEvent(this, 'input', this.value);
+        }
+    }
+    updateState(value) {
+        super.updateState(value);
+        if (this.valid) {
+            if (isValidCron(value, { seconds: true, alias: true })) {
+                this.setValidity();
+            }
+            else {
+                this.setValidity(true, 'field is not valid cron expression');
+            }
+        }
+    }
+    renderLabel() {
+        if (this.label) {
+            return html `<label for=${this.id} title="${this.label}">${this.label}</label>`;
+        }
+        return '';
+    }
+    displayProDetails() {
+        this._state.pro.displayDetails = !this._state.pro.displayDetails;
+        this.requestUpdate();
+    }
+    renderProDetails() {
+        if (this._state.pro.displayDetails) {
+            return html `<div class="tab-content_pro-pane_container">
+        <div class="tab-content_pro-pane">
+          <div>Rules for:</div>
+          <div>
+            ${repeat(this._docs, (doc) => doc.id, (doc) => {
+                const isCurrent = doc.id === this._currentDocumentationId;
+                return html ` <gv-tag
+                  @gv-tag:click="${this._onOpenDocumentation.bind(this, doc.id)}"
+                  ?clickable="${!isCurrent}"
+                  ?major="${isCurrent}"
+                  ?minor="${!isCurrent}"
+                  >${doc.label}</gv-tag
+                >`;
+            })}
+          </div>
+          <ul class="help">
+            <li>
+              <small>Allowed characters: <code>${this.allowedChar}</code></small>
+            </li>
+            <li>
+              <small>Allowed values: <code>${this.allowedValues}</code></small>
+            </li>
+          </ul>
+        </div>
+        <div class="tab-content_pro-pane">
+          <div>Examples:</div>
+          <ul class="help">
+            <li>
+              <small><code>*</code>: for each unit (0, 1, 2, 3...)</small>
+            </li>
+            <li>
+              <small><code>5,8</code>: units 5 and 8</small>
+            </li>
+            <li>
+              <small><code>2-5</code>: units from 2 to 5 (2, 3, 4, 5)</small>
+            </li>
+            <li>
+              <small><code>*/3</code>: every 3 units (0, 3, 6, 9...)</small>
+            </li>
+            <li>
+              <small><code>10-20/3</code>: every 3 units, between the tenth and the twentieth (10, 13, 16, 19)</small>
+            </li>
+          </ul>
+        </div>
+      </div>`;
+        }
+        return '';
+    }
+    render() {
+        return html `<div>
+      ${this.renderLabel()}
+      <div class="box">
+        <gv-tabs
+          .value="${this.mode}"
+          .options="${this._modes}"
+          .disabled="${this.disabled}"
+          ?small="${this._small}"
+          ?truncate="${this._truncateTabs}"
+          @gv-tabs:change="${this._onChangeTab.bind(this)}"
+        >
+          <div slot="title" class="generated-expression">
+            <gv-input
+              name="pro.value"
+              .autofocus="${this.autofocus}"
+              .value="${this.value}"
+              id="cron-input"
+              placeholder="* */30 * * * * (Every 30 min)"
+            ></gv-input>
+          </div>
+
+          <div slot="content" id="seconds" class="tab-content">
+            <span>Every</span>
+            <gv-input small type="number" min="1" name="seconds.seconds" .value="${this._state.seconds.seconds}"></gv-input>
+            <span>second(s)</span>
+          </div>
+
+          <div slot="content" id="minutes" class="tab-content">
+            <span>Every</span>
+            <gv-input small type="number" min="1" name="minutes.minutes" .value="${this._state.minutes.minutes}"></gv-input>
+            <span>minute(s) on second</span>
+            <gv-input small type="number" min="0" max="59" name="minutes.seconds" .value="${this._state.minutes.seconds}"></gv-input>
+          </div>
+
+          <div slot="content" id="hourly" class="tab-content">
+            <span>Every</span>
+            <gv-input small type="number" min="1" name="hourly.hours" .value="${this._state.hourly.hours}"></gv-input>
+            <span>hour(s) on minute</span>
+            <gv-input small type="number" min="0" max="59" name="hourly.minutes" .value="${this._state.hourly.minutes}"></gv-input>
+            <span>and second</span>
+            <gv-input small type="number" min="0" max="59" name="hourly.seconds" .value="${this._state.hourly.seconds}"></gv-input>
+          </div>
+
+          <div slot="content" id="daily" class="tab-content">
+            <span>Every</span>
+            <gv-input
+              small
+              type="number"
+              min="1"
+              max="31"
+              name="daily.days"
+              ?disabled="${this._state.daily.weekdays}"
+              .value="${this._state.daily.days}"
+            ></gv-input>
+            <span class="line">
+              day(s)
+              <gv-checkbox
+                class="request-update"
+                label="of week"
+                name="daily.weekdays"
+                ?checked="${this._state.daily.weekdays}"
+              ></gv-checkbox>
+              at</span
+            >
+            <gv-date-picker small time strict name="daily.time" .value="${this._state.daily.time}"></gv-date-picker>
+          </div>
+
+          <div slot="content" id="weekly" class="tab-content tab-content_weekly">
+            <span>Every</span>
+            <gv-select small multiple name="weekly.days" .options="${this._days}" .value="${this._state.weekly.days}"></gv-select>
+            <span>day(s) at</span>
+            <gv-date-picker small time strict name="weekly.time" .value="${this._state.weekly.time}"></gv-date-picker>
+          </div>
+
+          <div slot="content" id="monthly" class="tab-content">
+            <span>On the</span>
+            <gv-input
+              small
+              type="number"
+              min="1"
+              max="31"
+              name="monthly.day"
+              class="request-update"
+              .value="${this._state.monthly.day}"
+            ></gv-input>
+            <span><sup>${this._getDaySuffix(this._state.monthly.day)}</sup> </span>
+            <span>day of every</span>
+            <gv-input small type="number" min="1" max="12" name="monthly.month" .value="${this._state.monthly.month}"></gv-input>
+            <span>month(s) at</span>
+            <gv-date-picker small time strict name="monthly.time" .value="${this._state.monthly.time}"></gv-date-picker>
+          </div>
+
+          <div slot="content" id="yearly" class="tab-content">
+            <span>Every</span>
+            <gv-select small name="yearly.month" .options="${this._months}" .value="${this._state.yearly.month}"></gv-select>
+            <span>on the</span>
+            <gv-input
+              small
+              type="number"
+              min="1"
+              max="31"
+              name="yearly.day"
+              class="request-update"
+              .value="${this._state.yearly.day}"
+            ></gv-input>
+            <span><sup>${this._getDaySuffix(this._state.yearly.day)}</sup></span>
+            <span>day</span>
+            <gv-date-picker small time strict name="yearly.time" .value="${this._state.yearly.time}"></gv-date-picker>
+          </div>
+
+          <div slot="content" id="pro" class="tab-content tab-content_pro">
+            <gv-button link small class="tab-content_pro-details_btn" @click="${this.displayProDetails}">
+              ${this._state.pro.displayDetails
+            ? 'Hide information about cron rules and examples'
+            : 'Display information about cron rules and examples'}
+            </gv-button>
+            ${this.renderProDetails()}
+          </div>
+        </gv-tabs>
+      </div>
+    </div>`;
+    }
+    get allowedValues() {
+        if (this.mode === 'pro') {
+            switch (this._currentDocumentationId) {
+                case 'hour':
+                    return '0-23';
+                case 'day-month':
+                    return '1-31';
+                case 'month':
+                    return '1-12 or JAN-DEC';
+                case 'day-week':
+                    return '1-7 or SUN-SAT';
+                default:
+                    return '0-59';
+            }
+        }
+        return '';
+    }
+    get allowedChar() {
+        if (this.mode === 'pro') {
+            return ',-*/';
+        }
+        return '';
+    }
+    _getDaySuffix(day = 1) {
+        if (day) {
+            if (day.toString().endsWith('1')) {
+                return 'st';
+            }
+            else if (day.toString().endsWith('2')) {
+                return 'nd';
+            }
+            else if (day.toString().endsWith('3')) {
+                return 'rd';
+            }
+            return 'th';
+        }
+        return '';
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: block;
+          margin: 0.2rem;
+        }
+
+        :host([invalid]) .box {
+          border-left-color: var(--gv-theme-color-error-dark, #d32f2f);
+          border-left-width: 3px;
+        }
+
+        .box {
+          border: 1px solid var(--gv-theme-neutral-color-dark, #bfbfbf);
+          border-radius: 4px;
+        }
+
+        .generated-expression {
+          display: flex;
+          align-items: center;
+          flex: 1;
+        }
+
+        .generated-expression > span,
+        .generated-expression > code {
+          margin: 0.4rem;
+        }
+
+        .generated-expression gv-input,
+        .generated-expression code {
+          --input-small--fz: 16px;
+          font-size: 16px;
+        }
+
+        .generated-expression gv-input {
+          --gv-input--bdc: transparent;
+          margin: 0;
+          min-width: 190px;
+        }
+
+        .tab-content {
+          display: flex;
+          align-items: center;
+          background-color: var(--gv-theme-neutral-color, #f5f5f5);
+          font-style: italic;
+          font-size: var(--gv-theme-font-size-s, 12px);
+          padding: 0.2rem;
+        }
+
+        .tab-content > * {
+          margin: 0.2rem;
+        }
+
+        .tab-content gv-input[type='number'] {
+          width: 50px;
+        }
+
+        .tab-content_weekly gv-select {
+          width: auto;
+        }
+
+        .tab-content_pro code {
+          font-size: 14px;
+          font-weight: bold;
+          font-style: normal;
+        }
+
+        .tab-content_pro {
+          display: flex;
+          flex-direction: column;
+          align-items: normal;
+          --gv-icon--s: 18px;
+          padding: 0.2rem;
+        }
+
+        .tab-content_pro-details_btn {
+          --gv-button--fz: 12px;
+        }
+
+        .tab-content_pro-pane_container {
+          display: flex;
+          flex-direction: row;
+        }
+
+        .tab-content_pro-pane {
+          flex: auto;
+        }
+
+        .tab-content_pro > * {
+          margin: 0.2rem;
+        }
+
+        .tab-content_pro small,
+        .tab-content_pro gv-icon {
+          margin: 0 0.2rem;
+        }
+
+        gv-tabs {
+          --gv-tabs-options--m: auto 0.2rem auto 0;
+        }
+
+        gv-tabs[small] {
+          --gv-tabs-options--m: auto 0;
+        }
+
+        gv-tabs[small] .tab-content {
+          padding: 0;
+        }
+
+        .line {
+          display: flex;
+          align-items: center;
+          margin: 0;
+        }
+
+        .line > * {
+          margin: 0 0.3rem;
+        }
+
+        gv-checkbox {
+          text-decoration: line-through;
+          font-weight: normal;
+        }
+
+        gv-checkbox[checked] {
+          text-decoration: none;
+        }
+
+        sup {
+          display: inline-block;
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+
+        ul {
+          list-style: none;
+          margin: 0.5rem 1rem;
+          padding: 0;
+        }
+
+        ul.help {
+          padding-left: 0.2rem;
+          margin-left: 0.4rem;
+          border-left: 2px dotted var(--gv-theme-neutral-color-dark, #bfbfbf);
+        }
+
+        small {
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-cron-editor', GvCronEditor);