UNPKG

@obliczeniowo/elementary

Version:

Library made in Angular version 20

github.com/Obliczeniowo/components-lib

Obliczeniowo/components-lib

103 lines (98 loc) • 12.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import * as i5 from '@obliczeniowo/elementary/icons'; import { IconsModule } from '@obliczeniowo/elementary/icons'; import * as i4 from '@obliczeniowo/elementary/buttons'; import { ButtonsModule } from '@obliczeniowo/elementary/buttons'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import * as i2 from '@obliczeniowo/elementary/input'; import { InputModule } from '@obliczeniowo/elementary/input'; import * as i0 from '@angular/core'; import { model, input, LOCALE_ID, Inject, Component, NgModule } from '@angular/core'; import { DatePipe, CommonModule } from '@angular/common'; import * as i1 from '@angular/cdk/overlay'; import { OverlayModule } from '@angular/cdk/overlay'; import * as i3 from '@obliczeniowo/elementary/time'; import { TimeModule } from '@obliczeniowo/elementary/time'; import { DragDropModule } from '@angular/cdk/drag-drop'; class TimePickerComponent { locale; /** time as Date object */ time = model(new Date()); /** input label */ label = input(''); /** define if is opened */ isOpen = false; get formattedTime() { const pipe = new DatePipe(this.locale); return pipe.transform(this.time(), 'HH:mm:ss'); } constructor(locale) { this.locale = locale; } toggle() { this.isOpen = !this.isOpen; } cancel() { this.toggle(); } ok(date) { this.time.set(date); this.toggle(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TimePickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: TimePickerComponent, isStandalone: false, selector: "obl-time-picker", inputs: { time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { time: "timeChange" }, ngImport: i0, template: "<obl-input-wrapper\n [label]=\"label()\"\n cdkOverlayOrigin\n #dropDown=\"cdkOverlayOrigin\"\n (click)=\"toggle()\"\n #parent\n>\n <input oblInput [value]=\"formattedTime\" readonly />\n <obl-clock-time\n class=\"sm-time\"\n [date]=\"time()\"\n [display]=\"{\n time: false\n }\"\n ></obl-clock-time>\n</obl-input-wrapper>\n\n<ng-template\n #dropdownTmpl\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayOffsetX]=\"2\"\n (overlayOutsideClick)=\"toggle()\"\n>\n <div class=\"clock-wrapper\">\n <obl-clock-time\n [size]=\"350\"\n [date]=\"time()\"\n [display]=\"{\n time: true,\n interactive: true\n }\"\n [column]=\"true\"\n [fontSize]=\"48\"\n #clock\n >\n <div class=\"buttons\">\n <button oblButton (click)=\"ok(clock.date())\">\n <obl-icon [name]=\"'ok'\" [width]=\"14\"></obl-icon>\n </button>\n <button oblButton (click)=\"toggle()\">\n <obl-icon [name]=\"'cancel'\" [width]=\"14\"></obl-icon>\n </button>\n </div>\n </obl-clock-time>\n </div>\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.sm-time{cursor:pointer}.clock-wrapper{background-color:var(--default-background-color);padding:1rem;border-radius:1rem;border:1px solid var(--default-border-color);box-shadow:0 0 6px var(--default-text-color);margin:6px 0}.buttons{display:flex;justify-content:center;margin-top:5px}.buttons button:first-of-type{border-radius:2rem 0 0 2rem}.buttons button:last-of-type{border-radius:0 2rem 2rem 0}\n"], dependencies: [{ kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i2.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i2.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }, { kind: "component", type: i3.ClockTimeComponent, selector: "obl-clock-time", inputs: ["size", "display", "fontSize", "column", "date"], outputs: ["changed"] }, { kind: "directive", type: i4.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: i5.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{ type: Component, args: [{ selector: 'obl-time-picker', standalone: false, template: "<obl-input-wrapper\n [label]=\"label()\"\n cdkOverlayOrigin\n #dropDown=\"cdkOverlayOrigin\"\n (click)=\"toggle()\"\n #parent\n>\n <input oblInput [value]=\"formattedTime\" readonly />\n <obl-clock-time\n class=\"sm-time\"\n [date]=\"time()\"\n [display]=\"{\n time: false\n }\"\n ></obl-clock-time>\n</obl-input-wrapper>\n\n<ng-template\n #dropdownTmpl\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayOffsetX]=\"2\"\n (overlayOutsideClick)=\"toggle()\"\n>\n <div class=\"clock-wrapper\">\n <obl-clock-time\n [size]=\"350\"\n [date]=\"time()\"\n [display]=\"{\n time: true,\n interactive: true\n }\"\n [column]=\"true\"\n [fontSize]=\"48\"\n #clock\n >\n <div class=\"buttons\">\n <button oblButton (click)=\"ok(clock.date())\">\n <obl-icon [name]=\"'ok'\" [width]=\"14\"></obl-icon>\n </button>\n <button oblButton (click)=\"toggle()\">\n <obl-icon [name]=\"'cancel'\" [width]=\"14\"></obl-icon>\n </button>\n </div>\n </obl-clock-time>\n </div>\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.sm-time{cursor:pointer}.clock-wrapper{background-color:var(--default-background-color);padding:1rem;border-radius:1rem;border:1px solid var(--default-border-color);box-shadow:0 0 6px var(--default-text-color);margin:6px 0}.buttons{display:flex;justify-content:center;margin-top:5px}.buttons button:first-of-type{border-radius:2rem 0 0 2rem}.buttons button:last-of-type{border-radius:0 2rem 2rem 0}\n"] }] }], ctorParameters: () => [{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID] }] }] }); class TimePickerModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: TimePickerModule, declarations: [TimePickerComponent], imports: [CommonModule, OverlayModule, DragDropModule, InputModule, TimeModule, FormsModule, ReactiveFormsModule, ButtonsModule, IconsModule], exports: [TimePickerComponent] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TimePickerModule, imports: [CommonModule, OverlayModule, DragDropModule, InputModule, TimeModule, FormsModule, ReactiveFormsModule, ButtonsModule, IconsModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TimePickerModule, decorators: [{ type: NgModule, args: [{ declarations: [ TimePickerComponent ], imports: [ CommonModule, OverlayModule, DragDropModule, InputModule, TimeModule, FormsModule, ReactiveFormsModule, ButtonsModule, IconsModule ], exports: [ TimePickerComponent ] }] }] }); /** * Generated bundle index. Do not edit. */ export { TimePickerComponent, TimePickerModule }; //# sourceMappingURL=obliczeniowo-elementary-time-picker.mjs.map