@bimeister/pupakit.calendar
Version:
PupaKit Calendar
34 lines • 8.78 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
export class CalendarDayComponent {
constructor() {
this.value = null;
this.isDisabled = false;
this.isEmpty = false;
this.isCurrent = false;
this.isSelected = false;
this.select = new EventEmitter();
}
handleClick() {
this.select.emit();
}
}
CalendarDayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CalendarDayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CalendarDayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CalendarDayComponent, selector: "pupa-calendar-day", inputs: { value: "value", isDisabled: "isDisabled", isEmpty: "isEmpty", isCurrent: "isCurrent", isSelected: "isSelected" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n class=\"day\"\n [class.day_disabled]=\"isDisabled\"\n [class.day_empty]=\"isEmpty\"\n [class.day_current]=\"isCurrent\"\n [class.day_selected]=\"isSelected\"\n (click)=\"handleClick()\"\n [tabindex]=\"isEmpty ? -1 : 0\"\n>\n {{ value }}\n</div>\n", styles: [":host{display:block;width:6rem;height:6rem;aspect-ratio:1/1}.day{display:flex;justify-content:center;align-items:center;flex-grow:0;flex-shrink:0;width:100%;height:100%;box-sizing:border-box;border-color:transparent;background-color:transparent;border-radius:1rem;cursor:pointer;transition:var(--transition-duration_shortest) var(--transition-timing-function_common);font-family:NotoSans,sans-serif;font-weight:400;font-size:11px;line-height:16px}@media (hover: hover){.day:hover{background-color:rgba(var(--semantic-color_kind-neutral-hover),var(--semantic-color-alpha_kind-neutral-hover))}}.day:active{background-color:rgba(var(--semantic-color_kind-neutral-pressed),var(--semantic-color-alpha_kind-neutral-pressed))}.day:focus-visible{border:1px solid rgba(var(--color_primary-600),var(--alpha-1000));outline:none}.day_current{border:1px solid rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal))}.day_selected{background-color:rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal));color:rgba(var(--semantic-color_text-inverse),var(--semantic-color-alpha_text-inverse));font-family:NotoSans,sans-serif;font-weight:500;font-size:11px;line-height:16px}@media (hover: hover){.day_selected:hover{background-color:rgba(var(--semantic-color_kind-primary-hover),var(--semantic-color-alpha_kind-primary-hover))}}.day_selected:active{background-color:rgba(var(--semantic-color_kind-primary-pressed),var(--semantic-color-alpha_kind-primary-pressed))}.day_disabled{color:rgba(var(--semantic-color_text-disabled),var(--semantic-color-alpha_text-disabled));background-color:transparent}@media (hover: hover){.day_disabled:hover{background-color:transparent}}.day_empty{cursor:default;background-color:transparent;color:transparent;border:none}@media (hover: hover){.day_empty:hover{border:none;background-color:transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CalendarDayComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-calendar-day', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"day\"\n [class.day_disabled]=\"isDisabled\"\n [class.day_empty]=\"isEmpty\"\n [class.day_current]=\"isCurrent\"\n [class.day_selected]=\"isSelected\"\n (click)=\"handleClick()\"\n [tabindex]=\"isEmpty ? -1 : 0\"\n>\n {{ value }}\n</div>\n", styles: [":host{display:block;width:6rem;height:6rem;aspect-ratio:1/1}.day{display:flex;justify-content:center;align-items:center;flex-grow:0;flex-shrink:0;width:100%;height:100%;box-sizing:border-box;border-color:transparent;background-color:transparent;border-radius:1rem;cursor:pointer;transition:var(--transition-duration_shortest) var(--transition-timing-function_common);font-family:NotoSans,sans-serif;font-weight:400;font-size:11px;line-height:16px}@media (hover: hover){.day:hover{background-color:rgba(var(--semantic-color_kind-neutral-hover),var(--semantic-color-alpha_kind-neutral-hover))}}.day:active{background-color:rgba(var(--semantic-color_kind-neutral-pressed),var(--semantic-color-alpha_kind-neutral-pressed))}.day:focus-visible{border:1px solid rgba(var(--color_primary-600),var(--alpha-1000));outline:none}.day_current{border:1px solid rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal))}.day_selected{background-color:rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal));color:rgba(var(--semantic-color_text-inverse),var(--semantic-color-alpha_text-inverse));font-family:NotoSans,sans-serif;font-weight:500;font-size:11px;line-height:16px}@media (hover: hover){.day_selected:hover{background-color:rgba(var(--semantic-color_kind-primary-hover),var(--semantic-color-alpha_kind-primary-hover))}}.day_selected:active{background-color:rgba(var(--semantic-color_kind-primary-pressed),var(--semantic-color-alpha_kind-primary-pressed))}.day_disabled{color:rgba(var(--semantic-color_text-disabled),var(--semantic-color-alpha_text-disabled));background-color:transparent}@media (hover: hover){.day_disabled:hover{background-color:transparent}}.day_empty{cursor:default;background-color:transparent;color:transparent;border:none}@media (hover: hover){.day_empty:hover{border:none;background-color:transparent}}\n"] }]
}], propDecorators: { value: [{
type: Input
}], isDisabled: [{
type: Input
}], isEmpty: [{
type: Input
}], isCurrent: [{
type: Input
}], isSelected: [{
type: Input
}], select: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kYXItZGF5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2NhbGVuZGFyLWRheS9jYWxlbmRhci1kYXkuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvY2FsZW5kYXItZGF5L2NhbGVuZGFyLWRheS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVNuSCxNQUFNLE9BQU8sb0JBQW9CO0lBUGpDO1FBU1MsVUFBSyxHQUFrQixJQUFJLENBQUM7UUFHNUIsZUFBVSxHQUFZLEtBQUssQ0FBQztRQUc1QixZQUFPLEdBQVksS0FBSyxDQUFDO1FBR3pCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFHM0IsZUFBVSxHQUFZLEtBQUssQ0FBQztRQUduQixXQUFNLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7S0FLdkU7SUFIUSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQzs7a0hBckJVLG9CQUFvQjtzR0FBcEIsb0JBQW9CLG9OQ1RqQyx1UUFXQTs0RkRGYSxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0UsbUJBQW1CLGlCQUdkLGlCQUFpQixDQUFDLFFBQVEsbUJBQ3hCLHVCQUF1QixDQUFDLE1BQU07OEJBSXhDLEtBQUs7c0JBRFgsS0FBSztnQkFJQyxVQUFVO3NCQURoQixLQUFLO2dCQUlDLE9BQU87c0JBRGIsS0FBSztnQkFJQyxTQUFTO3NCQURmLEtBQUs7Z0JBSUMsVUFBVTtzQkFEaEIsS0FBSztnQkFJVSxNQUFNO3NCQURyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdwdXBhLWNhbGVuZGFyLWRheScsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYWxlbmRhci1kYXkuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jYWxlbmRhci1kYXkuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uRW11bGF0ZWQsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDYWxlbmRhckRheUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyB2YWx1ZTogbnVtYmVyIHwgbnVsbCA9IG51bGw7XG5cbiAgQElucHV0KClcbiAgcHVibGljIGlzRGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgaXNFbXB0eTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBpc0N1cnJlbnQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgaXNTZWxlY3RlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgcmVhZG9ubHkgc2VsZWN0OiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHVibGljIGhhbmRsZUNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0LmVtaXQoKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImRheVwiXG4gIFtjbGFzcy5kYXlfZGlzYWJsZWRdPVwiaXNEaXNhYmxlZFwiXG4gIFtjbGFzcy5kYXlfZW1wdHldPVwiaXNFbXB0eVwiXG4gIFtjbGFzcy5kYXlfY3VycmVudF09XCJpc0N1cnJlbnRcIlxuICBbY2xhc3MuZGF5X3NlbGVjdGVkXT1cImlzU2VsZWN0ZWRcIlxuICAoY2xpY2spPVwiaGFuZGxlQ2xpY2soKVwiXG4gIFt0YWJpbmRleF09XCJpc0VtcHR5ID8gLTEgOiAwXCJcbj5cbiAge3sgdmFsdWUgfX1cbjwvZGl2PlxuIl19