@propbinder/mobile-design 0.4.4 → 0.4.41

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.
Files changed (23) hide show
  1. package/README.md +63 -63
  2. package/assets/fonts/brockmann-medium-webfont.woff2 +0 -0
  3. package/assets/fonts/brockmann-mediumitalic-webfont.woff2 +0 -0
  4. package/assets/fonts/brockmann-regular-webfont.woff2 +0 -0
  5. package/assets/fonts/brockmann-regularitalic-webfont.woff2 +0 -0
  6. package/assets/fonts/brockmann-semibold-webfont.woff2 +0 -0
  7. package/assets/fonts/brockmann-semibolditalic-webfont.woff2 +0 -0
  8. package/fesm2022/{propbinder-mobile-design-ds-mobile-days-sheet-Bf7hxhB6.mjs → propbinder-mobile-design-ds-mobile-days-sheet-BsahIVaB.mjs} +51 -51
  9. package/fesm2022/propbinder-mobile-design-ds-mobile-days-sheet-BsahIVaB.mjs.map +1 -0
  10. package/fesm2022/{propbinder-mobile-design-ds-mobile-duration-sheet-BHTlCfU7.mjs → propbinder-mobile-design-ds-mobile-duration-sheet-Dun-o-dR.mjs} +173 -173
  11. package/fesm2022/propbinder-mobile-design-ds-mobile-duration-sheet-Dun-o-dR.mjs.map +1 -0
  12. package/fesm2022/{propbinder-mobile-design-ds-mobile-time-sheet-CrUB7zl-.mjs → propbinder-mobile-design-ds-mobile-time-sheet-B9Ny4wM7.mjs} +69 -69
  13. package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-B9Ny4wM7.mjs.map +1 -0
  14. package/fesm2022/propbinder-mobile-design.mjs +15355 -14821
  15. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  16. package/index.d.ts +59 -15
  17. package/package.json +1 -1
  18. package/styles/ionic.css +989 -989
  19. package/styles/mobile-common.css +155 -155
  20. package/styles/mobile-page-base.css +338 -338
  21. package/fesm2022/propbinder-mobile-design-ds-mobile-days-sheet-Bf7hxhB6.mjs.map +0 -1
  22. package/fesm2022/propbinder-mobile-design-ds-mobile-duration-sheet-BHTlCfU7.mjs.map +0 -1
  23. package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-CrUB7zl-.mjs.map +0 -1
package/fesm2022/{propbinder-mobile-design-ds-mobile-duration-sheet-BHTlCfU7.mjs → propbinder-mobile-design-ds-mobile-duration-sheet-Dun-o-dR.mjs} RENAMED
@@ -94,92 +94,92 @@ class DsMobileDurationSheetComponent {
94
94
  this.customMinutes.set(+mMatch[1]);
95
95
  }
