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.
120 lines • 4.91 kB
JavaScript
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 { getDateFormatter } from 'igniteui-i18n-core';
import { html, LitElement } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { range } from 'lit/directives/range.js';
import { addThemingController } from '../../../theming/theming-controller.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 { partMap } from '../../common/part-map.js';
import { addSafeEventListener, chunk } from '../../common/util.js';
import { areSameMonth, getViewElement, MONTHS_PER_ROW } from '../helpers.js';
import { CalendarDay } from '../model.js';
import { all } from '../themes/year-month.js';
import { styles } from '../themes/year-month-view.base.css.js';
let IgcMonthsViewComponent = class IgcMonthsViewComponent extends EventEmitterMixin(LitElement) {
static { IgcMonthsViewComponent_1 = this; }
static { this.tagName = 'igc-months-view'; }
static { this.styles = styles; }
static register() {
registerComponent(IgcMonthsViewComponent_1);
}
set value(value) {
this._value = CalendarDay.from(value);
}
get value() {
return this._value.native;
}
get _monthOptions() {
return { month: this.monthFormat };
}
constructor() {
super();
this._value = CalendarDay.today;
this.locale = 'en';
this.monthFormat = 'long';
this._ariaMonthOptions = {
month: 'long',
year: 'numeric',
};
addThemingController(this, all);
addKeybindings(this).setActivateHandler(this.handleInteraction);
addSafeEventListener(this, 'click', this.handleInteraction);
}
connectedCallback() {
super.connectedCallback();
this.role = 'grid';
}
focusActiveDate(options) {
this.activeMonth.focus(options);
}
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 = getDateFormatter().formatDateTime(entry.native, this.locale, this._ariaMonthOptions);
const value = getDateFormatter().formatDateTime(entry.native, this.locale, this._monthOptions);
const active = areSameMonth(this._value, entry);
const current = areSameMonth(now, entry);
const selected = this._value.month === entry.month;
return html `
<span part=${partMap({ month: true, selected, current })}>
<span
role="gridcell"
data-value=${entry.month}
part=${partMap({ 'month-inner': true, selected, current })}
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>
`;
}
}
};
__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);
IgcMonthsViewComponent = IgcMonthsViewComponent_1 = __decorate([
blazorIndirectRender,
blazorSuppressComponent
], IgcMonthsViewComponent);
export default IgcMonthsViewComponent;
//# sourceMappingURL=months-view.js.map