@propbinder/mobile-design 0.2.72 → 0.2.74

package/README.md

@@ -1,63 +1,63 @@
-# MobileDesignLib
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build mobile-design-lib
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/mobile-design-lib
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# MobileDesignLib
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build mobile-design-lib
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/mobile-design-lib
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/propbinder-mobile-design-ds-mobile-days-sheet-YO-dvZLx.mjs

@@ -0,0 +1,148 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Input, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { DsMobileBottomSheetWrapperComponent, DsMobileBottomSheetHeaderComponent } from './propbinder-mobile-design.mjs';
+import * as i1 from '@ionic/angular/standalone';
+
+const ALL_DAYS = [
+    { full: 'Mandag', short: 'Man', key: 'man' },
+    { full: 'Tirsdag', short: 'Tir', key: 'tir' },
+    { full: 'Onsdag', short: 'Ons', key: 'ons' },
+    { full: 'Torsdag', short: 'Tor', key: 'tor' },
+    { full: 'Fredag', short: 'Fre', key: 'fre' },
+    { full: 'Lørdag', short: 'Lør', key: 'lør' },
+    { full: 'Søndag', short: 'Søn', key: 'søn' },
+];
+const WEEKDAY_KEYS = new Set(['man', 'tir', 'ons', 'tor', 'fre']);
+const WEEKEND_KEYS = new Set(['lør', 'søn']);
+class DsMobileDaysSheetComponent {
+    modalController;
+    initialDays;
+    days = ALL_DAYS;
+    selectedDays = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedDays" }] : []));
+    isValid = computed(() => this.selectedDays().size > 0, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    ngOnInit() {
+        if (this.initialDays?.length) {
+            const fullNames = this.initialDays.map((short) => ALL_DAYS.find((d) => d.short === short || d.full === short)?.full).filter(Boolean);
+            this.selectedDays.set(new Set(fullNames));
+        }
+        else {
+            this.selectedDays.set(new Set(['Fredag', 'Lørdag', 'Søndag']));
+        }
+    }
+    toggleDay(day) {
+        const current = new Set(this.selectedDays());
+        current.has(day) ? current.delete(day) : current.add(day);
+        this.selectedDays.set(current);
+    }
+    confirmSelection() {
+        const selected = this.selectedDays();
+        const days = ALL_DAYS.filter((d) => selected.has(d.full)).map((d) => d.short);
+        const label = formatDaysLabel(days.map((s) => s.toLowerCase()));
+        this.modalController.dismiss({ label, days }, 'select');
+    }
+    dismiss() {
+        this.modalController.dismiss(null, 'cancel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileDaysSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileDaysSheetComponent, isStandalone: true, selector: "ds-mobile-days-sheet", inputs: { initialDays: "initialDays" }, ngImport: i0, template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <ds-mobile-bottom-sheet-header
+        title="Dagene"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        [rightButtonDisabled]="!isValid()"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="sheet-content">
+        <div class="day-grid">
+          @for (day of days; track day.full) {
+            <button
+              type="button"
+              class="day-chip"
+              [class.active]="selectedDays().has(day.full)"
+              (click)="toggleDay(day.full)">
+              {{ day.full }}
+            </button>
+          }
+        </div>
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `, isInline: true, styles: [".sheet-content{padding:16px}.day-grid{display:flex;flex-wrap:wrap;gap:8px}.day-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}.day-chip:hover:not(.active){background:var(--color-background-neutral-secondary-hover, #ebebeb)}.day-chip:active{opacity:.7}.day-chip:focus-visible{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}.day-chip.active{background:var(--color-accent, #6b5ff5);color:#fff}\n"], dependencies: [{ 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: DsMobileDaysSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-days-sheet', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        DsMobileBottomSheetWrapperComponent,
+                        DsMobileBottomSheetHeaderComponent,
+                    ], template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <ds-mobile-bottom-sheet-header
+        title="Dagene"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        [rightButtonDisabled]="!isValid()"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="sheet-content">
+        <div class="day-grid">
+          @for (day of days; track day.full) {
+            <button
+              type="button"
+              class="day-chip"
+              [class.active]="selectedDays().has(day.full)"
+              (click)="toggleDay(day.full)">
+              {{ day.full }}
+            </button>
+          }
+        </div>
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `, styles: [".sheet-content{padding:16px}.day-grid{display:flex;flex-wrap:wrap;gap:8px}.day-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}.day-chip:hover:not(.active){background:var(--color-background-neutral-secondary-hover, #ebebeb)}.day-chip:active{opacity:.7}.day-chip:focus-visible{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}.day-chip.active{background:var(--color-accent, #6b5ff5);color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { initialDays: [{
+                type: Input
+            }] } });
+const CANONICAL_ORDER = ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'];
+const FULL_NAME = {
+    man: 'Mandag', tir: 'Tirsdag', ons: 'Onsdag', tor: 'Torsdag',
+    fre: 'Fredag', lør: 'Lørdag', søn: 'Søndag',
+};
+function capitalize(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+/**
+ * Given an array of lowercase weekday keys (e.g. ["fre","lør","søn"]),
+ * returns a concise Danish label for display.
+ */
+function formatDaysLabel(keys) {
+    const set = new Set(keys);
+    if (set.size === 7)
+        return 'Alle dage';
+    if (set.size === 5 && [...WEEKDAY_KEYS].every((k) => set.has(k)))
+        return 'Hverdage';
+    if (set.size === 2 && [...WEEKEND_KEYS].every((k) => set.has(k)))
+        return 'Weekend';
+    if (set.size === 1)
+        return FULL_NAME[keys[0]] ?? capitalize(keys[0]);
+    const indices = CANONICAL_ORDER
+        .map((d, i) => (set.has(d) ? i : -1))
+        .filter((i) => i !== -1);
+    if (indices.length >= 2) {
+        const isConsecutive = indices.every((val, i) => i === 0 || val === indices[i - 1] + 1);
+        if (isConsecutive) {
+            const start = capitalize(CANONICAL_ORDER[indices[0]]);
+            const end = CANONICAL_ORDER[indices[indices.length - 1]];
+            return `${start}\u2013${end}`;
+        }
+    }
+    return 'Udvalgte dage';
+}
+
+export { DsMobileDaysSheetComponent, formatDaysLabel };
+//# sourceMappingURL=propbinder-mobile-design-ds-mobile-days-sheet-YO-dvZLx.mjs.map

package/fesm2022/propbinder-mobile-design-ds-mobile-days-sheet-YO-dvZLx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"propbinder-mobile-design-ds-mobile-days-sheet-YO-dvZLx.mjs","sources":["../../../projects/mobile-design-lib/src/components/facility-creation-modal/sheets/ds-mobile-days-sheet.ts"],"sourcesContent":["import { Component, signal, computed, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\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\nconst ALL_DAYS = [\r\n  { full: 'Mandag', short: 'Man', key: 'man' },\r\n  { full: 'Tirsdag', short: 'Tir', key: 'tir' },\r\n  { full: 'Onsdag', short: 'Ons', key: 'ons' },\r\n  { full: 'Torsdag', short: 'Tor', key: 'tor' },\r\n  { full: 'Fredag', short: 'Fre', key: 'fre' },\r\n  { full: 'Lørdag', short: 'Lør', key: 'lør' },\r\n  { full: 'Søndag', short: 'Søn', key: 'søn' },\r\n];\r\n\r\nconst WEEKDAY_KEYS = new Set(['man', 'tir', 'ons', 'tor', 'fre']);\r\nconst WEEKEND_KEYS = new Set(['lør', 'søn']);\r\n\r\n@Component({\r\n  selector: 'ds-mobile-days-sheet',\r\n  standalone: true,\r\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\r\n  imports: [\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=\"Dagene\"\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=\"day-grid\">\r\n          @for (day of days; track day.full) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"day-chip\"\r\n              [class.active]=\"selectedDays().has(day.full)\"\r\n              (click)=\"toggleDay(day.full)\">\r\n              {{ day.full }}\r\n            </button>\r\n          }\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    .day-grid {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 8px;\r\n    }\r\n\r\n    .day-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    .day-chip:hover:not(.active) {\r\n      background: var(--color-background-neutral-secondary-hover, #ebebeb);\r\n    }\r\n\r\n    .day-chip:active {\r\n      opacity: 0.7;\r\n    }\r\n\r\n    .day-chip:focus-visible {\r\n      outline: 2px solid var(--color-brand-primary, #5d5fef);\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    .day-chip.active {\r\n      background: var(--color-accent, #6b5ff5);\r\n      color: white;\r\n    }\r\n  `],\r\n})\r\nexport class DsMobileDaysSheetComponent {\r\n  @Input() initialDays?: string[];\r\n\r\n  days = ALL_DAYS;\r\n  selectedDays = signal<Set<string>>(new Set());\r\n\r\n  isValid = computed(() => this.selectedDays().size > 0);\r\n\r\n  constructor(private modalController: ModalController) {}\r\n\r\n  ngOnInit(): void {\r\n    if (this.initialDays?.length) {\r\n      const fullNames = this.initialDays.map(\r\n        (short) => ALL_DAYS.find((d) => d.short === short || d.full === short)?.full\r\n      ).filter(Boolean) as string[];\r\n      this.selectedDays.set(new Set(fullNames));\r\n    } else {\r\n      this.selectedDays.set(new Set(['Fredag', 'Lørdag', 'Søndag']));\r\n    }\r\n  }\r\n\r\n  toggleDay(day: string): void {\r\n    const current = new Set(this.selectedDays());\r\n    current.has(day) ? current.delete(day) : current.add(day);\r\n    this.selectedDays.set(current);\r\n  }\r\n\r\n  confirmSelection(): void {\r\n    const selected = this.selectedDays();\r\n    const days = ALL_DAYS.filter((d) => selected.has(d.full)).map((d) => d.short);\r\n    const label = formatDaysLabel(days.map((s) => s.toLowerCase()));\r\n    this.modalController.dismiss({ label, days }, 'select');\r\n  }\r\n\r\n  dismiss(): void {\r\n    this.modalController.dismiss(null, 'cancel');\r\n  }\r\n}\r\n\r\nconst CANONICAL_ORDER = ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'];\r\n\r\nconst FULL_NAME: Record<string, string> = {\r\n  man: 'Mandag', tir: 'Tirsdag', ons: 'Onsdag', tor: 'Torsdag',\r\n  fre: 'Fredag', lør: 'Lørdag', søn: 'Søndag',\r\n};\r\n\r\nfunction capitalize(s: string): string {\r\n  return s.charAt(0).toUpperCase() + s.slice(1);\r\n}\r\n\r\n/**\r\n * Given an array of lowercase weekday keys (e.g. [\"fre\",\"lør\",\"søn\"]),\r\n * returns a concise Danish label for display.\r\n */\r\nexport function formatDaysLabel(keys: string[]): string {\r\n  const set = new Set(keys);\r\n\r\n  if (set.size === 7) return 'Alle dage';\r\n\r\n  if (set.size === 5 && [...WEEKDAY_KEYS].every((k) => set.has(k))) return 'Hverdage';\r\n\r\n  if (set.size === 2 && [...WEEKEND_KEYS].every((k) => set.has(k))) return 'Weekend';\r\n\r\n  if (set.size === 1) return FULL_NAME[keys[0]] ?? capitalize(keys[0]);\r\n\r\n  const indices = CANONICAL_ORDER\r\n    .map((d, i) => (set.has(d) ? i : -1))\r\n    .filter((i) => i !== -1);\r\n\r\n  if (indices.length >= 2) {\r\n    const isConsecutive = indices.every(\r\n      (val, i) => i === 0 || val === indices[i - 1] + 1\r\n    );\r\n    if (isConsecutive) {\r\n      const start = capitalize(CANONICAL_ORDER[indices[0]]);\r\n      const end = CANONICAL_ORDER[indices[indices.length - 1]];\r\n      return `${start}\\u2013${end}`;\r\n    }\r\n  }\r\n\r\n  return 'Udvalgte dage';\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,288 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, Input, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@ionic/angular/standalone';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone';
+import { DsMobileBottomSheetWrapperComponent, DsMobileBottomSheetHeaderComponent, DsMobileDropdownComponent } from './propbinder-mobile-design.mjs';
+
+class DsMobileDurationSheetComponent {
+    modalController;
+    platformId = inject(PLATFORM_ID);
+    initialDuration;
+    isDesktop = signal(false, ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
+    selectedDuration = signal('1 time', ...(ngDevMode ? [{ debugName: "selectedDuration" }] : []));
+    pickerOpen = signal(false, ...(ngDevMode ? [{ debugName: "pickerOpen" }] : []));
+    customHours = signal(1, ...(ngDevMode ? [{ debugName: "customHours" }] : []));
+    customMinutes = signal(0, ...(ngDevMode ? [{ debugName: "customMinutes" }] : []));
+    options = [
+        { value: '30 min', label: '30 min' },
+        { value: '1 time', label: '1 time' },
+        { value: '2 timer', label: '2 timer' },
+        { value: 'Hele dagen', label: 'Hele dagen' },
+        { value: 'Vælg selv', label: 'Vælg selv' },
+    ];
+    hours = Array.from({ length: 24 }, (_, i) => i);
+    minuteOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+    customLabel = computed(() => {
+        const h = this.customHours();
+        const m = this.customMinutes();
+        const parts = [];
+        if (h > 0)
+            parts.push(`${h}t`);
+        if (m > 0)
+            parts.push(`${m}min`);
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "customLabel" }] : []));
+    showInlineInputs = computed(() => this.selectedDuration() === 'Vælg selv' && this.isDesktop(), ...(ngDevMode ? [{ debugName: "showInlineInputs" }] : []));
+    isValid = computed(() => {
+        if (this.selectedDuration() === 'Vælg selv') {
+            return this.customHours() > 0 || this.customMinutes() > 0;
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.isDesktop.set(window.innerWidth >= 768);
+        }
+        if (this.initialDuration) {
+            const preset = this.options.find((o) => o.value === this.initialDuration);
+            if (preset) {
+                this.selectedDuration.set(preset.value);
+            }
+            else {
+                this.selectedDuration.set('Vælg selv');
+                this.parseCustomDuration(this.initialDuration);
+            }
+        }
+    }
+    selectDuration(value) {
+        this.selectedDuration.set(value);
+        if (value === 'Vælg selv' && !this.isDesktop()) {
+            this.pickerOpen.set(true);
+        }
+    }
+    normalize() {
+        const totalMinutes = this.customHours() * 60 + this.customMinutes();
+        const clamped = Math.max(0, Math.min(totalMinutes, 23 * 60 + 55));
+        this.customHours.set(Math.floor(clamped / 60));
+        this.customMinutes.set(clamped % 60);
+    }
+    onPickerDismiss() {
+        this.normalize();
+        this.pickerOpen.set(false);
+    }
+    confirmSelection() {
+        const value = this.selectedDuration() === 'Vælg selv'
+            ? this.customLabel()
+            : this.selectedDuration();
+        this.modalController.dismiss({ value }, 'select');
+    }
+    dismiss() {
+        this.modalController.dismiss(null, 'cancel');
+    }
+    parseCustomDuration(str) {
+        const hMatch = str.match(/(\d+)\s*t/);
+        const mMatch = str.match(/(\d+)\s*min/);
+        if (hMatch)
+            this.customHours.set(+hMatch[1]);
+        if (mMatch)
+            this.customMinutes.set(+mMatch[1]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileDurationSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileDurationSheetComponent, isStandalone: true, selector: "ds-mobile-duration-sheet", inputs: { initialDuration: "initialDuration" }, ngImport: i0, template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <ds-mobile-bottom-sheet-header
+        title="Varighed"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        [rightButtonDisabled]="!isValid()"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="sheet-content">
+        <div class="chip-grid">
+          @for (option of options; track option.value) {
+            <button
+              type="button"
+              class="chip"
+              [id]="option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
+              [class.active]="selectedDuration() === option.value"
+              (click)="selectDuration(option.value)">
+              @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {
+                {{ customLabel() }}
+              } @else {
+                {{ option.label }}
+              }
+            </button>
+          }
+        </div>
+
+        @if (showInlineInputs()) {
+          <div class="custom-inputs">
+            <input
+              type="number"
+              class="number-input"
+              min="0"
+              [ngModel]="customHours()"
+              (ngModelChange)="customHours.set(+$event)"
+              (blur)="normalize()"
+            />
+            <span class="unit">timer</span>
+            <input
+              type="number"
+              class="number-input"
+              min="0"
+              max="59"
+              [ngModel]="customMinutes()"
+              (ngModelChange)="customMinutes.set(+$event)"
+              (blur)="normalize()"
+            />
+            <span class="unit">min</span>
+          </div>
+        }
+
+        @if (!isDesktop()) {
+          <ds-mobile-dropdown
+            trigger="vaelg-selv-chip"
+            [isOpen]="pickerOpen()"
+            maxWidth="240px"
+            position="above"
+            (closed)="onPickerDismiss()">
+            <ng-template #customContent>
+              <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
+                <ion-picker-column
+                  [value]="customHours()"
+                  style="--padding-start: 4px; --padding-end: 4px;"
+                  (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
+                  <div slot="suffix" class="picker-suffix">t</div>
+                  @for (h of hours; track h) {
+                    <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
+                  }
+                </ion-picker-column>
+                <ion-picker-column
+                  [value]="customMinutes()"
+                  style="--padding-start: 4px; --padding-end: 4px;"
+                  (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
+                  <div slot="suffix" class="picker-suffix">min</div>
+                  @for (m of minuteOptions; track m) {
+                    <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
+                  }
+                </ion-picker-column>
+              </ion-picker>
+            </ng-template>
+          </ds-mobile-dropdown>
+        }
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `, 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"], 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileDurationSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-duration-sheet', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        CommonModule,
+                        FormsModule,
+                        DsMobileBottomSheetWrapperComponent,
+                        DsMobileBottomSheetHeaderComponent,
+                        DsMobileDropdownComponent,
+                        IonPicker,
+                        IonPickerColumn,
+                        IonPickerColumnOption,
+                    ], template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <ds-mobile-bottom-sheet-header
+        title="Varighed"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        [rightButtonDisabled]="!isValid()"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="sheet-content">
+        <div class="chip-grid">
+          @for (option of options; track option.value) {
+            <button
+              type="button"
+              class="chip"
+              [id]="option.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
+              [class.active]="selectedDuration() === option.value"
+              (click)="selectDuration(option.value)">
+              @if (option.value === 'Vælg selv' && selectedDuration() === 'Vælg selv' && customLabel()) {
+                {{ customLabel() }}
+              } @else {
+                {{ option.label }}
+              }
+            </button>
+          }
+        </div>
+
+        @if (showInlineInputs()) {
+          <div class="custom-inputs">
+            <input
+              type="number"
+              class="number-input"
+              min="0"
+              [ngModel]="customHours()"
+              (ngModelChange)="customHours.set(+$event)"
+              (blur)="normalize()"
+            />
+            <span class="unit">timer</span>
+            <input
+              type="number"
+              class="number-input"
+              min="0"
+              max="59"
+              [ngModel]="customMinutes()"
+              (ngModelChange)="customMinutes.set(+$event)"
+              (blur)="normalize()"
+            />
+            <span class="unit">min</span>
+          </div>
+        }
+
+        @if (!isDesktop()) {
+          <ds-mobile-dropdown
+            trigger="vaelg-selv-chip"
+            [isOpen]="pickerOpen()"
+            maxWidth="240px"
+            position="above"
+            (closed)="onPickerDismiss()">
+            <ng-template #customContent>
+              <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
+                <ion-picker-column
+                  [value]="customHours()"
+                  style="--padding-start: 4px; --padding-end: 4px;"
+                  (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
+                  <div slot="suffix" class="picker-suffix">t</div>
+                  @for (h of hours; track h) {
+                    <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
+                  }
+                </ion-picker-column>
+                <ion-picker-column
+                  [value]="customMinutes()"
+                  style="--padding-start: 4px; --padding-end: 4px;"
+                  (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
+                  <div slot="suffix" class="picker-suffix">min</div>
+                  @for (m of minuteOptions; track m) {
+                    <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
+                  }
+                </ion-picker-column>
+              </ion-picker>
+            </ng-template>
+          </ds-mobile-dropdown>
+        }
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { initialDuration: [{
+                type: Input
+            }] } });
+
+export { DsMobileDurationSheetComponent };
+//# sourceMappingURL=propbinder-mobile-design-ds-mobile-duration-sheet-l8x6d78y.mjs.map