@aqua-ds/web-components/components-build/aq-range-shortcuts2.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { R as RANGES, D as DATE_FORMAT } from './format.js';
import { D as DateTime } from './luxon.js';
import { e as emitEvent } from './eventEmitter.js';

const AqRangeShortcuts = /*@__PURE__*/ proxyCustomElement(class AqRangeShortcuts extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.update = createEvent(this, "update", 7);
        this.ranges = RANGES;
        this.isoFormat = DATE_FORMAT.FORMAT_ISO;
        this.localRanges = RANGES;
    }
    onValueChange(newVal) {
        this.setRangeSelection(newVal);
    }
    onRangesChange(newVal) {
        this.localRanges = this.parseObject({ ...newVal });
    }
    handleRange(value, key) {
        if (this.rangeSelection !== key) {
            this.rangeSelection = key;
            emitEvent('update', this.el, {
                start: value[0].toFormat(this.isoFormat),
                end: value[1].toFormat(this.isoFormat),
            });
        }
    }
    setCapitalize(value) {
        const upperCaseLetter = value.slice(0, 1).toUpperCase();
        return `${upperCaseLetter}${value.slice(1, value.length)}`;
    }
    get getCustomRanges() {
        let date = { start: DateTime.fromISO(this.realValue.start).toFormat(this.format), end: DateTime.fromISO(this.realValue.end).toFormat(this.format) };
        let customRange = [DateTime.fromFormat(date.start, this.format), DateTime.fromFormat(date.end, this.format)];
        const parsedRange = this.parseObject({ ...this.ranges, custom: customRange });
        let localRanges = { ...parsedRange };
        return { values: Object.values(localRanges), keys: Object.keys(localRanges) };
    }
    parseToCompare(value, format) {
        return DateTime.fromFormat(value, format).toFormat(DATE_FORMAT.FORMAT_ISO);
    }
    isSameRange(rangeA, rangeB, format) {
        const rangeBStart = this.parseToCompare(rangeB.start, format);
        const rangeBEnd = this.parseToCompare(rangeB.end, format);
        return DateTime.fromISO(rangeA.start).toFormat(DATE_FORMAT.FORMAT_ISO) === rangeBStart && DateTime.fromISO(rangeA.end).toFormat(DATE_FORMAT.FORMAT_ISO) === rangeBEnd;
    }
    parseValues(rangeValues) {
        const values = Object.values(rangeValues);
        const newValues = [];
        let rangeStartDate;
        let rangeEndDate;
        for (let i = 0; i < values.length; i++) {
            const [rangeStart, rangeEnd] = values[i];
            if (typeof rangeStart === 'string' && typeof rangeEnd === 'string') {
                rangeStartDate = DateTime.fromISO(rangeStart).startOf('day');
                rangeEndDate = DateTime.fromISO(rangeEnd).endOf('day');
                newValues.push([rangeStartDate, rangeEndDate]);
            }
            else {
                newValues.push(values[i]);
            }
        }
        return newValues;
    }
    parseObject(rangeValues) {
        const keys = Object.keys(rangeValues);
        const parsedRange = { ...rangeValues };
        const parsedValues = this.parseValues(this.ranges);
        keys.forEach((key, index) => {
            parsedRange[key] = parsedValues[index];
        });
        return parsedRange;
    }
    setRangeSelection(newVal) {
        if (!newVal || !newVal.start || !newVal.end)
            return;
        let foundMatch = this.translations.rangeSelection.custom; // Por defecto: "Custom"
        const keys = Object.keys(this.ranges);
        const parsedValues = this.parseValues(this.ranges);
        for (let i = 0; i < parsedValues.length; i++) {
            const [rangeStart, rangeEnd] = parsedValues[i];
            if (!!rangeStart === false || !!rangeEnd === false)
                break;
            const shortcut = { start: rangeStart.toFormat(DATE_FORMAT.FORMAT_ISO), end: rangeEnd.toFormat(DATE_FORMAT.FORMAT_ISO) };
            if (this.isSameRange(shortcut, newVal, this.format)) {
                foundMatch = keys[i];
                break;
            }
        }
        this.rangeSelection = foundMatch;
    }
    get getObjectSplit() {
        return { keys: Object.keys(this.localRanges), values: Object.values(this.localRanges) };
    }
    componentDidLoad() {
        this.setRangeSelection(this.value);
    }
    render() {
        const { values, keys } = this.getCustomRanges;
        return (h("div", { key: '3c0067286a756ae880c613901fb814b891767305', class: "aq-date-picker__shortcuts" }, keys.map((item, index) => (h("button", { class: { 'aq-date-picker__shortcuts-item': true, 'aq-date-picker__shortcuts-item--active': this.rangeSelection === keys[index] }, onClick: () => this.handleRange(values[index], keys[index]) }, this.setCapitalize(item))))));
    }
    get el() { return this; }
    static get watchers() { return {
        "value": ["onValueChange"],
        "ranges": ["onRangesChange"]
    }; }
}, [256, "aq-range-shortcuts", {
        "ranges": [16],
        "format": [1],
        "isoFormat": [1, "iso-format"],
        "value": [16],
        "realValue": [16, "real-value"],
        "translations": [16],
        "rangeSelection": [32],
        "localRanges": [32]
    }, undefined, {
        "value": ["onValueChange"],
        "ranges": ["onRangesChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-range-shortcuts"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-range-shortcuts":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqRangeShortcuts);
            }
            break;
    } });
}

export { AqRangeShortcuts as A, defineCustomElement as d };