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
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 { 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