96
96
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DsMobileDurationSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
97
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: DsMobileDurationSheetComponent, isStandalone: true, selector: "ds-mobile-duration-sheet", inputs: { initialDuration: "initialDuration" }, ngImport: i0, template: `
98
- <ds-mobile-bottom-sheet-wrapper>
99
- <ds-mobile-bottom-sheet-header
100
- title="Varighed"
101
- leftButtonLabel="Annuller"
102
- rightButtonLabel="Gem"
103
- [rightButtonDisabled]="!isValid()"
104
- (leftButtonClick)="dismiss()"
105
- (rightButtonClick)="confirmSelection()">
106
- </ds-mobile-bottom-sheet-header>
107
-
108
- <div class="sheet-content">
109
- <div class="chip-grid">
110
- @for (option of options; track option.value) {
111
- <button
112
- type="button"
113
- class="chip"
114
- [id]="option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
115
- [class.active]="selectedDuration() === option.value"
116
- (click)="selectDuration(option.value)">
117
- @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {
118
- {{ customLabel() }}
119
- } @else {
120
- {{ option.label }}
121
- }
122
- </button>
123
- }
124
- </div>
125
-
126
- @if (showInlineInputs()) {
127
- <div class="custom-inputs">
128
- <input
129
- type="number"
130
- class="number-input"
131
- min="0"
132
- [ngModel]="customHours()"
133
- (ngModelChange)="customHours.set(+$event)"
134
- (blur)="normalize()"
135
- />
136
- <span class="unit">timer</span>
137
- <input
138
- type="number"
139
- class="number-input"
140
- min="0"
141
- max="59"
142
- [ngModel]="customMinutes()"
143
- (ngModelChange)="customMinutes.set(+$event)"
144
- (blur)="normalize()"
145
- />
146
- <span class="unit">min</span>
147
- </div>
148
- }
149
-
150
- @if (!isDesktop()) {
151
- <ds-mobile-dropdown
152
- trigger="vaelg-selv-chip"
153
- [isOpen]="pickerOpen()"
154
- maxWidth="240px"
155
- position="above"
156
- (closed)="onPickerDismiss()">
157
- <ng-template #customContent>
158
- <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
159
- <ion-picker-column
160
- [value]="customHours()"
161
- style="--padding-start: 4px; --padding-end: 4px;"
162
- (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
163
- <div slot="suffix" class="picker-suffix">t</div>
164
- @for (h of hours; track h) {
165
- <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
166
- }
167
- </ion-picker-column>
168
- <ion-picker-column
169
- [value]="customMinutes()"
170
- style="--padding-start: 4px; --padding-end: 4px;"
171
- (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
172
- <div slot="suffix" class="picker-suffix">min</div>
173
- @for (m of minuteOptions; track m) {
174
- <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
175
- }
176
- </ion-picker-column>
177
- </ion-picker>
178
- </ng-template>
179
- </ds-mobile-dropdown>
180
- }
181
- </div>
182
- </ds-mobile-bottom-sheet-wrapper>
97
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: DsMobileDurationSheetComponent, isStandalone: true, selector: "ds-mobile-duration-sheet", inputs: { initialDuration: "initialDuration" }, ngImport: i0, template: `
98
+ <ds-mobile-bottom-sheet-wrapper>
99
+ <ds-mobile-bottom-sheet-header
100
+ title="Varighed"
101
+ leftButtonLabel="Annuller"
102
+ rightButtonLabel="Gem"
103
+ [rightButtonDisabled]="!isValid()"
104
+ (leftButtonClick)="dismiss()"
105
+ (rightButtonClick)="confirmSelection()">
106
+ </ds-mobile-bottom-sheet-header>
107
+
108
+ <div class="sheet-content">
109
+ <div class="chip-grid">
110
+ @for (option of options; track option.value) {
111
+ <button
112
+ type="button"
113
+ class="chip"
114
+ [id]="option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
115
+ [class.active]="selectedDuration() === option.value"
116
+ (click)="selectDuration(option.value)">
117
+ @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {
118
+ {{ customLabel() }}
119
+ } @else {
120
+ {{ option.label }}
121
+ }
122
+ </button>
123
+ }
124
+ </div>
125
+
126
+ @if (showInlineInputs()) {
127
+ <div class="custom-inputs">
128
+ <input
129
+ type="number"
130
+ class="number-input"
131
+ min="0"
132
+ [ngModel]="customHours()"
133
+ (ngModelChange)="customHours.set(+$event)"
134
+ (blur)="normalize()"
135
+ />
136
+ <span class="unit">timer</span>
137
+ <input
138
+ type="number"
139
+ class="number-input"
140
+ min="0"
141
+ max="59"
142
+ [ngModel]="customMinutes()"
143
+ (ngModelChange)="customMinutes.set(+$event)"
144
+ (blur)="normalize()"
145
+ />
146
+ <span class="unit">min</span>
147
+ </div>
148
+ }
149
+
150
+ @if (!isDesktop()) {
151
+ <ds-mobile-dropdown
152
+ trigger="vaelg-selv-chip"
153
+ [isOpen]="pickerOpen()"
154
+ maxWidth="240px"
155
+ position="above"
156
+ (closed)="onPickerDismiss()">
157
+ <ng-template #customContent>
158
+ <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
159
+ <ion-picker-column
160
+ [value]="customHours()"
161
+ style="--padding-start: 4px; --padding-end: 4px;"
162
+ (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
163
+ <div slot="suffix" class="picker-suffix">t</div>
164
+ @for (h of hours; track h) {
165
+ <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
166
+ }
167
+ </ion-picker-column>
168
+ <ion-picker-column
169
+ [value]="customMinutes()"
170
+ style="--padding-start: 4px; --padding-end: 4px;"
171
+ (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
172
+ <div slot="suffix" class="picker-suffix">min</div>
173
+ @for (m of minuteOptions; track m) {
174
+ <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
175
+ }
176
+ </ion-picker-column>
177
+ </ion-picker>
178
+ </ng-template>
179
+ </ds-mobile-dropdown>
180
+ }
181
+ </div>
182
+ </ds-mobile-bottom-sheet-wrapper>
183
183
  `, isInline: true, styles: [".sheet-content{padding:16px}.chip-grid{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:99px;border:none;background:var(--color-background-neutral-secondary, #f6f7f8);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);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease}.chip:hover:not(.active){background:var(--color-background-neutral-secondary-hover, #ebebeb)}.chip:active{opacity:.7}.chip:focus-visible{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}.chip.active{background:var(--color-accent, #6b5ff5);color:#fff}.custom-inputs{display:flex;align-items:center;gap:8px;margin-top:12px;animation:fadeSlideIn .15s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.number-input{width:64px;height:40px;padding:0 10px;border:1px solid var(--border-color-default, #e3e6eb);border-radius:99px;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;color:var(--text-color-default-primary, #202227);text-align:center;outline:none;transition:border-color .2s ease}.number-input:focus{border-color:var(--color-accent, #6b5ff5)}.number-input::-webkit-inner-spin-button,.number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield}.unit{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;color:var(--text-color-default-secondary, #626b78)}.picker-suffix{margin-left:-24px;font-size:13px;color:var(--text-color-default-secondary, #626b78)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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", "showLeftButton", "showRightButton"], outputs: ["leftButtonClick", "rightButtonClick"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel", "maxWidth"], outputs: ["itemSelected", "closed"] }, { kind: "component", type: IonPicker, selector: "ion-picker", inputs: ["mode"] }, { kind: "component", type: IonPickerColumn, selector: "ion-picker-column", inputs: ["color", "disabled", "mode", "value"] }, { kind: "component", type: IonPickerColumnOption, selector: "ion-picker-column-option", inputs: ["color", "disabled", "value"] }] });
184
184
  }
185
185
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DsMobileDurationSheetComponent, decorators: [{
@@ -193,96 +193,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
193
193
  IonPicker,
194
194
  IonPickerColumn,
195
195
  IonPickerColumnOption,
196
- ], template: `
197
- <ds-mobile-bottom-sheet-wrapper>
198
- <ds-mobile-bottom-sheet-header
199
- title="Varighed"
200
- leftButtonLabel="Annuller"
201
- rightButtonLabel="Gem"
202
- [rightButtonDisabled]="!isValid()"
203
- (leftButtonClick)="dismiss()"
204
- (rightButtonClick)="confirmSelection()">
205
- </ds-mobile-bottom-sheet-header>
206
-
207
- <div class="sheet-content">
208
- <div class="chip-grid">
209
- @for (option of options; track option.value) {
210
- <button
211
- type="button"
212
- class="chip"
213
- [id]="option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
214
- [class.active]="selectedDuration() === option.value"
215
- (click)="selectDuration(option.value)">
216
- @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {
217
- {{ customLabel() }}
218
- } @else {
219
- {{ option.label }}
220
- }
221
- </button>
222
- }
223
- </div>
224
-
225
- @if (showInlineInputs()) {
226
- <div class="custom-inputs">
227
- <input
228
- type="number"
229
- class="number-input"
230
- min="0"
231
- [ngModel]="customHours()"
232
- (ngModelChange)="customHours.set(+$event)"
233
- (blur)="normalize()"
234
- />
235
- <span class="unit">timer</span>
236
- <input
237
- type="number"
238
- class="number-input"
239
- min="0"
240
- max="59"
241
- [ngModel]="customMinutes()"
242
- (ngModelChange)="customMinutes.set(+$event)"
243
- (blur)="normalize()"
244
- />
245
- <span class="unit">min</span>
246
- </div>
247
- }
248
-
249
- @if (!isDesktop()) {
250
- <ds-mobile-dropdown
251
- trigger="vaelg-selv-chip"
252
- [isOpen]="pickerOpen()"
253
- maxWidth="240px"
254
- position="above"
255
- (closed)="onPickerDismiss()">
256
- <ng-template #customContent>
257
- <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
258
- <ion-picker-column
259
- [value]="customHours()"
260
- style="--padding-start: 4px; --padding-end: 4px;"
261
- (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
262
- <div slot="suffix" class="picker-suffix">t</div>
263
- @for (h of hours; track h) {
264
- <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
265
- }
266
- </ion-picker-column>
267
- <ion-picker-column
268
- [value]="customMinutes()"
269
- style="--padding-start: 4px; --padding-end: 4px;"
270
- (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
271
- <div slot="suffix" class="picker-suffix">min</div>
272
- @for (m of minuteOptions; track m) {
273
- <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
274
- }
275
- </ion-picker-column>
276
- </ion-picker>
277
- </ng-template>
278
- </ds-mobile-dropdown>
279
- }
280
- </div>
281
- </ds-mobile-bottom-sheet-wrapper>
196
+ ], template: `
197
+ <ds-mobile-bottom-sheet-wrapper>
198
+ <ds-mobile-bottom-sheet-header
199
+ title="Varighed"
200
+ leftButtonLabel="Annuller"
201
+ rightButtonLabel="Gem"
202
+ [rightButtonDisabled]="!isValid()"
203
+ (leftButtonClick)="dismiss()"
204
+ (rightButtonClick)="confirmSelection()">
205
+ </ds-mobile-bottom-sheet-header>
206
+
207
+ <div class="sheet-content">
208
+ <div class="chip-grid">
209
+ @for (option of options; track option.value) {
210
+ <button
211
+ type="button"
212
+ class="chip"
213
+ [id]="option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
214
+ [class.active]="selectedDuration() === option.value"
215
+ (click)="selectDuration(option.value)">
216
+ @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {
217
+ {{ customLabel() }}
218
+ } @else {
219
+ {{ option.label }}
220
+ }
221
+ </button>
222
+ }
223
+ </div>
224
+
225
+ @if (showInlineInputs()) {
226
+ <div class="custom-inputs">
227
+ <input
228
+ type="number"
229
+ class="number-input"
230
+ min="0"
231
+ [ngModel]="customHours()"
232
+ (ngModelChange)="customHours.set(+$event)"
233
+ (blur)="normalize()"
234
+ />
235
+ <span class="unit">timer</span>
236
+ <input
237
+ type="number"
238
+ class="number-input"
239
+ min="0"
240
+ max="59"
241
+ [ngModel]="customMinutes()"
242
+ (ngModelChange)="customMinutes.set(+$event)"
243
+ (blur)="normalize()"
244
+ />
245
+ <span class="unit">min</span>
246
+ </div>
247
+ }
248
+
249
+ @if (!isDesktop()) {
250
+ <ds-mobile-dropdown
251
+ trigger="vaelg-selv-chip"
252
+ [isOpen]="pickerOpen()"
253
+ maxWidth="240px"
254
+ position="above"
255
+ (closed)="onPickerDismiss()">
256
+ <ng-template #customContent>
257
+ <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
258
+ <ion-picker-column
259
+ [value]="customHours()"
260
+ style="--padding-start: 4px; --padding-end: 4px;"
261
+ (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
262
+ <div slot="suffix" class="picker-suffix">t</div>
263
+ @for (h of hours; track h) {
264
+ <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
265
+ }
266
+ </ion-picker-column>
267
+ <ion-picker-column
268
+ [value]="customMinutes()"
269
+ style="--padding-start: 4px; --padding-end: 4px;"
270
+ (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
271
+ <div slot="suffix" class="picker-suffix">min</div>
272
+ @for (m of minuteOptions; track m) {
273
+ <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
274
+ }
275
+ </ion-picker-column>
276
+ </ion-picker>
277
+ </ng-template>
278
+ </ds-mobile-dropdown>
279
+ }
280
+ </div>
281
+ </ds-mobile-bottom-sheet-wrapper>
282
282
  `, styles: [".sheet-content{padding:16px}.chip-grid{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:99px;border:none;background:var(--color-background-neutral-secondary, #f6f7f8);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);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease}.chip:hover:not(.active){background:var(--color-background-neutral-secondary-hover, #ebebeb)}.chip:active{opacity:.7}.chip:focus-visible{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}.chip.active{background:var(--color-accent, #6b5ff5);color:#fff}.custom-inputs{display:flex;align-items:center;gap:8px;margin-top:12px;animation:fadeSlideIn .15s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.number-input{width:64px;height:40px;padding:0 10px;border:1px solid var(--border-color-default, #e3e6eb);border-radius:99px;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;color:var(--text-color-default-primary, #202227);text-align:center;outline:none;transition:border-color .2s ease}.number-input:focus{border-color:var(--color-accent, #6b5ff5)}.number-input::-webkit-inner-spin-button,.number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield}.unit{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:500;color:var(--text-color-default-secondary, #626b78)}.picker-suffix{margin-left:-24px;font-size:13px;color:var(--text-color-default-secondary, #626b78)}\n"] }]
283
283
  }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { initialDuration: [{
284
284
  type: Input
285
285
  }] } });
