@propbinder/mobile-design 0.2.70 → 0.2.73

package/fesm2022/propbinder-mobile-design-ds-mobile-duration-sheet-l8x6d78y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"propbinder-mobile-design-ds-mobile-duration-sheet-l8x6d78y.mjs","sources":["../../../projects/mobile-design-lib/src/components/facility-creation-modal/sheets/ds-mobile-duration-sheet.ts"],"sourcesContent":["import { Component, signal, computed, Input, CUSTOM_ELEMENTS_SCHEMA, OnInit, PLATFORM_ID, inject } from '@angular/core';\r\nimport { CommonModule, isPlatformBrowser } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { ModalController, IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone';\r\nimport { DsMobileDropdownComponent } from '../../dropdown';\r\nimport { DsMobileBottomSheetWrapperComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-wrapper';\r\nimport { DsMobileBottomSheetHeaderComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-header';\r\n\r\n@Component({\r\n  selector: 'ds-mobile-duration-sheet',\r\n  standalone: true,\r\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    DsMobileBottomSheetWrapperComponent,\r\n    DsMobileBottomSheetHeaderComponent,\r\n    DsMobileDropdownComponent,\r\n    IonPicker,\r\n    IonPickerColumn,\r\n    IonPickerColumnOption,\r\n  ],\r\n  template: `\r\n    <ds-mobile-bottom-sheet-wrapper>\r\n      <ds-mobile-bottom-sheet-header\r\n        title=\"Varighed\"\r\n        leftButtonLabel=\"Annuller\"\r\n        rightButtonLabel=\"Gem\"\r\n        [rightButtonDisabled]=\"!isValid()\"\r\n        (leftButtonClick)=\"dismiss()\"\r\n        (rightButtonClick)=\"confirmSelection()\">\r\n      </ds-mobile-bottom-sheet-header>\r\n\r\n      <div class=\"sheet-content\">\r\n        <div class=\"chip-grid\">\r\n          @for (option of options; track option.value) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"chip\"\r\n              [id]=\"option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null\"\r\n              [class.active]=\"selectedDuration() === option.value\"\r\n              (click)=\"selectDuration(option.value)\">\r\n              @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {\r\n                {{ customLabel() }}\r\n              } @else {\r\n                {{ option.label }}\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showInlineInputs()) {\r\n          <div class=\"custom-inputs\">\r\n            <input\r\n              type=\"number\"\r\n              class=\"number-input\"\r\n              min=\"0\"\r\n              [ngModel]=\"customHours()\"\r\n              (ngModelChange)=\"customHours.set(+$event)\"\r\n              (blur)=\"normalize()\"\r\n            />\r\n            <span class=\"unit\">timer</span>\r\n            <input\r\n              type=\"number\"\r\n              class=\"number-input\"\r\n              min=\"0\"\r\n              max=\"59\"\r\n              [ngModel]=\"customMinutes()\"\r\n              (ngModelChange)=\"customMinutes.set(+$event)\"\r\n              (blur)=\"normalize()\"\r\n            />\r\n            <span class=\"unit\">min</span>\r\n          </div>\r\n        }\r\n\r\n        @if (!isDesktop()) {\r\n          <ds-mobile-dropdown\r\n            trigger=\"vaelg-selv-chip\"\r\n            [isOpen]=\"pickerOpen()\"\r\n            maxWidth=\"240px\"\r\n            position=\"above\"\r\n            (closed)=\"onPickerDismiss()\">\r\n            <ng-template #customContent>\r\n              <ion-picker style=\"--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;\">\r\n                <ion-picker-column\r\n                  [value]=\"customHours()\"\r\n                  style=\"--padding-start: 4px; --padding-end: 4px;\"\r\n                  (ionChange)=\"customHours.set(+($event.detail.value ?? customHours()))\">\r\n                  <div slot=\"suffix\" class=\"picker-suffix\">t</div>\r\n                  @for (h of hours; track h) {\r\n                    <ion-picker-column-option [value]=\"h\">{{ h }}</ion-picker-column-option>\r\n                  }\r\n                </ion-picker-column>\r\n                <ion-picker-column\r\n                  [value]=\"customMinutes()\"\r\n                  style=\"--padding-start: 4px; --padding-end: 4px;\"\r\n                  (ionChange)=\"customMinutes.set(+($event.detail.value ?? customMinutes()))\">\r\n                  <div slot=\"suffix\" class=\"picker-suffix\">min</div>\r\n                  @for (m of minuteOptions; track m) {\r\n                    <ion-picker-column-option [value]=\"m\">{{ m }}</ion-picker-column-option>\r\n                  }\r\n                </ion-picker-column>\r\n              </ion-picker>\r\n            </ng-template>\r\n          </ds-mobile-dropdown>\r\n        }\r\n      </div>\r\n    </ds-mobile-bottom-sheet-wrapper>\r\n  `,\r\n  styles: [`\r\n    .sheet-content {\r\n      padding: 16px;\r\n    }\r\n\r\n    .chip-grid {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 8px;\r\n    }\r\n\r\n    .chip {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      height: 40px;\r\n      padding: 0 16px;\r\n      border-radius: 99px;\r\n      border: none;\r\n      background: var(--color-background-neutral-secondary, #f6f7f8);\r\n      font-family: 'Brockmann', sans-serif;\r\n      font-size: var(--font-size-sm, 14px);\r\n      font-weight: 500;\r\n      line-height: 18px;\r\n      letter-spacing: -0.56px;\r\n      color: var(--text-color-default-primary, #202227);\r\n      cursor: pointer;\r\n      -webkit-tap-highlight-color: transparent;\r\n      transition: background 0.15s ease, color 0.15s ease;\r\n    }\r\n\r\n    .chip:hover:not(.active) {\r\n      background: var(--color-background-neutral-secondary-hover, #ebebeb);\r\n    }\r\n\r\n    .chip:active {\r\n      opacity: 0.7;\r\n    }\r\n\r\n    .chip:focus-visible {\r\n      outline: 2px solid var(--color-brand-primary, #5d5fef);\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    .chip.active {\r\n      background: var(--color-accent, #6b5ff5);\r\n      color: white;\r\n    }\r\n\r\n    .custom-inputs {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin-top: 12px;\r\n      animation: fadeSlideIn 0.15s ease;\r\n    }\r\n\r\n    @keyframes fadeSlideIn {\r\n      from { opacity: 0; transform: translateY(-4px); }\r\n      to   { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .number-input {\r\n      width: 64px;\r\n      height: 40px;\r\n      padding: 0 10px;\r\n      border: 1px solid var(--border-color-default, #e3e6eb);\r\n      border-radius: 99px;\r\n      background: transparent;\r\n      font-family: 'Brockmann', sans-serif;\r\n      font-size: var(--font-size-sm, 14px);\r\n      font-weight: 500;\r\n      color: var(--text-color-default-primary, #202227);\r\n      text-align: center;\r\n      outline: none;\r\n      transition: border-color 0.2s ease;\r\n    }\r\n\r\n    .number-input:focus {\r\n      border-color: var(--color-accent, #6b5ff5);\r\n    }\r\n\r\n    .number-input::-webkit-inner-spin-button,\r\n    .number-input::-webkit-outer-spin-button {\r\n      -webkit-appearance: none;\r\n      margin: 0;\r\n    }\r\n    .number-input[type=number] {\r\n      -moz-appearance: textfield;\r\n    }\r\n\r\n    .unit {\r\n      font-family: 'Brockmann', sans-serif;\r\n      font-size: var(--font-size-sm, 14px);\r\n      font-weight: 500;\r\n      color: var(--text-color-default-secondary, #626b78);\r\n    }\r\n\r\n    .picker-suffix {\r\n      margin-left: -24px;\r\n      font-size: 13px;\r\n      color: var(--text-color-default-secondary, #626b78);\r\n    }\r\n  `],\r\n})\r\nexport class DsMobileDurationSheetComponent implements OnInit {\r\n  private platformId = inject(PLATFORM_ID);\r\n\r\n  @Input() initialDuration?: string;\r\n\r\n  isDesktop = signal(false);\r\n  selectedDuration = signal('1 time');\r\n  pickerOpen = signal(false);\r\n  customHours = signal(1);\r\n  customMinutes = signal(0);\r\n\r\n  options = [\r\n    { value: '30 min', label: '30 min' },\r\n    { value: '1 time', label: '1 time' },\r\n    { value: '2 timer', label: '2 timer' },\r\n    { value: 'Hele dagen', label: 'Hele dagen' },\r\n    { value: 'Vælg selv', label: 'Vælg selv' },\r\n  ];\r\n\r\n  hours = Array.from({ length: 24 }, (_, i) => i);\r\n  minuteOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];\r\n\r\n  customLabel = computed(() => {\r\n    const h = this.customHours();\r\n    const m = this.customMinutes();\r\n    const parts: string[] = [];\r\n    if (h > 0) parts.push(`${h}t`);\r\n    if (m > 0) parts.push(`${m}min`);\r\n    return parts.join(' ');\r\n  });\r\n\r\n  showInlineInputs = computed(() =>\r\n    this.selectedDuration() === 'Vælg selv' && this.isDesktop()\r\n  );\r\n\r\n  isValid = computed(() => {\r\n    if (this.selectedDuration() === 'Vælg selv') {\r\n      return this.customHours() > 0 || this.customMinutes() > 0;\r\n    }\r\n    return true;\r\n  });\r\n\r\n  constructor(private modalController: ModalController) {}\r\n\r\n  ngOnInit(): void {\r\n    if (isPlatformBrowser(this.platformId)) {\r\n      this.isDesktop.set(window.innerWidth >= 768);\r\n    }\r\n\r\n    if (this.initialDuration) {\r\n      const preset = this.options.find((o) => o.value === this.initialDuration);\r\n      if (preset) {\r\n        this.selectedDuration.set(preset.value);\r\n      } else {\r\n        this.selectedDuration.set('Vælg selv');\r\n        this.parseCustomDuration(this.initialDuration);\r\n      }\r\n    }\r\n  }\r\n\r\n  selectDuration(value: string): void {\r\n    this.selectedDuration.set(value);\r\n    if (value === 'Vælg selv' && !this.isDesktop()) {\r\n      this.pickerOpen.set(true);\r\n    }\r\n  }\r\n\r\n  normalize(): void {\r\n    const totalMinutes = this.customHours() * 60 + this.customMinutes();\r\n    const clamped = Math.max(0, Math.min(totalMinutes, 23 * 60 + 55));\r\n    this.customHours.set(Math.floor(clamped / 60));\r\n    this.customMinutes.set(clamped % 60);\r\n  }\r\n\r\n  onPickerDismiss(): void {\r\n    this.normalize();\r\n    this.pickerOpen.set(false);\r\n  }\r\n\r\n  confirmSelection(): void {\r\n    const value = this.selectedDuration() === 'Vælg selv'\r\n      ? this.customLabel()\r\n      : this.selectedDuration();\r\n    this.modalController.dismiss({ value }, 'select');\r\n  }\r\n\r\n  dismiss(): void {\r\n    this.modalController.dismiss(null, 'cancel');\r\n  }\r\n\r\n  private parseCustomDuration(str: string): void {\r\n    const hMatch = str.match(/(\\d+)\\s*t/);\r\n    const mMatch = str.match(/(\\d+)\\s*min/);\r\n    if (hMatch) this.customHours.set(+hMatch[1]);\r\n    if (mMatch) this.customMinutes.set(+mMatch[1]);\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-B9cV9oGj.mjs

@@ -0,0 +1,115 @@
+import * as i0 from '@angular/core';
+import { signal, Input, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DsMobileBottomSheetWrapperComponent, DsMobileBottomSheetHeaderComponent } from './propbinder-mobile-design.mjs';
+import * as i1 from '@ionic/angular/standalone';
+
+class DsMobileTimeSheetComponent {
+    modalController;
+    initialStart;
+    initialEnd;
+    startTime = signal('09:00', ...(ngDevMode ? [{ debugName: "startTime" }] : []));
+    endTime = signal('17:30', ...(ngDevMode ? [{ debugName: "endTime" }] : []));
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    ngOnInit() {
+        if (this.initialStart)
+            this.startTime.set(this.initialStart);
+        if (this.initialEnd)
+            this.endTime.set(this.initialEnd);
+    }
+    confirmSelection() {
+        const value = `${this.startTime()}-${this.endTime()}`;
+        this.modalController.dismiss({ value }, 'select');
+    }
+    dismiss() {
+        this.modalController.dismiss(null, 'cancel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTimeSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileTimeSheetComponent, isStandalone: true, selector: "ds-mobile-time-sheet", inputs: { initialStart: "initialStart", initialEnd: "initialEnd" }, ngImport: i0, template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <ds-mobile-bottom-sheet-header
+        title="I tidsrummet"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="sheet-content">
+        <div class="time-row">
+          <label class="time-pill">
+            <input
+              type="time"
+              class="time-input"
+              [ngModel]="startTime()"
+              (ngModelChange)="startTime.set($event)"
+            />
+          </label>
+
+          <span class="separator">til</span>
+
+          <label class="time-pill">
+            <input
+              type="time"
+              class="time-input"
+              [ngModel]="endTime()"
+              (ngModelChange)="endTime.set($event)"
+            />
+          </label>
+        </div>
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `, isInline: true, styles: [".sheet-content{padding:16px}.time-row{display:flex;align-items:center;gap:8px}.time-pill{display:flex;align-items:center;justify-content:center;flex:1;height:40px;padding:0 16px;border:1px solid var(--border-color-default, #e3e6eb);border-radius:99px;background:transparent;cursor:pointer}.time-input{border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;line-height:18px;letter-spacing:-.56px;color:var(--text-color-default-primary, #202227);outline:none;padding:0;width:100%;text-align:center;-webkit-appearance:none;appearance:none}.time-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.separator{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;line-height:18px;letter-spacing:-.56px;color:var(--text-color-default-secondary, #626b78);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper", inputs: ["showDragHandle"] }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled", "rightButtonLoading"], outputs: ["leftButtonClick", "rightButtonClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTimeSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-time-sheet', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        FormsModule,
+                        DsMobileBottomSheetWrapperComponent,
+                        DsMobileBottomSheetHeaderComponent,
+                    ], template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <ds-mobile-bottom-sheet-header
+        title="I tidsrummet"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="sheet-content">
+        <div class="time-row">
+          <label class="time-pill">
+            <input
+              type="time"
+              class="time-input"
+              [ngModel]="startTime()"
+              (ngModelChange)="startTime.set($event)"
+            />
+          </label>
+
+          <span class="separator">til</span>
+
+          <label class="time-pill">
+            <input
+              type="time"
+              class="time-input"
+              [ngModel]="endTime()"
+              (ngModelChange)="endTime.set($event)"
+            />
+          </label>
+        </div>
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `, styles: [".sheet-content{padding:16px}.time-row{display:flex;align-items:center;gap:8px}.time-pill{display:flex;align-items:center;justify-content:center;flex:1;height:40px;padding:0 16px;border:1px solid var(--border-color-default, #e3e6eb);border-radius:99px;background:transparent;cursor:pointer}.time-input{border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;line-height:18px;letter-spacing:-.56px;color:var(--text-color-default-primary, #202227);outline:none;padding:0;width:100%;text-align:center;-webkit-appearance:none;appearance:none}.time-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.separator{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;line-height:18px;letter-spacing:-.56px;color:var(--text-color-default-secondary, #626b78);flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { initialStart: [{
+                type: Input
+            }], initialEnd: [{
+                type: Input
+            }] } });
+
+export { DsMobileTimeSheetComponent };
+//# sourceMappingURL=propbinder-mobile-design-ds-mobile-time-sheet-B9cV9oGj.mjs.map

