igniteui-webcomponents/components/calendar/years-view/years-view.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcYearsViewComponent_1;
import { LitElement, html } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { range } from 'lit/directives/range.js';
import { themes } from '../../../theming/theming-decorator.js';
import { addKeybindings } from '../../common/controllers/key-bindings.js';
import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
import { registerComponent } from '../../common/definitions/register.js';
import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
import { chunk, partNameMap } from '../../common/util.js';
import { YEARS_PER_ROW, getViewElement, getYearRange } from '../helpers.js';
import { CalendarDay } from '../model.js';
import { styles } from '../themes/year-month-view.base.css.js';
import { all } from '../themes/year-month.js';
let IgcYearsViewComponent = IgcYearsViewComponent_1 = class IgcYearsViewComponent extends EventEmitterMixin(LitElement) {
    static register() {
        registerComponent(IgcYearsViewComponent_1);
    }
    set value(value) {
        this._value = CalendarDay.from(value);
    }
    get value() {
        return this._value.native;
    }
    constructor() {
        super();
        this._value = CalendarDay.today;
        this.yearsPerPage = 15;
        addKeybindings(this, {
            bindingDefaults: { preventDefault: true },
        }).setActivateHandler(this.handleInteraction);
        this.addEventListener('click', this.handleInteraction);
    }
    connectedCallback() {
        super.connectedCallback();
        this.role = 'grid';
    }
    focusActiveDate() {
        this.activeYear.focus();
    }
    handleInteraction(event) {
        const value = getViewElement(event);
        if (value !== -1) {
            this._value = this._value.set({
                year: value,
            });
            this.emitEvent('igcChange', { detail: this.value });
        }
    }
    renderYear(year, now) {
        const selected = this._value.year === year;
        const current = year === now.year;
        const parts = { selected, current };
        return html `
      <span part=${partNameMap({ year: true, ...parts })}>
        <span
          role="gridcell"
          data-value=${year}
          part=${partNameMap({ 'year-inner': true, ...parts })}
          aria-selected=${selected}
          tabindex=${selected ? 0 : -1}
        >
          ${year}
        </span>
      </span>
    `;
    }
    *render() {
        const now = CalendarDay.today;
        const { start } = getYearRange(this._value, this.yearsPerPage);
        const years = Array.from(range(start, start + this.yearsPerPage));
        for (const row of chunk(years, YEARS_PER_ROW)) {
            yield html `
        <div part="years-row" role="row">
          ${row.map((year) => this.renderYear(year, now))}
        </div>
      `;
        }
    }
};
IgcYearsViewComponent.tagName = 'igc-years-view';
IgcYearsViewComponent.styles = styles;
__decorate([
    state()
], IgcYearsViewComponent.prototype, "_value", void 0);
__decorate([
    query('[tabindex="0"]')
], IgcYearsViewComponent.prototype, "activeYear", void 0);
__decorate([
    property({ attribute: false })
], IgcYearsViewComponent.prototype, "value", null);
__decorate([
    property({ type: Number, attribute: 'years-per-page' })
], IgcYearsViewComponent.prototype, "yearsPerPage", void 0);
IgcYearsViewComponent = IgcYearsViewComponent_1 = __decorate([
    blazorIndirectRender,
    blazorSuppressComponent,
    themes(all)
], IgcYearsViewComponent);
export default IgcYearsViewComponent;
//# sourceMappingURL=years-view.js.map