@gloww/gloww 20.0.0-beta.39 → 20.0.0-beta.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/gloww-gloww.mjs
CHANGED
|
@@ -3959,7 +3959,7 @@ class DatetimeComponent {
|
|
|
3959
3959
|
multi: true,
|
|
3960
3960
|
useExisting: forwardRef(() => DatetimeComponent)
|
|
3961
3961
|
}
|
|
3962
|
-
], ngImport: i0, template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n <mat-form-field class=\"date-field\">\n @if (display) {\n <mat-label>{{ display }}</mat-label>\n }\n <input\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"dateControl\"\n [disabled]=\"isDisabled\"\n (dateChange)=\"markTouched()\"\n (blur)=\"markTouched()\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n @if (isDateTime) {\n <div class=\"middle-actions\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Clear date and time\"\n aria-label=\"Clear date and time\"\n (click)=\"clear()\">\n <i class=\"fal fa-eraser\"></i>\n </button>\n\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Open time clock\"\n aria-label=\"Open time clock\"\n (click)=\"openClock()\">\n <i class=\"fal fa-clock\"></i>\n </button>\n </div>\n\n <div class=\"time-row\">\n <mat-form-field class=\"time-field\">\n <mat-label>HH</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"23\"\n inputmode=\"numeric\"\n [formControl]=\"hourControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('hour')\"\n (blur)=\"onTimePartBlur('hour')\">\n </mat-form-field>\n\n <mat-form-field class=\"time-field\">\n <mat-label>MM</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"minuteControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('minute')\"\n (blur)=\"onTimePartBlur('minute')\">\n </mat-form-field>\n\n @if (showSeconds) {\n <mat-form-field class=\"time-field\">\n <mat-label>SS</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"secondControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('second')\"\n (blur)=\"onTimePartBlur('second')\">\n </mat-form-field>\n }\n </div>\n\n @if (isClockOpen) {\n <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"clock-panel\">\n <div class=\"clock-panel-header\">\n <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n <button\n mat-button\n type=\"button\"\n class=\"clock-close\"\n [disabled]=\"isDisabled\"\n (click)=\"closeClock()\">\n Close\n </button>\n </div>\n\n <div class=\"clock-summary\">\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n {{ hourControl.value || '00' }}\n </button>\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n {{ minuteControl.value || '00' }}\n </button>\n @if (showSeconds) {\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n {{ secondControl.value || '00' }}\n </button>\n }\n </div>\n\n <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n @if (clockStep === 'hour') {\n @for (marker of hourMarkers; track marker.value) {\n <button\n type=\"button\"\n class=\"clock-hour-label\"\n [class.selected]=\"isHourSelected(marker.value)\"\n [class.inner-ring]=\"marker.value >= 12\"\n [style.left]=\"marker.left\"\n [style.top]=\"marker.top\"\n (click)=\"selectClockHour(marker.value, $event)\">\n {{ marker.label }}\n </button>\n }\n }\n\n @if (clockStep === 'minute') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of minuteTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of minuteTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n @if (clockStep === 'second') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of secondTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of secondTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n <div class=\"clock-center-dot\"></div>\n </div>\n\n <div class=\"clock-help\">\n @if (clockStep === 'hour') {\n <span>Outer ring 00-11, inner ring 12-23.</span>\n }\n @if (clockStep === 'minute') {\n <span>Click the dial. The nearest minute will be selected.</span>\n }\n @if (clockStep === 'second') {\n <span>Click the dial. The nearest second will be selected.</span>\n }\n </div>\n\n <div class=\"clock-footer\">\n <span>{{ timeSummary }}</span>\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
3962
|
+
], ngImport: i0, template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n <mat-form-field class=\"date-field\">\n @if (display) {\n <mat-label>{{ display }}</mat-label>\n }\n <input\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"dateControl\"\n [disabled]=\"isDisabled\"\n (dateChange)=\"markTouched()\"\n (blur)=\"markTouched()\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n @if (isDateTime) {\n <div class=\"middle-actions\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Clear date and time\"\n aria-label=\"Clear date and time\"\n (click)=\"clear()\">\n <i class=\"fal fa-eraser\"></i>\n </button>\n\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Open time clock\"\n aria-label=\"Open time clock\"\n (click)=\"openClock()\">\n <i class=\"fal fa-clock\"></i>\n </button>\n </div>\n\n <div class=\"time-row\">\n <mat-form-field class=\"time-field\">\n <mat-label>HH</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"23\"\n inputmode=\"numeric\"\n [formControl]=\"hourControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('hour')\"\n (blur)=\"onTimePartBlur('hour')\">\n </mat-form-field>\n\n <mat-form-field class=\"time-field\">\n <mat-label>MM</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"minuteControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('minute')\"\n (blur)=\"onTimePartBlur('minute')\">\n </mat-form-field>\n\n @if (showSeconds) {\n <mat-form-field class=\"time-field\">\n <mat-label>SS</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"secondControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('second')\"\n (blur)=\"onTimePartBlur('second')\">\n </mat-form-field>\n }\n </div>\n\n @if (isClockOpen) {\n <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"clock-panel\">\n <div class=\"clock-panel-header\">\n <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n <button\n mat-button\n type=\"button\"\n class=\"clock-close\"\n [disabled]=\"isDisabled\"\n (click)=\"closeClock()\">\n Close\n </button>\n </div>\n\n <div class=\"clock-summary\">\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n {{ hourControl.value || '00' }}\n </button>\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n {{ minuteControl.value || '00' }}\n </button>\n @if (showSeconds) {\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n {{ secondControl.value || '00' }}\n </button>\n }\n </div>\n\n <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n @if (clockStep === 'hour') {\n @for (marker of hourMarkers; track marker.value) {\n <button\n type=\"button\"\n class=\"clock-hour-label\"\n [class.selected]=\"isHourSelected(marker.value)\"\n [class.inner-ring]=\"marker.value >= 12\"\n [style.left]=\"marker.left\"\n [style.top]=\"marker.top\"\n (click)=\"selectClockHour(marker.value, $event)\">\n {{ marker.label }}\n </button>\n }\n }\n\n @if (clockStep === 'minute') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of minuteTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of minuteTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n @if (clockStep === 'second') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of secondTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of secondTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n <div class=\"clock-center-dot\"></div>\n </div>\n\n <div class=\"clock-help\">\n @if (clockStep === 'hour') {\n <span>Outer ring 00-11, inner ring 12-23.</span>\n }\n @if (clockStep === 'minute') {\n <span>Click the dial. The nearest minute will be selected.</span>\n }\n @if (clockStep === 'second') {\n <span>Click the dial. The nearest second will be selected.</span>\n }\n </div>\n\n <div class=\"clock-footer\">\n <span>{{ timeSummary }}</span>\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
3963
3963
|
}
|
|
3964
3964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
|
|
3965
3965
|
type: Component,
|
|
@@ -3969,7 +3969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
3969
3969
|
multi: true,
|
|
3970
3970
|
useExisting: forwardRef(() => DatetimeComponent)
|
|
3971
3971
|
}
|
|
3972
|
-
], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatButton], template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n <mat-form-field class=\"date-field\">\n @if (display) {\n <mat-label>{{ display }}</mat-label>\n }\n <input\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"dateControl\"\n [disabled]=\"isDisabled\"\n (dateChange)=\"markTouched()\"\n (blur)=\"markTouched()\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n @if (isDateTime) {\n <div class=\"middle-actions\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Clear date and time\"\n aria-label=\"Clear date and time\"\n (click)=\"clear()\">\n <i class=\"fal fa-eraser\"></i>\n </button>\n\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Open time clock\"\n aria-label=\"Open time clock\"\n (click)=\"openClock()\">\n <i class=\"fal fa-clock\"></i>\n </button>\n </div>\n\n <div class=\"time-row\">\n <mat-form-field class=\"time-field\">\n <mat-label>HH</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"23\"\n inputmode=\"numeric\"\n [formControl]=\"hourControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('hour')\"\n (blur)=\"onTimePartBlur('hour')\">\n </mat-form-field>\n\n <mat-form-field class=\"time-field\">\n <mat-label>MM</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"minuteControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('minute')\"\n (blur)=\"onTimePartBlur('minute')\">\n </mat-form-field>\n\n @if (showSeconds) {\n <mat-form-field class=\"time-field\">\n <mat-label>SS</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"secondControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('second')\"\n (blur)=\"onTimePartBlur('second')\">\n </mat-form-field>\n }\n </div>\n\n @if (isClockOpen) {\n <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"clock-panel\">\n <div class=\"clock-panel-header\">\n <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n <button\n mat-button\n type=\"button\"\n class=\"clock-close\"\n [disabled]=\"isDisabled\"\n (click)=\"closeClock()\">\n Close\n </button>\n </div>\n\n <div class=\"clock-summary\">\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n {{ hourControl.value || '00' }}\n </button>\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n {{ minuteControl.value || '00' }}\n </button>\n @if (showSeconds) {\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n {{ secondControl.value || '00' }}\n </button>\n }\n </div>\n\n <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n @if (clockStep === 'hour') {\n @for (marker of hourMarkers; track marker.value) {\n <button\n type=\"button\"\n class=\"clock-hour-label\"\n [class.selected]=\"isHourSelected(marker.value)\"\n [class.inner-ring]=\"marker.value >= 12\"\n [style.left]=\"marker.left\"\n [style.top]=\"marker.top\"\n (click)=\"selectClockHour(marker.value, $event)\">\n {{ marker.label }}\n </button>\n }\n }\n\n @if (clockStep === 'minute') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of minuteTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of minuteTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n @if (clockStep === 'second') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of secondTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of secondTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n <div class=\"clock-center-dot\"></div>\n </div>\n\n <div class=\"clock-help\">\n @if (clockStep === 'hour') {\n <span>Outer ring 00-11, inner ring 12-23.</span>\n }\n @if (clockStep === 'minute') {\n <span>Click the dial. The nearest minute will be selected.</span>\n }\n @if (clockStep === 'second') {\n <span>Click the dial. The nearest second will be selected.</span>\n }\n </div>\n\n <div class=\"clock-footer\">\n <span>{{ timeSummary }}</span>\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"] }]
|
|
3972
|
+
], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatButton], template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n <mat-form-field class=\"date-field\">\n @if (display) {\n <mat-label>{{ display }}</mat-label>\n }\n <input\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"dateControl\"\n [disabled]=\"isDisabled\"\n (dateChange)=\"markTouched()\"\n (blur)=\"markTouched()\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n @if (isDateTime) {\n <div class=\"middle-actions\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Clear date and time\"\n aria-label=\"Clear date and time\"\n (click)=\"clear()\">\n <i class=\"fal fa-eraser\"></i>\n </button>\n\n <button\n mat-icon-button\n type=\"button\"\n class=\"icon-action\"\n [disabled]=\"isDisabled\"\n title=\"Open time clock\"\n aria-label=\"Open time clock\"\n (click)=\"openClock()\">\n <i class=\"fal fa-clock\"></i>\n </button>\n </div>\n\n <div class=\"time-row\">\n <mat-form-field class=\"time-field\">\n <mat-label>HH</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"23\"\n inputmode=\"numeric\"\n [formControl]=\"hourControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('hour')\"\n (blur)=\"onTimePartBlur('hour')\">\n </mat-form-field>\n\n <mat-form-field class=\"time-field\">\n <mat-label>MM</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"minuteControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('minute')\"\n (blur)=\"onTimePartBlur('minute')\">\n </mat-form-field>\n\n @if (showSeconds) {\n <mat-form-field class=\"time-field\">\n <mat-label>SS</mat-label>\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"59\"\n inputmode=\"numeric\"\n [formControl]=\"secondControl\"\n [disabled]=\"isDisabled\"\n (input)=\"onTimePartInput('second')\"\n (blur)=\"onTimePartBlur('second')\">\n </mat-form-field>\n }\n </div>\n\n @if (isClockOpen) {\n <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"clock-panel\">\n <div class=\"clock-panel-header\">\n <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n <button\n mat-button\n type=\"button\"\n class=\"clock-close\"\n [disabled]=\"isDisabled\"\n (click)=\"closeClock()\">\n Close\n </button>\n </div>\n\n <div class=\"clock-summary\">\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n {{ hourControl.value || '00' }}\n </button>\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n {{ minuteControl.value || '00' }}\n </button>\n @if (showSeconds) {\n <span>:</span>\n <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n {{ secondControl.value || '00' }}\n </button>\n }\n </div>\n\n <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n @if (clockStep === 'hour') {\n @for (marker of hourMarkers; track marker.value) {\n <button\n type=\"button\"\n class=\"clock-hour-label\"\n [class.selected]=\"isHourSelected(marker.value)\"\n [class.inner-ring]=\"marker.value >= 12\"\n [style.left]=\"marker.left\"\n [style.top]=\"marker.top\"\n (click)=\"selectClockHour(marker.value, $event)\">\n {{ marker.label }}\n </button>\n }\n }\n\n @if (clockStep === 'minute') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of minuteTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of minuteTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isMinuteSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n @if (clockStep === 'second') {\n <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n @for (tick of secondTicks; track tick.value) {\n <line\n class=\"clock-tick-line\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [attr.x1]=\"tick.x1\"\n [attr.y1]=\"tick.y1\"\n [attr.x2]=\"tick.x2\"\n [attr.y2]=\"tick.y2\"\n (click)=\"selectClockTick(tick.value, $event)\"></line>\n }\n </svg>\n @for (tick of secondTicks; track tick.value) {\n <div\n class=\"clock-tick-label\"\n [class.selected]=\"isSecondSelected(tick.value)\"\n [style.left]=\"tick.labelLeft\"\n [style.top]=\"tick.labelTop\"\n (click)=\"selectClockTick(tick.value, $event)\">\n {{ tick.label }}\n </div>\n }\n }\n\n <div class=\"clock-center-dot\"></div>\n </div>\n\n <div class=\"clock-help\">\n @if (clockStep === 'hour') {\n <span>Outer ring 00-11, inner ring 12-23.</span>\n }\n @if (clockStep === 'minute') {\n <span>Click the dial. The nearest minute will be selected.</span>\n }\n @if (clockStep === 'second') {\n <span>Click the dial. The nearest second will be selected.</span>\n }\n </div>\n\n <div class=\"clock-footer\">\n <span>{{ timeSummary }}</span>\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"] }]
|
|
3973
3973
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3974
3974
|
type: Optional
|
|
3975
3975
|
}, {
|