@propbinder/mobile-design 0.2.42 → 0.2.43
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.
|
@@ -19090,6 +19090,11 @@ class DsMobileHandbookFolderMiniComponent {
|
|
|
19090
19090
|
* Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
|
|
19091
19091
|
*/
|
|
19092
19092
|
variant = 'light-purple';
|
|
19093
|
+
/**
|
|
19094
|
+
* Optional custom hex color for the folder.
|
|
19095
|
+
* If provided, overrides the variant color.
|
|
19096
|
+
*/
|
|
19097
|
+
customColor;
|
|
19093
19098
|
/**
|
|
19094
19099
|
* Icon name from the design system icon library
|
|
19095
19100
|
*/
|
|
@@ -19099,84 +19104,82 @@ class DsMobileHandbookFolderMiniComponent {
|
|
|
19099
19104
|
*/
|
|
19100
19105
|
getColorVar(suffix) {
|
|
19101
19106
|
const variantMap = {
|
|
19102
|
-
|
|
19103
|
-
|
|
19104
|
-
|
|
19105
|
-
|
|
19107
|
+
// Core design system variants
|
|
19108
|
+
success: 'success',
|
|
19109
|
+
warning: 'warning',
|
|
19110
|
+
destructive: 'destructive',
|
|
19111
|
+
blue: 'blue',
|
|
19106
19112
|
'light-purple': 'light-purple',
|
|
19107
|
-
|
|
19113
|
+
pink: 'pink',
|
|
19108
19114
|
'salmon-orange': 'salmon-orange',
|
|
19109
|
-
|
|
19115
|
+
orange: 'orange',
|
|
19110
19116
|
'lime-green': 'lime-green',
|
|
19111
|
-
|
|
19117
|
+
grey: 'grey',
|
|
19118
|
+
// Extended API colors mapping to their native exact counterparts now
|
|
19119
|
+
red: 'red',
|
|
19120
|
+
green: 'green',
|
|
19121
|
+
yellow: 'yellow',
|
|
19122
|
+
purple: 'purple',
|
|
19123
|
+
indigo: 'indigo',
|
|
19124
|
+
lime: 'lime',
|
|
19125
|
+
teal: 'teal',
|
|
19126
|
+
cyan: 'cyan',
|
|
19127
|
+
brown: 'brown',
|
|
19128
|
+
'light-blue': 'light-blue',
|
|
19129
|
+
'light-green': 'light-green',
|
|
19130
|
+
coral: 'coral',
|
|
19131
|
+
salmon: 'salmon',
|
|
19132
|
+
seagreen: 'seagreen',
|
|
19112
19133
|
};
|
|
19113
19134
|
const colorName = variantMap[this.variant] || 'light-purple';
|
|
19114
19135
|
return `var(--color-${colorName}-${suffix})`;
|
|
19115
19136
|
}
|
|
19116
19137
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileHandbookFolderMiniComponent, isStandalone: true, selector: "ds-mobile-handbook-folder-mini", inputs: { variant: "variant", iconName: "iconName" }, ngImport: i0, template: `
|
|
19138
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileHandbookFolderMiniComponent, isStandalone: true, selector: "ds-mobile-handbook-folder-mini", inputs: { variant: "variant", customColor: "customColor", iconName: "iconName" }, ngImport: i0, template: `
|
|
19118
19139
|
<div class="mini-folder-container">
|
|
19119
19140
|
<!-- Folder Tab SVG -->
|
|
19120
|
-
<svg
|
|
19121
|
-
|
|
19122
|
-
|
|
19123
|
-
|
|
19124
|
-
|
|
19125
|
-
fill="none"
|
|
19126
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
19127
|
-
<path
|
|
19128
|
-
d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
|
|
19129
|
-
[attr.fill]="getColorVar('strong')"/>
|
|
19141
|
+
<svg class="mini-folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
19142
|
+
<path
|
|
19143
|
+
d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
|
|
19144
|
+
[attr.fill]="customColor || getColorVar('strong')"
|
|
19145
|
+
/>
|
|
19130
19146
|
</svg>
|
|
19131
|
-
|
|
19147
|
+
|
|
19132
19148
|
<!-- Folder Back -->
|
|
19133
|
-
<div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
|
|
19149
|
+
<div class="mini-folder-back" [style.background-color]="customColor || getColorVar('strong')">
|
|
19134
19150
|
<!-- Folder Front -->
|
|
19135
|
-
<div
|
|
19136
|
-
|
|
19137
|
-
[style.background-color]="getColorVar('base')">
|
|
19138
|
-
<ds-icon
|
|
19139
|
-
[name]="iconName"
|
|
19140
|
-
[size]="'14px'"
|
|
19141
|
-
[style.color]="'white'" />
|
|
19151
|
+
<div class="mini-folder-front" [style.background-color]="customColor || getColorVar('base')">
|
|
19152
|
+
<ds-icon [name]="iconName" [size]="'14px'" [style.color]="'white'" />
|
|
19142
19153
|
</div>
|
|
19143
19154
|
</div>
|
|
19144
19155
|
</div>
|
|
19145
|
-
`, isInline: true, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
|
|
19156
|
+
`, isInline: true, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0;--color-red-base: #dc3545;--color-red-strong: #ae1d3b;--color-green-base: #28a745;--color-green-strong: #058057;--color-yellow-base: #ffc107;--color-yellow-strong: #e4b200;--color-purple-base: #6f42c1;--color-purple-strong: #4204c5;--color-indigo-base: #6610f2;--color-indigo-strong: #a527a2;--color-lime-base: #82c91e;--color-lime-strong: #58a503;--color-teal-base: #20c997;--color-teal-strong: #0ca678;--color-cyan-base: #17a2b8;--color-cyan-strong: #1098ad;--color-brown-base: #795548;--color-brown-strong: #5c4033;--color-light-blue-base: #add8e6;--color-light-blue-strong: #87ceeb;--color-light-green-base: #90ee90;--color-light-green-strong: #32cd32;--color-coral-base: #f08080;--color-coral-strong: #cd5c5c;--color-salmon-base: #ffa07a;--color-salmon-strong: #fa8072;--color-seagreen-base: #20b2aa;--color-seagreen-strong: #2e8b57}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
|
|
19146
19157
|
}
|
|
19147
19158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, decorators: [{
|
|
19148
19159
|
type: Component,
|
|
19149
19160
|
args: [{ selector: 'ds-mobile-handbook-folder-mini', standalone: true, imports: [CommonModule, DsIconComponent], template: `
|
|
19150
19161
|
<div class="mini-folder-container">
|
|
19151
19162
|
<!-- Folder Tab SVG -->
|
|
19152
|
-
<svg
|
|
19153
|
-
|
|
19154
|
-
|
|
19155
|
-
|
|
19156
|
-
|
|
19157
|
-
fill="none"
|
|
19158
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
19159
|
-
<path
|
|
19160
|
-
d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
|
|
19161
|
-
[attr.fill]="getColorVar('strong')"/>
|
|
19163
|
+
<svg class="mini-folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
19164
|
+
<path
|
|
19165
|
+
d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
|
|
19166
|
+
[attr.fill]="customColor || getColorVar('strong')"
|
|
19167
|
+
/>
|
|
19162
19168
|
</svg>
|
|
19163
|
-
|
|
19169
|
+
|
|
19164
19170
|
<!-- Folder Back -->
|
|
19165
|
-
<div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
|
|
19171
|
+
<div class="mini-folder-back" [style.background-color]="customColor || getColorVar('strong')">
|
|
19166
19172
|
<!-- Folder Front -->
|
|
19167
|
-
<div
|
|
19168
|
-
|
|
19169
|
-
[style.background-color]="getColorVar('base')">
|
|
19170
|
-
<ds-icon
|
|
19171
|
-
[name]="iconName"
|
|
19172
|
-
[size]="'14px'"
|
|
19173
|
-
[style.color]="'white'" />
|
|
19173
|
+
<div class="mini-folder-front" [style.background-color]="customColor || getColorVar('base')">
|
|
19174
|
+
<ds-icon [name]="iconName" [size]="'14px'" [style.color]="'white'" />
|
|
19174
19175
|
</div>
|
|
19175
19176
|
</div>
|
|
19176
19177
|
</div>
|
|
19177
|
-
`, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"] }]
|
|
19178
|
+
`, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0;--color-red-base: #dc3545;--color-red-strong: #ae1d3b;--color-green-base: #28a745;--color-green-strong: #058057;--color-yellow-base: #ffc107;--color-yellow-strong: #e4b200;--color-purple-base: #6f42c1;--color-purple-strong: #4204c5;--color-indigo-base: #6610f2;--color-indigo-strong: #a527a2;--color-lime-base: #82c91e;--color-lime-strong: #58a503;--color-teal-base: #20c997;--color-teal-strong: #0ca678;--color-cyan-base: #17a2b8;--color-cyan-strong: #1098ad;--color-brown-base: #795548;--color-brown-strong: #5c4033;--color-light-blue-base: #add8e6;--color-light-blue-strong: #87ceeb;--color-light-green-base: #90ee90;--color-light-green-strong: #32cd32;--color-coral-base: #f08080;--color-coral-strong: #cd5c5c;--color-salmon-base: #ffa07a;--color-salmon-strong: #fa8072;--color-seagreen-base: #20b2aa;--color-seagreen-strong: #2e8b57}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"] }]
|
|
19178
19179
|
}], propDecorators: { variant: [{
|
|
19179
19180
|
type: Input
|
|
19181
|
+
}], customColor: [{
|
|
19182
|
+
type: Input
|
|
19180
19183
|
}], iconName: [{
|
|
19181
19184
|
type: Input
|
|
19182
19185
|
}] } });
|
|
@@ -19376,92 +19379,74 @@ class DsMobileHandbookDetailModalComponent {
|
|
|
19376
19379
|
}
|
|
19377
19380
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookDetailModalComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
|
|
19378
19381
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileHandbookDetailModalComponent, isStandalone: true, selector: "ds-mobile-handbook-detail-modal", inputs: { handbookData: "handbookData", loading: "loading", error: "error" }, ngImport: i0, template: `
|
|
19379
|
-
<ds-mobile-modal-base
|
|
19380
|
-
[loading]="loading"
|
|
19381
|
-
[error]="error"
|
|
19382
|
-
[headerTitle]="handbook().title"
|
|
19383
|
-
[headerMeta]="handbook().itemCount + ' emner'"
|
|
19384
|
-
closeButtonLabel="Luk"
|
|
19385
|
-
>
|
|
19382
|
+
<ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' emner'" closeButtonLabel="Luk">
|
|
19386
19383
|
<!-- Header Folder Icon -->
|
|
19387
|
-
<ds-mobile-handbook-folder-mini
|
|
19388
|
-
header-leading
|
|
19389
|
-
[variant]="handbook().variant"
|
|
19390
|
-
[iconName]="handbook().iconName"
|
|
19391
|
-
>
|
|
19384
|
+
<ds-mobile-handbook-folder-mini header-leading [variant]="handbook().variant" [customColor]="handbook().customColor" [iconName]="handbook().iconName">
|
|
19392
19385
|
</ds-mobile-handbook-folder-mini>
|
|
19393
19386
|
|
|
19394
19387
|
<!-- Content (main content slot) -->
|
|
19395
|
-
@if (handbook().items && handbook().items!.length > 0) {
|
|
19388
|
+
@if (handbook().items && handbook().items!.length > 0) {
|
|
19396
19389
|
@for (item of getDisplayItems(); track item.title + $index) {
|
|
19397
|
-
|
|
19398
|
-
|
|
19399
|
-
|
|
19400
|
-
}
|
|
19401
|
-
|
|
19402
|
-
<!-- Images -->
|
|
19403
|
-
@if (item.images && item.images.length > 0) {
|
|
19404
|
-
<ds-mobile-swiper
|
|
19405
|
-
[slideWidth]="item.images.length === 1 ? '100%' : '85%'"
|
|
19406
|
-
[gap]="16"
|
|
19407
|
-
>
|
|
19408
|
-
@for (image of item.images; track image) {
|
|
19409
|
-
<div class="swiper-slide">
|
|
19410
|
-
<img [src]="image" [alt]="item.title" class="item-image" />
|
|
19411
|
-
</div>
|
|
19390
|
+
<ds-mobile-section [headline]="item.title || ''" contentGap="20px">
|
|
19391
|
+
@if (item.description) {
|
|
19392
|
+
<p class="item-description" [innerHTML]="item.description"></p>
|
|
19412
19393
|
}
|
|
19413
|
-
</ds-mobile-swiper>
|
|
19414
|
-
}
|
|
19415
19394
|
|
|
19416
|
-
|
|
19417
|
-
|
|
19418
|
-
|
|
19419
|
-
|
|
19420
|
-
|
|
19421
|
-
|
|
19422
|
-
|
|
19423
|
-
|
|
19424
|
-
|
|
19425
|
-
[contactPerson]="contact.contactPerson || ''"
|
|
19426
|
-
[phoneNumber]="contact.phoneNumber || ''"
|
|
19427
|
-
[clickable]="true"
|
|
19428
|
-
(contactClick)="handleContactClick(contact)"
|
|
19429
|
-
>
|
|
19430
|
-
</ds-mobile-card-inline-contact>
|
|
19431
|
-
}
|
|
19395
|
+
<!-- Images -->
|
|
19396
|
+
@if (item.images && item.images.length > 0) {
|
|
19397
|
+
<ds-mobile-swiper [slideWidth]="item.images.length === 1 ? '100%' : '85%'" [gap]="16">
|
|
19398
|
+
@for (image of item.images; track image) {
|
|
19399
|
+
<div class="swiper-slide">
|
|
19400
|
+
<img [src]="image" [alt]="item.title" class="item-image" />
|
|
19401
|
+
</div>
|
|
19402
|
+
}
|
|
19403
|
+
</ds-mobile-swiper>
|
|
19432
19404
|
}
|
|
19433
19405
|
|
|
19434
|
-
|
|
19435
|
-
|
|
19436
|
-
<
|
|
19437
|
-
|
|
19438
|
-
|
|
19439
|
-
|
|
19440
|
-
|
|
19441
|
-
|
|
19442
|
-
|
|
19443
|
-
|
|
19406
|
+
<!-- Contacts and Attachments (grouped) -->
|
|
19407
|
+
@if ((item.contacts && item.contacts.length > 0) || (item.attachments && item.attachments.length > 0)) {
|
|
19408
|
+
<div class="contacts-attachments-group">
|
|
19409
|
+
@if (item.contacts && item.contacts.length > 0) {
|
|
19410
|
+
@for (contact of item.contacts; track contact.name) {
|
|
19411
|
+
<ds-mobile-card-inline-contact
|
|
19412
|
+
[name]="contact.name"
|
|
19413
|
+
[initials]="contact.initials"
|
|
19414
|
+
[contactPerson]="contact.contactPerson || ''"
|
|
19415
|
+
[phoneNumber]="contact.phoneNumber || ''"
|
|
19416
|
+
[clickable]="true"
|
|
19417
|
+
(contactClick)="handleContactClick(contact)"
|
|
19418
|
+
>
|
|
19419
|
+
</ds-mobile-card-inline-contact>
|
|
19420
|
+
}
|
|
19421
|
+
}
|
|
19422
|
+
|
|
19423
|
+
@if (item.attachments && item.attachments.length > 0) {
|
|
19424
|
+
@for (attachment of item.attachments; track attachment.name) {
|
|
19425
|
+
<ds-mobile-card-inline-file
|
|
19426
|
+
[fileName]="attachment.name"
|
|
19427
|
+
[variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
|
|
19428
|
+
[fileUrl]="attachment.url"
|
|
19429
|
+
(fileClick)="handleAttachmentClick(attachment)"
|
|
19430
|
+
>
|
|
19431
|
+
</ds-mobile-card-inline-file>
|
|
19432
|
+
}
|
|
19433
|
+
}
|
|
19434
|
+
</div>
|
|
19444
19435
|
}
|
|
19445
|
-
</
|
|
19446
|
-
|
|
19447
|
-
</ds-mobile-section>
|
|
19448
|
-
}
|
|
19436
|
+
</ds-mobile-section>
|
|
19437
|
+
}
|
|
19449
19438
|
} @else {
|
|
19450
19439
|
<!-- Empty State -->
|
|
19451
19440
|
<ds-mobile-section>
|
|
19452
19441
|
<div class="handbook-empty-state">
|
|
19453
|
-
<img
|
|
19454
|
-
src="/Assets/Empty%20state-chat.png"
|
|
19455
|
-
alt="No items yet"
|
|
19456
|
-
class="empty-state-image"
|
|
19457
|
-
/>
|
|
19442
|
+
<img src="/Assets/Empty%20state-chat.png" alt="No items yet" class="empty-state-image" />
|
|
19458
19443
|
<h3 class="empty-state-title">No items yet</h3>
|
|
19459
19444
|
<p class="empty-state-description">This folder is empty</p>
|
|
19460
19445
|
</div>
|
|
19461
19446
|
</ds-mobile-section>
|
|
19462
19447
|
}
|
|
19463
19448
|
</ds-mobile-modal-base>
|
|
19464
|
-
`, isInline: true, styles: [".handbook-detail-container{display:flex;flex-direction:column;width:100%;flex:1}.handbook-item{width:100%;display:flex;flex-direction:column;gap:24px;padding:0;border-bottom:none}.handbook-item.last-item{border-bottom:none}.item-text-group{display:flex;flex-direction:column;gap:8px}.item-title{font-family:Brockmann,sans-serif;font-size:16px;font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-image{width:100%;max-width:100%;height:280px;-o-object-fit:cover;object-fit:cover;border-radius:12px;display:block}.contacts-attachments-group{display:flex;flex-direction:column;gap:8px}.handbook-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373)}@supports (padding: env(safe-area-inset-bottom)){.handbook-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileHandbookFolderMiniComponent, selector: "ds-mobile-handbook-folder-mini", inputs: ["variant", "iconName"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron"], outputs: ["contactClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }] });
|
|
19449
|
+
`, isInline: true, styles: [".handbook-detail-container{display:flex;flex-direction:column;width:100%;flex:1}.handbook-item{width:100%;display:flex;flex-direction:column;gap:24px;padding:0;border-bottom:none}.handbook-item.last-item{border-bottom:none}.item-text-group{display:flex;flex-direction:column;gap:8px}.item-title{font-family:Brockmann,sans-serif;font-size:16px;font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-image{width:100%;max-width:100%;height:280px;-o-object-fit:cover;object-fit:cover;border-radius:12px;display:block}.contacts-attachments-group{display:flex;flex-direction:column;gap:8px}.handbook-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373)}@supports (padding: env(safe-area-inset-bottom)){.handbook-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileHandbookFolderMiniComponent, selector: "ds-mobile-handbook-folder-mini", inputs: ["variant", "customColor", "iconName"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron"], outputs: ["contactClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }] });
|
|
19465
19450
|
}
|
|
19466
19451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookDetailModalComponent, decorators: [{
|
|
19467
19452
|
type: Component,
|
|
@@ -19474,85 +19459,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
19474
19459
|
DsMobileModalBaseComponent,
|
|
19475
19460
|
DsMobileSectionComponent,
|
|
19476
19461
|
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
|
|
19477
|
-
<ds-mobile-modal-base
|
|
19478
|
-
[loading]="loading"
|
|
19479
|
-
[error]="error"
|
|
19480
|
-
[headerTitle]="handbook().title"
|
|
19481
|
-
[headerMeta]="handbook().itemCount + ' emner'"
|
|
19482
|
-
closeButtonLabel="Luk"
|
|
19483
|
-
>
|
|
19462
|
+
<ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' emner'" closeButtonLabel="Luk">
|
|
19484
19463
|
<!-- Header Folder Icon -->
|
|
19485
|
-
<ds-mobile-handbook-folder-mini
|
|
19486
|
-
header-leading
|
|
19487
|
-
[variant]="handbook().variant"
|
|
19488
|
-
[iconName]="handbook().iconName"
|
|
19489
|
-
>
|
|
19464
|
+
<ds-mobile-handbook-folder-mini header-leading [variant]="handbook().variant" [customColor]="handbook().customColor" [iconName]="handbook().iconName">
|
|
19490
19465
|
</ds-mobile-handbook-folder-mini>
|
|
19491
19466
|
|
|
19492
19467
|
<!-- Content (main content slot) -->
|
|
19493
|
-
@if (handbook().items && handbook().items!.length > 0) {
|
|
19468
|
+
@if (handbook().items && handbook().items!.length > 0) {
|
|
19494
19469
|
@for (item of getDisplayItems(); track item.title + $index) {
|
|
19495
|
-
|
|
19496
|
-
|
|
19497
|
-
|
|
19498
|
-
}
|
|
19499
|
-
|
|
19500
|
-
<!-- Images -->
|
|
19501
|
-
@if (item.images && item.images.length > 0) {
|
|
19502
|
-
<ds-mobile-swiper
|
|
19503
|
-
[slideWidth]="item.images.length === 1 ? '100%' : '85%'"
|
|
19504
|
-
[gap]="16"
|
|
19505
|
-
>
|
|
19506
|
-
@for (image of item.images; track image) {
|
|
19507
|
-
<div class="swiper-slide">
|
|
19508
|
-
<img [src]="image" [alt]="item.title" class="item-image" />
|
|
19509
|
-
</div>
|
|
19470
|
+
<ds-mobile-section [headline]="item.title || ''" contentGap="20px">
|
|
19471
|
+
@if (item.description) {
|
|
19472
|
+
<p class="item-description" [innerHTML]="item.description"></p>
|
|
19510
19473
|
}
|
|
19511
|
-
</ds-mobile-swiper>
|
|
19512
|
-
}
|
|
19513
19474
|
|
|
19514
|
-
|
|
19515
|
-
|
|
19516
|
-
|
|
19517
|
-
|
|
19518
|
-
|
|
19519
|
-
|
|
19520
|
-
|
|
19521
|
-
|
|
19522
|
-
|
|
19523
|
-
[contactPerson]="contact.contactPerson || ''"
|
|
19524
|
-
[phoneNumber]="contact.phoneNumber || ''"
|
|
19525
|
-
[clickable]="true"
|
|
19526
|
-
(contactClick)="handleContactClick(contact)"
|
|
19527
|
-
>
|
|
19528
|
-
</ds-mobile-card-inline-contact>
|
|
19529
|
-
}
|
|
19475
|
+
<!-- Images -->
|
|
19476
|
+
@if (item.images && item.images.length > 0) {
|
|
19477
|
+
<ds-mobile-swiper [slideWidth]="item.images.length === 1 ? '100%' : '85%'" [gap]="16">
|
|
19478
|
+
@for (image of item.images; track image) {
|
|
19479
|
+
<div class="swiper-slide">
|
|
19480
|
+
<img [src]="image" [alt]="item.title" class="item-image" />
|
|
19481
|
+
</div>
|
|
19482
|
+
}
|
|
19483
|
+
</ds-mobile-swiper>
|
|
19530
19484
|
}
|
|
19531
19485
|
|
|
19532
|
-
|
|
19533
|
-
|
|
19534
|
-
<
|
|
19535
|
-
|
|
19536
|
-
|
|
19537
|
-
|
|
19538
|
-
|
|
19539
|
-
|
|
19540
|
-
|
|
19541
|
-
|
|
19486
|
+
<!-- Contacts and Attachments (grouped) -->
|
|
19487
|
+
@if ((item.contacts && item.contacts.length > 0) || (item.attachments && item.attachments.length > 0)) {
|
|
19488
|
+
<div class="contacts-attachments-group">
|
|
19489
|
+
@if (item.contacts && item.contacts.length > 0) {
|
|
19490
|
+
@for (contact of item.contacts; track contact.name) {
|
|
19491
|
+
<ds-mobile-card-inline-contact
|
|
19492
|
+
[name]="contact.name"
|
|
19493
|
+
[initials]="contact.initials"
|
|
19494
|
+
[contactPerson]="contact.contactPerson || ''"
|
|
19495
|
+
[phoneNumber]="contact.phoneNumber || ''"
|
|
19496
|
+
[clickable]="true"
|
|
19497
|
+
(contactClick)="handleContactClick(contact)"
|
|
19498
|
+
>
|
|
19499
|
+
</ds-mobile-card-inline-contact>
|
|
19500
|
+
}
|
|
19501
|
+
}
|
|
19502
|
+
|
|
19503
|
+
@if (item.attachments && item.attachments.length > 0) {
|
|
19504
|
+
@for (attachment of item.attachments; track attachment.name) {
|
|
19505
|
+
<ds-mobile-card-inline-file
|
|
19506
|
+
[fileName]="attachment.name"
|
|
19507
|
+
[variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
|
|
19508
|
+
[fileUrl]="attachment.url"
|
|
19509
|
+
(fileClick)="handleAttachmentClick(attachment)"
|
|
19510
|
+
>
|
|
19511
|
+
</ds-mobile-card-inline-file>
|
|
19512
|
+
}
|
|
19513
|
+
}
|
|
19514
|
+
</div>
|
|
19542
19515
|
}
|
|
19543
|
-
</
|
|
19544
|
-
|
|
19545
|
-
</ds-mobile-section>
|
|
19546
|
-
}
|
|
19516
|
+
</ds-mobile-section>
|
|
19517
|
+
}
|
|
19547
19518
|
} @else {
|
|
19548
19519
|
<!-- Empty State -->
|
|
19549
19520
|
<ds-mobile-section>
|
|
19550
19521
|
<div class="handbook-empty-state">
|
|
19551
|
-
<img
|
|
19552
|
-
src="/Assets/Empty%20state-chat.png"
|
|
19553
|
-
alt="No items yet"
|
|
19554
|
-
class="empty-state-image"
|
|
19555
|
-
/>
|
|
19522
|
+
<img src="/Assets/Empty%20state-chat.png" alt="No items yet" class="empty-state-image" />
|
|
19556
19523
|
<h3 class="empty-state-title">No items yet</h3>
|
|
19557
19524
|
<p class="empty-state-description">This folder is empty</p>
|
|
19558
19525
|
</div>
|
|
@@ -19672,6 +19639,11 @@ class DsMobileHandbookFolderComponent {
|
|
|
19672
19639
|
* Example: 'pink', 'success', 'blue'
|
|
19673
19640
|
*/
|
|
19674
19641
|
variant = 'light-purple';
|
|
19642
|
+
/**
|
|
19643
|
+
* Optional custom hex color for the folder.
|
|
19644
|
+
* If provided, overrides the variant color completely.
|
|
19645
|
+
*/
|
|
19646
|
+
customColor;
|
|
19675
19647
|
/**
|
|
19676
19648
|
* Icon name from the design system icon library
|
|
19677
19649
|
* Example: 'remixLightbulbLine', 'remixFolder3Line'
|
|
@@ -19710,16 +19682,32 @@ class DsMobileHandbookFolderComponent {
|
|
|
19710
19682
|
*/
|
|
19711
19683
|
getColorVar(suffix) {
|
|
19712
19684
|
const variantMap = {
|
|
19713
|
-
|
|
19714
|
-
|
|
19715
|
-
|
|
19716
|
-
|
|
19685
|
+
// Core design system variants
|
|
19686
|
+
success: 'success',
|
|
19687
|
+
warning: 'warning',
|
|
19688
|
+
destructive: 'destructive',
|
|
19689
|
+
blue: 'blue',
|
|
19717
19690
|
'light-purple': 'light-purple',
|
|
19718
|
-
|
|
19691
|
+
pink: 'pink',
|
|
19719
19692
|
'salmon-orange': 'salmon-orange',
|
|
19720
|
-
|
|
19693
|
+
orange: 'orange',
|
|
19721
19694
|
'lime-green': 'lime-green',
|
|
19722
|
-
|
|
19695
|
+
grey: 'grey',
|
|
19696
|
+
// Extended API colors mapping to their native exact counterparts now
|
|
19697
|
+
red: 'red',
|
|
19698
|
+
green: 'green',
|
|
19699
|
+
yellow: 'yellow',
|
|
19700
|
+
purple: 'purple',
|
|
19701
|
+
indigo: 'indigo',
|
|
19702
|
+
lime: 'lime',
|
|
19703
|
+
teal: 'teal',
|
|
19704
|
+
cyan: 'cyan',
|
|
19705
|
+
brown: 'brown',
|
|
19706
|
+
'light-blue': 'light-blue',
|
|
19707
|
+
'light-green': 'light-green',
|
|
19708
|
+
coral: 'coral',
|
|
19709
|
+
salmon: 'salmon',
|
|
19710
|
+
seagreen: 'seagreen',
|
|
19723
19711
|
};
|
|
19724
19712
|
const colorName = variantMap[this.variant] || 'light-purple';
|
|
19725
19713
|
return `var(--color-${colorName}-${suffix})`;
|
|
@@ -19766,6 +19754,7 @@ class DsMobileHandbookFolderComponent {
|
|
|
19766
19754
|
const handbookData = {
|
|
19767
19755
|
title: this.label,
|
|
19768
19756
|
variant: this.variant,
|
|
19757
|
+
customColor: this.customColor,
|
|
19769
19758
|
iconName: this.iconName,
|
|
19770
19759
|
itemCount: this.itemCount,
|
|
19771
19760
|
items: this.items,
|
|
@@ -19787,25 +19776,25 @@ class DsMobileHandbookFolderComponent {
|
|
|
19787
19776
|
this.handbookModal = handbookModal;
|
|
19788
19777
|
}
|
|
19789
19778
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderComponent, deps: [{ token: DsMobileHandbookDetailModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
19790
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileHandbookFolderComponent, isStandalone: true, selector: "ds-mobile-handbook-folder", inputs: { variant: "variant", iconName: "iconName", itemCount: "itemCount", label: "label", items: "items", loading: "loading", error: "error" }, host: { listeners: { "mouseenter": "open()", "mouseleave": "close()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchCancel()", "click": "onClick()" } }, ngImport: i0, template: `
|
|
19779
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileHandbookFolderComponent, isStandalone: true, selector: "ds-mobile-handbook-folder", inputs: { variant: "variant", customColor: "customColor", iconName: "iconName", itemCount: "itemCount", label: "label", items: "items", loading: "loading", error: "error" }, host: { listeners: { "mouseenter": "open()", "mouseleave": "close()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchCancel()", "click": "onClick()" } }, ngImport: i0, template: `
|
|
19791
19780
|
<div class="folder-container" [class.open]="isOpen()">
|
|
19792
19781
|
<!-- Folder Tab SVG -->
|
|
19793
19782
|
<svg class="folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
19794
19783
|
<path
|
|
19795
19784
|
d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
|
|
19796
|
-
[attr.fill]="getColorVar('strong')"
|
|
19785
|
+
[attr.fill]="customColor || getColorVar('strong')"
|
|
19797
19786
|
/>
|
|
19798
19787
|
</svg>
|
|
19799
19788
|
|
|
19800
19789
|
<!-- Folder Back -->
|
|
19801
|
-
<div class="folder-back" [style.background-color]="getColorVar('strong')">
|
|
19790
|
+
<div class="folder-back" [style.background-color]="customColor || getColorVar('strong')">
|
|
19802
19791
|
<!-- Page Sheets -->
|
|
19803
19792
|
@for (sheet of getPageSheets(); track $index) {
|
|
19804
|
-
|
|
19793
|
+
<div class="page-sheet"></div>
|
|
19805
19794
|
}
|
|
19806
19795
|
|
|
19807
19796
|
<!-- Folder Front -->
|
|
19808
|
-
<div class="folder-front" [style.--border-color]="getColorVar('strong')" [style.background-color]="getColorVar('base')">
|
|
19797
|
+
<div class="folder-front" [style.--border-color]="customColor || getColorVar('strong')" [style.background-color]="customColor || getColorVar('base')">
|
|
19809
19798
|
<!-- Icon (Centered) -->
|
|
19810
19799
|
<div class="folder-icon">
|
|
19811
19800
|
<ds-icon [name]="iconName" [size]="'32px'" [style.color]="'white'" />
|
|
@@ -19819,16 +19808,16 @@ class DsMobileHandbookFolderComponent {
|
|
|
19819
19808
|
<div class="folder-label ui-sm-semiBold">{{ label }}</div>
|
|
19820
19809
|
<div class="item-count ui-sm-regular" [style.color]="'var(--color-text-secondary, #6b7280)'">
|
|
19821
19810
|
@if (loading) {
|
|
19822
|
-
|
|
19811
|
+
<span class="loading-indicator">Loading...</span>
|
|
19823
19812
|
} @else if (error) {
|
|
19824
|
-
|
|
19813
|
+
<span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
|
|
19825
19814
|
} @else {
|
|
19826
|
-
|
|
19827
|
-
|
|
19815
|
+
<span>{{ itemCount }}</span>
|
|
19816
|
+
<span class="item-count-label">emner</span>
|
|
19828
19817
|
}
|
|
19829
19818
|
</div>
|
|
19830
19819
|
</div>
|
|
19831
|
-
`, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:16px;border-radius:16px;background:var(--color-background-neutral-secondary, #f0f0f0);transition:background .2s ease}:host:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}@media (hover: hover){:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}}.folder-container{position:relative;width:100%;display:flex;flex-direction:column;perspective:800px;-webkit-perspective:800px;max-width:160px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.folder-container.open .page-sheet{-webkit-transform:translateY(-8px);transform:translateY(-8px);transition-delay:.2s}.folder-container.open .page-sheet:nth-child(1){-webkit-transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px);transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(2){-webkit-transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px);transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(3){-webkit-transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px);transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(4){-webkit-transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px);transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(5){-webkit-transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px);transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(6){-webkit-transform:scale(.9) translateY(-28px) rotateX(0deg) translateZ(.1px);transform:scale(.9) translateY(-28px) rotateX(.1px)}.folder-container.open .folder-front{-webkit-transform:translate3d(0,0,0) rotateX(-45deg);transform:translateZ(0) rotateX(-45deg)}.folder-tab{width:50%;height:auto;display:block}.folder-back{height:128px;border-radius:0 12px 12px;position:relative;margin-top:-1px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.page-sheet{position:absolute;width:80%;height:120px;background:#fff;border-radius:8px;box-shadow:0 -1px 5px #0000001a;border:1px solid var(--border-color-default);transition:transform .3s ease-out;-webkit-transition:-webkit-transform .3s ease-out;left:10%;-webkit-transform:translateZ(0);transform:translateZ(0);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;will-change:transform}.page-sheet:nth-child(1){bottom:2px;z-index:6;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(1) translateZ(.1px);transform:scale(1) translateZ(.1px)}.page-sheet:nth-child(2){bottom:8px;z-index:5;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.98) translateZ(.1px);transform:scale(.98) translateZ(.1px)}.page-sheet:nth-child(3){bottom:14px;z-index:4;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.96) translateZ(.1px);transform:scale(.96) translateZ(.1px)}.page-sheet:nth-child(4){bottom:20px;z-index:3;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.94) translateZ(.1px);transform:scale(.94) translateZ(.1px)}.page-sheet:nth-child(5){bottom:26px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.92) translateZ(.1px);transform:scale(.92) translateZ(.1px)}.page-sheet:nth-child(6){bottom:32px;z-index:1;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.9) translateZ(.1px);transform:scale(.9) translateZ(.1px)}.folder-front{position:absolute;bottom:0;left:0;right:0;height:116px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:8px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transition:-webkit-transform .4s ease-in-out;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;-webkit-transform:rotateX(-20deg) translateZ(.1px);transform:rotateX(-20deg) translateZ(.1px);-webkit-transform:translate3d(0,0,0) rotateX(-20deg);transform:translateZ(0) rotateX(-20deg);box-shadow:inset 0 64px 48px #fff3,inset 0 2px 4px #ffffff4d,inset 0 1px 1px #ffffff4d}.item-count{display:flex;align-items:center;gap:4px}.item-count-label{letter-spacing:.5px}.folder-icon{display:flex;align-items:center;justify-content:center}.folder-label-container{display:flex;flex-direction:column;align-items:center;gap:4px}.folder-label{text-align:center}.loading-indicator,.error-indicator{font-size:var(--font-size-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
|
|
19820
|
+
`, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:16px;border-radius:16px;background:var(--color-background-neutral-secondary, #f0f0f0);transition:background .2s ease}:host:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}@media (hover: hover){:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host{--color-red-base: #dc3545;--color-red-strong: #ae1d3b;--color-green-base: #28a745;--color-green-strong: #058057;--color-yellow-base: #ffc107;--color-yellow-strong: #e4b200;--color-purple-base: #6f42c1;--color-purple-strong: #4204c5;--color-indigo-base: #6610f2;--color-indigo-strong: #a527a2;--color-lime-base: #82c91e;--color-lime-strong: #58a503;--color-teal-base: #20c997;--color-teal-strong: #0ca678;--color-cyan-base: #17a2b8;--color-cyan-strong: #1098ad;--color-brown-base: #795548;--color-brown-strong: #5c4033;--color-light-blue-base: #add8e6;--color-light-blue-strong: #87ceeb;--color-light-green-base: #90ee90;--color-light-green-strong: #32cd32;--color-coral-base: #f08080;--color-coral-strong: #cd5c5c;--color-salmon-base: #ffa07a;--color-salmon-strong: #fa8072;--color-seagreen-base: #20b2aa;--color-seagreen-strong: #2e8b57}.folder-container{position:relative;width:100%;display:flex;flex-direction:column;perspective:800px;-webkit-perspective:800px;max-width:160px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.folder-container.open .page-sheet{-webkit-transform:translateY(-8px);transform:translateY(-8px);transition-delay:.2s}.folder-container.open .page-sheet:nth-child(1){-webkit-transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px);transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(2){-webkit-transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px);transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(3){-webkit-transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px);transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(4){-webkit-transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px);transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(5){-webkit-transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px);transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(6){-webkit-transform:scale(.9) translateY(-28px) rotateX(0deg) translateZ(.1px);transform:scale(.9) translateY(-28px) rotateX(.1px)}.folder-container.open .folder-front{-webkit-transform:translate3d(0,0,0) rotateX(-45deg);transform:translateZ(0) rotateX(-45deg)}.folder-tab{width:50%;height:auto;display:block}.folder-back{height:128px;border-radius:0 12px 12px;position:relative;margin-top:-1px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.page-sheet{position:absolute;width:80%;height:120px;background:#fff;border-radius:8px;box-shadow:0 -1px 5px #0000001a;border:1px solid var(--border-color-default);transition:transform .3s ease-out;-webkit-transition:-webkit-transform .3s ease-out;left:10%;-webkit-transform:translateZ(0);transform:translateZ(0);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;will-change:transform}.page-sheet:nth-child(1){bottom:2px;z-index:6;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(1) translateZ(.1px);transform:scale(1) translateZ(.1px)}.page-sheet:nth-child(2){bottom:8px;z-index:5;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.98) translateZ(.1px);transform:scale(.98) translateZ(.1px)}.page-sheet:nth-child(3){bottom:14px;z-index:4;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.96) translateZ(.1px);transform:scale(.96) translateZ(.1px)}.page-sheet:nth-child(4){bottom:20px;z-index:3;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.94) translateZ(.1px);transform:scale(.94) translateZ(.1px)}.page-sheet:nth-child(5){bottom:26px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.92) translateZ(.1px);transform:scale(.92) translateZ(.1px)}.page-sheet:nth-child(6){bottom:32px;z-index:1;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.9) translateZ(.1px);transform:scale(.9) translateZ(.1px)}.folder-front{position:absolute;bottom:0;left:0;right:0;height:116px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:8px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transition:-webkit-transform .4s ease-in-out;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;-webkit-transform:rotateX(-20deg) translateZ(.1px);transform:rotateX(-20deg) translateZ(.1px);-webkit-transform:translate3d(0,0,0) rotateX(-20deg);transform:translateZ(0) rotateX(-20deg);box-shadow:inset 0 64px 48px #fff3,inset 0 2px 4px #ffffff4d,inset 0 1px 1px #ffffff4d}.item-count{display:flex;align-items:center;gap:4px}.item-count-label{letter-spacing:.5px}.folder-icon{display:flex;align-items:center;justify-content:center}.folder-label-container{display:flex;flex-direction:column;align-items:center;gap:4px}.folder-label{text-align:center}.loading-indicator,.error-indicator{font-size:var(--font-size-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
|
|
19832
19821
|
}
|
|
19833
19822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderComponent, decorators: [{
|
|
19834
19823
|
type: Component,
|
|
@@ -19838,19 +19827,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
19838
19827
|
<svg class="folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
19839
19828
|
<path
|
|
19840
19829
|
d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
|
|
19841
|
-
[attr.fill]="getColorVar('strong')"
|
|
19830
|
+
[attr.fill]="customColor || getColorVar('strong')"
|
|
19842
19831
|
/>
|
|
19843
19832
|
</svg>
|
|
19844
19833
|
|
|
19845
19834
|
<!-- Folder Back -->
|
|
19846
|
-
<div class="folder-back" [style.background-color]="getColorVar('strong')">
|
|
19835
|
+
<div class="folder-back" [style.background-color]="customColor || getColorVar('strong')">
|
|
19847
19836
|
<!-- Page Sheets -->
|
|
19848
19837
|
@for (sheet of getPageSheets(); track $index) {
|
|
19849
|
-
|
|
19838
|
+
<div class="page-sheet"></div>
|
|
19850
19839
|
}
|
|
19851
19840
|
|
|
19852
19841
|
<!-- Folder Front -->
|
|
19853
|
-
<div class="folder-front" [style.--border-color]="getColorVar('strong')" [style.background-color]="getColorVar('base')">
|
|
19842
|
+
<div class="folder-front" [style.--border-color]="customColor || getColorVar('strong')" [style.background-color]="customColor || getColorVar('base')">
|
|
19854
19843
|
<!-- Icon (Centered) -->
|
|
19855
19844
|
<div class="folder-icon">
|
|
19856
19845
|
<ds-icon [name]="iconName" [size]="'32px'" [style.color]="'white'" />
|
|
@@ -19864,18 +19853,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
19864
19853
|
<div class="folder-label ui-sm-semiBold">{{ label }}</div>
|
|
19865
19854
|
<div class="item-count ui-sm-regular" [style.color]="'var(--color-text-secondary, #6b7280)'">
|
|
19866
19855
|
@if (loading) {
|
|
19867
|
-
|
|
19856
|
+
<span class="loading-indicator">Loading...</span>
|
|
19868
19857
|
} @else if (error) {
|
|
19869
|
-
|
|
19858
|
+
<span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
|
|
19870
19859
|
} @else {
|
|
19871
|
-
|
|
19872
|
-
|
|
19860
|
+
<span>{{ itemCount }}</span>
|
|
19861
|
+
<span class="item-count-label">emner</span>
|
|
19873
19862
|
}
|
|
19874
19863
|
</div>
|
|
19875
19864
|
</div>
|
|
19876
|
-
`, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:16px;border-radius:16px;background:var(--color-background-neutral-secondary, #f0f0f0);transition:background .2s ease}:host:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}@media (hover: hover){:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}}.folder-container{position:relative;width:100%;display:flex;flex-direction:column;perspective:800px;-webkit-perspective:800px;max-width:160px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.folder-container.open .page-sheet{-webkit-transform:translateY(-8px);transform:translateY(-8px);transition-delay:.2s}.folder-container.open .page-sheet:nth-child(1){-webkit-transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px);transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(2){-webkit-transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px);transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(3){-webkit-transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px);transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(4){-webkit-transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px);transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(5){-webkit-transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px);transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(6){-webkit-transform:scale(.9) translateY(-28px) rotateX(0deg) translateZ(.1px);transform:scale(.9) translateY(-28px) rotateX(.1px)}.folder-container.open .folder-front{-webkit-transform:translate3d(0,0,0) rotateX(-45deg);transform:translateZ(0) rotateX(-45deg)}.folder-tab{width:50%;height:auto;display:block}.folder-back{height:128px;border-radius:0 12px 12px;position:relative;margin-top:-1px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.page-sheet{position:absolute;width:80%;height:120px;background:#fff;border-radius:8px;box-shadow:0 -1px 5px #0000001a;border:1px solid var(--border-color-default);transition:transform .3s ease-out;-webkit-transition:-webkit-transform .3s ease-out;left:10%;-webkit-transform:translateZ(0);transform:translateZ(0);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;will-change:transform}.page-sheet:nth-child(1){bottom:2px;z-index:6;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(1) translateZ(.1px);transform:scale(1) translateZ(.1px)}.page-sheet:nth-child(2){bottom:8px;z-index:5;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.98) translateZ(.1px);transform:scale(.98) translateZ(.1px)}.page-sheet:nth-child(3){bottom:14px;z-index:4;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.96) translateZ(.1px);transform:scale(.96) translateZ(.1px)}.page-sheet:nth-child(4){bottom:20px;z-index:3;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.94) translateZ(.1px);transform:scale(.94) translateZ(.1px)}.page-sheet:nth-child(5){bottom:26px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.92) translateZ(.1px);transform:scale(.92) translateZ(.1px)}.page-sheet:nth-child(6){bottom:32px;z-index:1;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.9) translateZ(.1px);transform:scale(.9) translateZ(.1px)}.folder-front{position:absolute;bottom:0;left:0;right:0;height:116px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:8px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transition:-webkit-transform .4s ease-in-out;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;-webkit-transform:rotateX(-20deg) translateZ(.1px);transform:rotateX(-20deg) translateZ(.1px);-webkit-transform:translate3d(0,0,0) rotateX(-20deg);transform:translateZ(0) rotateX(-20deg);box-shadow:inset 0 64px 48px #fff3,inset 0 2px 4px #ffffff4d,inset 0 1px 1px #ffffff4d}.item-count{display:flex;align-items:center;gap:4px}.item-count-label{letter-spacing:.5px}.folder-icon{display:flex;align-items:center;justify-content:center}.folder-label-container{display:flex;flex-direction:column;align-items:center;gap:4px}.folder-label{text-align:center}.loading-indicator,.error-indicator{font-size:var(--font-size-xs)}\n"] }]
|
|
19865
|
+
`, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:16px;border-radius:16px;background:var(--color-background-neutral-secondary, #f0f0f0);transition:background .2s ease}:host:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}@media (hover: hover){:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host{--color-red-base: #dc3545;--color-red-strong: #ae1d3b;--color-green-base: #28a745;--color-green-strong: #058057;--color-yellow-base: #ffc107;--color-yellow-strong: #e4b200;--color-purple-base: #6f42c1;--color-purple-strong: #4204c5;--color-indigo-base: #6610f2;--color-indigo-strong: #a527a2;--color-lime-base: #82c91e;--color-lime-strong: #58a503;--color-teal-base: #20c997;--color-teal-strong: #0ca678;--color-cyan-base: #17a2b8;--color-cyan-strong: #1098ad;--color-brown-base: #795548;--color-brown-strong: #5c4033;--color-light-blue-base: #add8e6;--color-light-blue-strong: #87ceeb;--color-light-green-base: #90ee90;--color-light-green-strong: #32cd32;--color-coral-base: #f08080;--color-coral-strong: #cd5c5c;--color-salmon-base: #ffa07a;--color-salmon-strong: #fa8072;--color-seagreen-base: #20b2aa;--color-seagreen-strong: #2e8b57}.folder-container{position:relative;width:100%;display:flex;flex-direction:column;perspective:800px;-webkit-perspective:800px;max-width:160px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.folder-container.open .page-sheet{-webkit-transform:translateY(-8px);transform:translateY(-8px);transition-delay:.2s}.folder-container.open .page-sheet:nth-child(1){-webkit-transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px);transform:scale(1) translateY(-8px) rotateX(-45deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(2){-webkit-transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px);transform:scale(.98) translateY(-12px) rotateX(-36deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(3){-webkit-transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px);transform:scale(.96) translateY(-16px) rotateX(-27deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(4){-webkit-transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px);transform:scale(.94) translateY(-20px) rotateX(-18deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(5){-webkit-transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px);transform:scale(.92) translateY(-24px) rotateX(-9deg) translateZ(.1px)}.folder-container.open .page-sheet:nth-child(6){-webkit-transform:scale(.9) translateY(-28px) rotateX(0deg) translateZ(.1px);transform:scale(.9) translateY(-28px) rotateX(.1px)}.folder-container.open .folder-front{-webkit-transform:translate3d(0,0,0) rotateX(-45deg);transform:translateZ(0) rotateX(-45deg)}.folder-tab{width:50%;height:auto;display:block}.folder-back{height:128px;border-radius:0 12px 12px;position:relative;margin-top:-1px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.page-sheet{position:absolute;width:80%;height:120px;background:#fff;border-radius:8px;box-shadow:0 -1px 5px #0000001a;border:1px solid var(--border-color-default);transition:transform .3s ease-out;-webkit-transition:-webkit-transform .3s ease-out;left:10%;-webkit-transform:translateZ(0);transform:translateZ(0);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;will-change:transform}.page-sheet:nth-child(1){bottom:2px;z-index:6;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(1) translateZ(.1px);transform:scale(1) translateZ(.1px)}.page-sheet:nth-child(2){bottom:8px;z-index:5;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.98) translateZ(.1px);transform:scale(.98) translateZ(.1px)}.page-sheet:nth-child(3){bottom:14px;z-index:4;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.96) translateZ(.1px);transform:scale(.96) translateZ(.1px)}.page-sheet:nth-child(4){bottom:20px;z-index:3;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.94) translateZ(.1px);transform:scale(.94) translateZ(.1px)}.page-sheet:nth-child(5){bottom:26px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.92) translateZ(.1px);transform:scale(.92) translateZ(.1px)}.page-sheet:nth-child(6){bottom:32px;z-index:1;transform-origin:bottom center;-webkit-transform-origin:bottom center;-webkit-transform:scale(.9) translateZ(.1px);transform:scale(.9) translateZ(.1px)}.folder-front{position:absolute;bottom:0;left:0;right:0;height:116px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:8px;z-index:2;transform-origin:bottom center;-webkit-transform-origin:bottom center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transition:-webkit-transform .4s ease-in-out;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;-webkit-transform:rotateX(-20deg) translateZ(.1px);transform:rotateX(-20deg) translateZ(.1px);-webkit-transform:translate3d(0,0,0) rotateX(-20deg);transform:translateZ(0) rotateX(-20deg);box-shadow:inset 0 64px 48px #fff3,inset 0 2px 4px #ffffff4d,inset 0 1px 1px #ffffff4d}.item-count{display:flex;align-items:center;gap:4px}.item-count-label{letter-spacing:.5px}.folder-icon{display:flex;align-items:center;justify-content:center}.folder-label-container{display:flex;flex-direction:column;align-items:center;gap:4px}.folder-label{text-align:center}.loading-indicator,.error-indicator{font-size:var(--font-size-xs)}\n"] }]
|
|
19877
19866
|
}], ctorParameters: () => [{ type: DsMobileHandbookDetailModalService }], propDecorators: { variant: [{
|
|
19878
19867
|
type: Input
|
|
19868
|
+
}], customColor: [{
|
|
19869
|
+
type: Input
|
|
19879
19870
|
}], iconName: [{
|
|
19880
19871
|
type: Input
|
|
19881
19872
|
}], itemCount: [{
|
|
@@ -21819,10 +21810,7 @@ class MobileHandbookPageComponent {
|
|
|
21819
21810
|
{
|
|
21820
21811
|
title: 'Fælles områder og sikkerhed',
|
|
21821
21812
|
description: 'Trappeopgange med nødbelysning og brandsikre døre. Postkasser placeret i indgangspartiet. Hold altid flugtveje fri.',
|
|
21822
|
-
images: [
|
|
21823
|
-
'/Assets/Dummy-photos/staircase.jpg',
|
|
21824
|
-
'/Assets/Dummy-photos/mailboxes.jpg',
|
|
21825
|
-
],
|
|
21813
|
+
images: ['/Assets/Dummy-photos/staircase.jpg', '/Assets/Dummy-photos/mailboxes.jpg'],
|
|
21826
21814
|
},
|
|
21827
21815
|
{
|
|
21828
21816
|
title: 'Hjertestarter (AED)',
|
|
@@ -21885,10 +21873,7 @@ class MobileHandbookPageComponent {
|
|
|
21885
21873
|
{
|
|
21886
21874
|
title: 'Udendørs arealer',
|
|
21887
21875
|
description: 'Fælles grønne områder med bede, siddepladser og terrasse. Beboere må frit benytte området. Respektér planterne og hold området pænt.',
|
|
21888
|
-
images: [
|
|
21889
|
-
'/Assets/Dummy-photos/park.jpg',
|
|
21890
|
-
'/Assets/Dummy-photos/yard.jpg',
|
|
21891
|
-
],
|
|
21876
|
+
images: ['/Assets/Dummy-photos/park.jpg', '/Assets/Dummy-photos/yard.jpg'],
|
|
21892
21877
|
},
|
|
21893
21878
|
{
|
|
21894
21879
|
title: 'Havevedligeholdelse',
|
|
@@ -22004,125 +21989,50 @@ class MobileHandbookPageComponent {
|
|
|
22004
21989
|
}
|
|
22005
21990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHandbookPageComponent, deps: [{ token: UserService }], target: i0.ɵɵFactoryTarget.Component });
|
|
22006
21991
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MobileHandbookPageComponent, isStandalone: true, selector: "app-mobile-handbook-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
|
|
22007
|
-
<ds-mobile-page-main
|
|
22008
|
-
#pageComponent
|
|
22009
|
-
title="Håndbog"
|
|
22010
|
-
[avatarInitials]="userService.avatarInitials()"
|
|
22011
|
-
[avatarType]="userService.avatarType()"
|
|
22012
|
-
(refresh)="handleRefresh($event)"
|
|
22013
|
-
>
|
|
21992
|
+
<ds-mobile-page-main #pageComponent title="Håndbog" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (refresh)="handleRefresh($event)">
|
|
22014
21993
|
<!-- Offline indicator -->
|
|
22015
21994
|
@if (pageComponent.isOffline()) {
|
|
22016
|
-
<ds-mobile-offline-banner
|
|
22017
|
-
offline-indicator
|
|
22018
|
-
title="Ingen internetforbindelse"
|
|
22019
|
-
message="Nogle funktioner kan være utilgængelige">
|
|
22020
|
-
</ds-mobile-offline-banner>
|
|
21995
|
+
<ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
|
|
22021
21996
|
}
|
|
22022
|
-
|
|
21997
|
+
|
|
22023
21998
|
<ds-mobile-section>
|
|
22024
21999
|
<div class="folders-grid">
|
|
22025
|
-
<ds-mobile-handbook-folder
|
|
22026
|
-
[variant]="'pink'"
|
|
22027
|
-
[iconName]="'remixLightbulbLine'"
|
|
22028
|
-
[itemCount]="8"
|
|
22029
|
-
[label]="'Forsyninger'"
|
|
22030
|
-
[items]="utilitiesItems"
|
|
22031
|
-
>
|
|
22000
|
+
<ds-mobile-handbook-folder [variant]="'pink'" [iconName]="'remixLightbulbLine'" [itemCount]="8" [label]="'Forsyninger'" [items]="utilitiesItems">
|
|
22032
22001
|
</ds-mobile-handbook-folder>
|
|
22033
22002
|
|
|
22034
|
-
<ds-mobile-handbook-folder
|
|
22035
|
-
[variant]="'success'"
|
|
22036
|
-
[iconName]="'remixKey2Line'"
|
|
22037
|
-
[itemCount]="4"
|
|
22038
|
-
[label]="'Sikkerhedsudstyr'"
|
|
22039
|
-
[items]="sikkerhedsudstyrItems"
|
|
22040
|
-
>
|
|
22003
|
+
<ds-mobile-handbook-folder [variant]="'success'" [iconName]="'remixKey2Line'" [itemCount]="4" [label]="'Sikkerhedsudstyr'" [items]="sikkerhedsudstyrItems">
|
|
22041
22004
|
</ds-mobile-handbook-folder>
|
|
22042
22005
|
|
|
22043
|
-
<ds-mobile-handbook-folder
|
|
22044
|
-
[variant]="'blue'"
|
|
22045
|
-
[iconName]="'remixFileList3Line'"
|
|
22046
|
-
[itemCount]="8"
|
|
22047
|
-
[label]="'Servicekontrakter'"
|
|
22048
|
-
[items]="serviceContractsItems"
|
|
22049
|
-
>
|
|
22006
|
+
<ds-mobile-handbook-folder [variant]="'blue'" [iconName]="'remixFileList3Line'" [itemCount]="8" [label]="'Servicekontrakter'" [items]="serviceContractsItems">
|
|
22050
22007
|
</ds-mobile-handbook-folder>
|
|
22051
22008
|
|
|
22052
|
-
<ds-mobile-handbook-folder
|
|
22053
|
-
[variant]="'warning'"
|
|
22054
|
-
[iconName]="'remixToolsLine'"
|
|
22055
|
-
[itemCount]="5"
|
|
22056
|
-
[label]="'Udstyr'"
|
|
22057
|
-
[items]="equipmentItems"
|
|
22058
|
-
>
|
|
22059
|
-
</ds-mobile-handbook-folder>
|
|
22009
|
+
<ds-mobile-handbook-folder [variant]="'warning'" [iconName]="'remixToolsLine'" [itemCount]="5" [label]="'Udstyr'" [items]="equipmentItems"> </ds-mobile-handbook-folder>
|
|
22060
22010
|
</div>
|
|
22061
22011
|
</ds-mobile-section>
|
|
22062
22012
|
</ds-mobile-page-main>
|
|
22063
|
-
`, isInline: true, styles: [".folders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center}@media (min-width: 768px){.folders-grid{grid-template-columns:repeat(3,1fr)}}ds-mobile-handbook-folder{width:100%}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileHandbookFolderComponent, selector: "ds-mobile-handbook-folder", inputs: ["variant", "iconName", "itemCount", "label", "items", "loading", "error"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
|
|
22013
|
+
`, isInline: true, styles: [".folders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center}@media (min-width: 768px){.folders-grid{grid-template-columns:repeat(3,1fr)}}ds-mobile-handbook-folder{width:100%}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileHandbookFolderComponent, selector: "ds-mobile-handbook-folder", inputs: ["variant", "customColor", "iconName", "itemCount", "label", "items", "loading", "error"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
|
|
22064
22014
|
}
|
|
22065
22015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHandbookPageComponent, decorators: [{
|
|
22066
22016
|
type: Component,
|
|
22067
|
-
args: [{ selector: 'app-mobile-handbook-page', standalone: true, imports: [
|
|
22068
|
-
|
|
22069
|
-
DsMobileSectionComponent,
|
|
22070
|
-
DsMobileHandbookFolderComponent,
|
|
22071
|
-
DsMobileOfflineBannerComponent,
|
|
22072
|
-
], template: `
|
|
22073
|
-
<ds-mobile-page-main
|
|
22074
|
-
#pageComponent
|
|
22075
|
-
title="Håndbog"
|
|
22076
|
-
[avatarInitials]="userService.avatarInitials()"
|
|
22077
|
-
[avatarType]="userService.avatarType()"
|
|
22078
|
-
(refresh)="handleRefresh($event)"
|
|
22079
|
-
>
|
|
22017
|
+
args: [{ selector: 'app-mobile-handbook-page', standalone: true, imports: [DsMobilePageMainComponent, DsMobileSectionComponent, DsMobileHandbookFolderComponent, DsMobileOfflineBannerComponent], template: `
|
|
22018
|
+
<ds-mobile-page-main #pageComponent title="Håndbog" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (refresh)="handleRefresh($event)">
|
|
22080
22019
|
<!-- Offline indicator -->
|
|
22081
22020
|
@if (pageComponent.isOffline()) {
|
|
22082
|
-
<ds-mobile-offline-banner
|
|
22083
|
-
offline-indicator
|
|
22084
|
-
title="Ingen internetforbindelse"
|
|
22085
|
-
message="Nogle funktioner kan være utilgængelige">
|
|
22086
|
-
</ds-mobile-offline-banner>
|
|
22021
|
+
<ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
|
|
22087
22022
|
}
|
|
22088
|
-
|
|
22023
|
+
|
|
22089
22024
|
<ds-mobile-section>
|
|
22090
22025
|
<div class="folders-grid">
|
|
22091
|
-
<ds-mobile-handbook-folder
|
|
22092
|
-
[variant]="'pink'"
|
|
22093
|
-
[iconName]="'remixLightbulbLine'"
|
|
22094
|
-
[itemCount]="8"
|
|
22095
|
-
[label]="'Forsyninger'"
|
|
22096
|
-
[items]="utilitiesItems"
|
|
22097
|
-
>
|
|
22026
|
+
<ds-mobile-handbook-folder [variant]="'pink'" [iconName]="'remixLightbulbLine'" [itemCount]="8" [label]="'Forsyninger'" [items]="utilitiesItems">
|
|
22098
22027
|
</ds-mobile-handbook-folder>
|
|
22099
22028
|
|
|
22100
|
-
<ds-mobile-handbook-folder
|
|
22101
|
-
[variant]="'success'"
|
|
22102
|
-
[iconName]="'remixKey2Line'"
|
|
22103
|
-
[itemCount]="4"
|
|
22104
|
-
[label]="'Sikkerhedsudstyr'"
|
|
22105
|
-
[items]="sikkerhedsudstyrItems"
|
|
22106
|
-
>
|
|
22029
|
+
<ds-mobile-handbook-folder [variant]="'success'" [iconName]="'remixKey2Line'" [itemCount]="4" [label]="'Sikkerhedsudstyr'" [items]="sikkerhedsudstyrItems">
|
|
22107
22030
|
</ds-mobile-handbook-folder>
|
|
22108
22031
|
|
|
22109
|
-
<ds-mobile-handbook-folder
|
|
22110
|
-
[variant]="'blue'"
|
|
22111
|
-
[iconName]="'remixFileList3Line'"
|
|
22112
|
-
[itemCount]="8"
|
|
22113
|
-
[label]="'Servicekontrakter'"
|
|
22114
|
-
[items]="serviceContractsItems"
|
|
22115
|
-
>
|
|
22032
|
+
<ds-mobile-handbook-folder [variant]="'blue'" [iconName]="'remixFileList3Line'" [itemCount]="8" [label]="'Servicekontrakter'" [items]="serviceContractsItems">
|
|
22116
22033
|
</ds-mobile-handbook-folder>
|
|
22117
22034
|
|
|
22118
|
-
<ds-mobile-handbook-folder
|
|
22119
|
-
[variant]="'warning'"
|
|
22120
|
-
[iconName]="'remixToolsLine'"
|
|
22121
|
-
[itemCount]="5"
|
|
22122
|
-
[label]="'Udstyr'"
|
|
22123
|
-
[items]="equipmentItems"
|
|
22124
|
-
>
|
|
22125
|
-
</ds-mobile-handbook-folder>
|
|
22035
|
+
<ds-mobile-handbook-folder [variant]="'warning'" [iconName]="'remixToolsLine'" [itemCount]="5" [label]="'Udstyr'" [items]="equipmentItems"> </ds-mobile-handbook-folder>
|
|
22126
22036
|
</div>
|
|
22127
22037
|
</ds-mobile-section>
|
|
22128
22038
|
</ds-mobile-page-main>
|