UNPKG

igniteui-webcomponents

Version:

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.

131 lines 5.25 kB
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 IgcMonthsViewComponent_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 { watch } from '../../common/decorators/watch.js'; import { registerComponent } from '../../common/definitions/register.js'; import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js'; import { EventEmitterMixin } from '../../common/mixins/event-emitter.js'; import { chunk, partNameMap } from '../../common/util.js'; import { MONTHS_PER_ROW, areSameMonth, getViewElement } 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 IgcMonthsViewComponent = IgcMonthsViewComponent_1 = class IgcMonthsViewComponent extends EventEmitterMixin(LitElement) { static register() { registerComponent(IgcMonthsViewComponent_1); } set value(value) { this._value = CalendarDay.from(value); } get value() { return this._value.native; } localeChange() { this._intl.locale = this.locale; } formatChange() { this._intl.update({ month: { month: this.monthFormat } }); } constructor() { super(); this._value = CalendarDay.today; this.locale = 'en'; this.monthFormat = 'long'; this._intl = createDateTimeFormatters(this.locale, { month: { month: this.monthFormat }, ariaMonth: { month: 'long', year: 'numeric' }, }); addKeybindings(this, { bindingDefaults: { preventDefault: true }, }).setActivateHandler(this.handleInteraction); this.addEventListener('click', this.handleInteraction); } connectedCallback() { super.connectedCallback(); this.role = 'grid'; } focusActiveDate() { this.activeMonth.focus(); } handleInteraction(event) { const value = getViewElement(event); if (value !== -1) { this._value = this._value.set({ month: value }); this.emitEvent('igcChange', { detail: this.value }); } } renderMonth(entry, now) { const ariaLabel = this._intl.get('ariaMonth').format(entry.native); const value = this._intl.get('month').format(entry.native); const active = areSameMonth(this._value, entry); const current = areSameMonth(now, entry); const selected = this._value.month === entry.month; const parts = { selected, current }; return html ` <span part=${partNameMap({ month: true, ...parts })}> <span role="gridcell" data-value=${entry.month} part=${partNameMap({ 'month-inner': true, ...parts })} aria-selected=${selected} aria-label=${ariaLabel} tabindex=${active ? 0 : -1} > ${value} </span> </span> `; } *render() { const now = CalendarDay.today; const months = Array.from(range(12)); for (const row of chunk(months, MONTHS_PER_ROW)) { yield html ` <div part="months-row" role="row"> ${row.map((month) => this.renderMonth(this._value.set({ month }), now))} </div> `; } } }; IgcMonthsViewComponent.tagName = 'igc-months-view'; IgcMonthsViewComponent.styles = styles; __decorate([ state() ], IgcMonthsViewComponent.prototype, "_value", void 0); __decorate([ query('[tabindex="0"]') ], IgcMonthsViewComponent.prototype, "activeMonth", void 0); __decorate([ property({ attribute: false }) ], IgcMonthsViewComponent.prototype, "value", null); __decorate([ property() ], IgcMonthsViewComponent.prototype, "locale", void 0); __decorate([ property({ attribute: 'month-format' }) ], IgcMonthsViewComponent.prototype, "monthFormat", void 0); __decorate([ watch('locale') ], IgcMonthsViewComponent.prototype, "localeChange", null); __decorate([ watch('monthFormat') ], IgcMonthsViewComponent.prototype, "formatChange", null); IgcMonthsViewComponent = IgcMonthsViewComponent_1 = __decorate([ blazorIndirectRender, blazorSuppressComponent, themes(all) ], IgcMonthsViewComponent); export default IgcMonthsViewComponent; //# sourceMappingURL=months-view.js.map