package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-B9cV9oGj.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"propbinder-mobile-design-ds-mobile-time-sheet-B9cV9oGj.mjs","sources":["../../../projects/mobile-design-lib/src/components/facility-creation-modal/sheets/ds-mobile-time-sheet.ts"],"sourcesContent":["import { Component, signal, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { ModalController } from '@ionic/angular/standalone';\r\nimport { DsMobileBottomSheetWrapperComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-wrapper';\r\nimport { DsMobileBottomSheetHeaderComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-header';\r\n\r\n@Component({\r\n  selector: 'ds-mobile-time-sheet',\r\n  standalone: true,\r\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\r\n  imports: [\r\n    FormsModule,\r\n    DsMobileBottomSheetWrapperComponent,\r\n    DsMobileBottomSheetHeaderComponent,\r\n  ],\r\n  template: `\r\n    <ds-mobile-bottom-sheet-wrapper>\r\n      <ds-mobile-bottom-sheet-header\r\n        title=\"I tidsrummet\"\r\n        leftButtonLabel=\"Annuller\"\r\n        rightButtonLabel=\"Gem\"\r\n        (leftButtonClick)=\"dismiss()\"\r\n        (rightButtonClick)=\"confirmSelection()\">\r\n      </ds-mobile-bottom-sheet-header>\r\n\r\n      <div class=\"sheet-content\">\r\n        <div class=\"time-row\">\r\n          <label class=\"time-pill\">\r\n            <input\r\n              type=\"time\"\r\n              class=\"time-input\"\r\n              [ngModel]=\"startTime()\"\r\n              (ngModelChange)=\"startTime.set($event)\"\r\n            />\r\n          </label>\r\n\r\n          <span class=\"separator\">til</span>\r\n\r\n          <label class=\"time-pill\">\r\n            <input\r\n              type=\"time\"\r\n              class=\"time-input\"\r\n              [ngModel]=\"endTime()\"\r\n              (ngModelChange)=\"endTime.set($event)\"\r\n            />\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </ds-mobile-bottom-sheet-wrapper>\r\n  `,\r\n  styles: [`\r\n    .sheet-content {\r\n      padding: 16px;\r\n    }\r\n\r\n    .time-row {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n\r\n    .time-pill {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex: 1;\r\n      height: 40px;\r\n      padding: 0 16px;\r\n      border: 1px solid var(--border-color-default, #e3e6eb);\r\n      border-radius: 99px;\r\n      background: transparent;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .time-input {\r\n      border: none;\r\n      background: transparent;\r\n      font-family: 'Brockmann', sans-serif;\r\n      font-size: var(--font-size-sm, 14px);\r\n      font-weight: 500;\r\n      line-height: 18px;\r\n      letter-spacing: -0.56px;\r\n      color: var(--text-color-default-primary, #202227);\r\n      outline: none;\r\n      padding: 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      -webkit-appearance: none;\r\n      appearance: none;\r\n    }\r\n\r\n    /* Hide the native clock icon in WebKit browsers */\r\n    .time-input::-webkit-calendar-picker-indicator {\r\n      display: none;\r\n      -webkit-appearance: none;\r\n    }\r\n\r\n    .separator {\r\n      font-family: 'Brockmann', sans-serif;\r\n      font-size: var(--font-size-sm, 14px);\r\n      font-weight: 500;\r\n      line-height: 18px;\r\n      letter-spacing: -0.56px;\r\n      color: var(--text-color-default-secondary, #626b78);\r\n      flex-shrink: 0;\r\n    }\r\n  `],\r\n})\r\nexport class DsMobileTimeSheetComponent {\r\n  @Input() initialStart?: string;\r\n  @Input() initialEnd?: string;\r\n\r\n  startTime = signal('09:00');\r\n  endTime = signal('17:30');\r\n\r\n  constructor(private modalController: ModalController) {}\r\n\r\n  ngOnInit(): void {\r\n    if (this.initialStart) this.startTime.set(this.initialStart);\r\n    if (this.initialEnd) this.endTime.set(this.initialEnd);\r\n  }\r\n\r\n  confirmSelection(): void {\r\n    const value = `${this.startTime()}-${this.endTime()}`;\r\n    this.modalController.dismiss({ value }, 'select');\r\n  }\r\n\r\n  dismiss(): void {\r\n    this.modalController.dismiss(null, 'cancel');\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}