286
286
 
287
287
  export { DsMobileDurationSheetComponent };
288
- //# sourceMappingURL=propbinder-mobile-design-ds-mobile-duration-sheet-BHTlCfU7.mjs.map
288
+ //# sourceMappingURL=propbinder-mobile-design-ds-mobile-duration-sheet-Dun-o-dR.mjs.map
package/fesm2022/propbinder-mobile-design-ds-mobile-duration-sheet-Dun-o-dR.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"propbinder-mobile-design-ds-mobile-duration-sheet-Dun-o-dR.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-CrUB7zl-.mjs → propbinder-mobile-design-ds-mobile-time-sheet-B9Ny4wM7.mjs} RENAMED
@@ -28,40 +28,40 @@ class DsMobileTimeSheetComponent {
28
28
  this.modalController.dismiss(null, 'cancel');
29
29
  }
30
30
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DsMobileTimeSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
31
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: DsMobileTimeSheetComponent, isStandalone: true, selector: "ds-mobile-time-sheet", inputs: { initialStart: "initialStart", initialEnd: "initialEnd" }, ngImport: i0, template: `
32
- <ds-mobile-bottom-sheet-wrapper>
33
- <ds-mobile-bottom-sheet-header
34
- title="I tidsrummet"
35
- leftButtonLabel="Annuller"
36
- rightButtonLabel="Gem"
37
- (leftButtonClick)="dismiss()"
38
- (rightButtonClick)="confirmSelection()">
39
- </ds-mobile-bottom-sheet-header>
40
-
41
- <div class="sheet-content">
42
- <div class="time-row">
43
- <label class="time-pill">
44
- <input
45
- type="time"
46
- class="time-input"
47
- [ngModel]="startTime()"
48
- (ngModelChange)="startTime.set($event)"
49
- />
50
- </label>
51
-
52
- <span class="separator">til</span>
53
-
54
- <label class="time-pill">
55
- <input
56
- type="time"
57
- class="time-input"
58
- [ngModel]="endTime()"
59
- (ngModelChange)="endTime.set($event)"
60
- />
61
- </label>
62
- </div>
63
- </div>
64
- </ds-mobile-bottom-sheet-wrapper>
31
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: DsMobileTimeSheetComponent, isStandalone: true, selector: "ds-mobile-time-sheet", inputs: { initialStart: "initialStart", initialEnd: "initialEnd" }, ngImport: i0, template: `
32
+ <ds-mobile-bottom-sheet-wrapper>
33
+ <ds-mobile-bottom-sheet-header
34
+ title="I tidsrummet"
35
+ leftButtonLabel="Annuller"
36
+ rightButtonLabel="Gem"
37
+ (leftButtonClick)="dismiss()"
38
+ (rightButtonClick)="confirmSelection()">
39
+ </ds-mobile-bottom-sheet-header>
40
+
41
+ <div class="sheet-content">
42
+ <div class="time-row">
43
+ <label class="time-pill">
44
+ <input
45
+ type="time"
46
+ class="time-input"
47
+ [ngModel]="startTime()"
48
+ (ngModelChange)="startTime.set($event)"
49
+ />
50
+ </label>
51
+
52
+ <span class="separator">til</span>
53
+
54
+ <label class="time-pill">
55
+ <input
56
+ type="time"
57
+ class="time-input"
58
+ [ngModel]="endTime()"
59
+ (ngModelChange)="endTime.set($event)"
60
+ />
61
+ </label>
62
+ </div>
63
+ </div>
64
+ </ds-mobile-bottom-sheet-wrapper>
65
65
  `, 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", "showLeftButton", "showRightButton"], outputs: ["leftButtonClick", "rightButtonClick"] }] });
66
66
  }
67
67
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DsMobileTimeSheetComponent, decorators: [{
@@ -70,40 +70,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
70
70
  FormsModule,
71
71
  DsMobileBottomSheetWrapperComponent,
72
72
  DsMobileBottomSheetHeaderComponent,
73
- ], template: `
74
- <ds-mobile-bottom-sheet-wrapper>
75
- <ds-mobile-bottom-sheet-header
76
- title="I tidsrummet"
77
- leftButtonLabel="Annuller"
78
- rightButtonLabel="Gem"
79
- (leftButtonClick)="dismiss()"
80
- (rightButtonClick)="confirmSelection()">
81
- </ds-mobile-bottom-sheet-header>
82
-
83
- <div class="sheet-content">
84
- <div class="time-row">
85
- <label class="time-pill">
86
- <input
87
- type="time"
88
- class="time-input"
89
- [ngModel]="startTime()"
90
- (ngModelChange)="startTime.set($event)"
91
- />
92
- </label>
93
-
94
- <span class="separator">til</span>
95
-
96
- <label class="time-pill">
97
- <input
98
- type="time"
99
- class="time-input"
100
- [ngModel]="endTime()"
101
- (ngModelChange)="endTime.set($event)"
102
- />
103
- </label>
104
- </div>
105
- </div>
106
- </ds-mobile-bottom-sheet-wrapper>
73
+ ], template: `
74
+ <ds-mobile-bottom-sheet-wrapper>
75
+ <ds-mobile-bottom-sheet-header
76
+ title="I tidsrummet"
77
+ leftButtonLabel="Annuller"
78
+ rightButtonLabel="Gem"
79
+ (leftButtonClick)="dismiss()"
80
+ (rightButtonClick)="confirmSelection()">
81
+ </ds-mobile-bottom-sheet-header>
82
+
83
+ <div class="sheet-content">
84
+ <div class="time-row">
85
+ <label class="time-pill">
86
+ <input
87
+ type="time"
88
+ class="time-input"
89
+ [ngModel]="startTime()"
90
+ (ngModelChange)="startTime.set($event)"
91
+ />
92
+ </label>
93
+
94
+ <span class="separator">til</span>
95
+
96
+ <label class="time-pill">
97
+ <input
98
+ type="time"
99
+ class="time-input"
100
+ [ngModel]="endTime()"
101
+ (ngModelChange)="endTime.set($event)"
102
+ />
103
+ </label>
104
+ </div>
105
+ </div>
106
+ </ds-mobile-bottom-sheet-wrapper>
107
107
  `, 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"] }]
108
108
  }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { initialStart: [{
109
109
  type: Input
@@ -112,4 +112,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
112
112
  }] } });
113
113
 
114
114
  export { DsMobileTimeSheetComponent };
115
- //# sourceMappingURL=propbinder-mobile-design-ds-mobile-time-sheet-CrUB7zl-.mjs.map
115
+ //# sourceMappingURL=propbinder-mobile-design-ds-mobile-time-sheet-B9Ny4wM7.mjs.map
package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-B9Ny4wM7.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"propbinder-mobile-design-ds-mobile-time-sheet-B9Ny4wM7.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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"}