@propbinder/mobile-design 0.2.12 → 0.2.13
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.
|
@@ -1073,14 +1073,7 @@ class DsMobileActionListItemComponent {
|
|
|
1073
1073
|
itemClick = output();
|
|
1074
1074
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileActionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1075
1075
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DsMobileActionListItemComponent, isStandalone: true, selector: "ds-mobile-action-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
|
|
1076
|
-
<ds-mobile-list-item
|
|
1077
|
-
[title]="title()"
|
|
1078
|
-
[interactive]="true"
|
|
1079
|
-
[enableLongPress]="false"
|
|
1080
|
-
[showDivider]="showDivider()"
|
|
1081
|
-
[disabled]="disabled()"
|
|
1082
|
-
(itemClick)="itemClick.emit()"
|
|
1083
|
-
>
|
|
1076
|
+
<ds-mobile-list-item [title]="title()" [interactive]="true" [enableLongPress]="false" [showDivider]="showDivider()" [disabled]="disabled()" (itemClick)="itemClick.emit()">
|
|
1084
1077
|
<div class="action-icon-wrapper" content-leading>
|
|
1085
1078
|
<ng-content select="[action-icon]" />
|
|
1086
1079
|
</div>
|
|
@@ -1094,14 +1087,7 @@ class DsMobileActionListItemComponent {
|
|
|
1094
1087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileActionListItemComponent, decorators: [{
|
|
1095
1088
|
type: Component,
|
|
1096
1089
|
args: [{ selector: 'ds-mobile-action-list-item', standalone: true, imports: [DsMobileListItemComponent], template: `
|
|
1097
|
-
<ds-mobile-list-item
|
|
1098
|
-
[title]="title()"
|
|
1099
|
-
[interactive]="true"
|
|
1100
|
-
[enableLongPress]="false"
|
|
1101
|
-
[showDivider]="showDivider()"
|
|
1102
|
-
[disabled]="disabled()"
|
|
1103
|
-
(itemClick)="itemClick.emit()"
|
|
1104
|
-
>
|
|
1090
|
+
<ds-mobile-list-item [title]="title()" [interactive]="true" [enableLongPress]="false" [showDivider]="showDivider()" [disabled]="disabled()" (itemClick)="itemClick.emit()">
|
|
1105
1091
|
<div class="action-icon-wrapper" content-leading>
|
|
1106
1092
|
<ng-content select="[action-icon]" />
|
|
1107
1093
|
</div>
|
|
@@ -1293,20 +1279,14 @@ class DsMobileActionsBottomSheetComponent {
|
|
|
1293
1279
|
@for (group of actionGroups(); track $index; let isLast = $last) {
|
|
1294
1280
|
<!-- Action Group -->
|
|
1295
1281
|
<div class="action-group">
|
|
1296
|
-
@for (actionItem of group.actions; track actionItem.action; let
|
|
1297
|
-
isLastInGroup = $last) {
|
|
1282
|
+
@for (actionItem of group.actions; track actionItem.action; let isLastInGroup = $last) {
|
|
1298
1283
|
<ds-mobile-action-list-item
|
|
1299
1284
|
[title]="actionItem.title"
|
|
1300
1285
|
[showDivider]="!isLastInGroup"
|
|
1301
1286
|
[class.destructive]="actionItem.destructive"
|
|
1302
1287
|
(itemClick)="selectAction(actionItem.action)"
|
|
1303
1288
|
>
|
|
1304
|
-
<ds-icon
|
|
1305
|
-
action-icon
|
|
1306
|
-
[name]="actionItem.icon"
|
|
1307
|
-
size="20px"
|
|
1308
|
-
[class.destructive-icon]="actionItem.destructive"
|
|
1309
|
-
/>
|
|
1289
|
+
<ds-icon action-icon [name]="actionItem.icon" size="20px" [class.destructive-icon]="actionItem.destructive" />
|
|
1310
1290
|
</ds-mobile-action-list-item>
|
|
1311
1291
|
}
|
|
1312
1292
|
</div>
|
|
@@ -1317,36 +1297,25 @@ class DsMobileActionsBottomSheetComponent {
|
|
|
1317
1297
|
} }
|
|
1318
1298
|
</div>
|
|
1319
1299
|
</ds-mobile-bottom-sheet-wrapper>
|
|
1320
|
-
`, isInline: true, styles: [":host{display:block;height:auto}.actions-list{display:flex;flex-direction:column;padding-top:16px}.action-group{display:flex;flex-direction:column;padding:0 16px}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(
|
|
1300
|
+
`, isInline: true, styles: [":host{display:block;height:auto}.actions-list{display:flex;flex-direction:column;padding-top:16px}.action-group{display:flex;flex-direction:column;padding:0 16px}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(--color-background-neutral-secondary, #f5f5f5)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .list-item-inner:before{z-index:0!important}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-leading,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-main,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-trailing{position:relative;z-index:1}ds-mobile-action-list-item:last-of-type{--divider-display: none}ds-mobile-action-list-item.destructive{--text-color-default-primary: var(--color-error-base, #ef4444)}.destructive-icon{color:var(--color-error-base, #ef4444)}.action-group-divider{height:1px;background:var(--color-border-subtle, #e5e5e5);margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileActionListItemComponent, selector: "ds-mobile-action-list-item", inputs: ["title", "showDivider", "disabled"], outputs: ["itemClick"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper" }] });
|
|
1321
1301
|
}
|
|
1322
1302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileActionsBottomSheetComponent, decorators: [{
|
|
1323
1303
|
type: Component,
|
|
1324
|
-
args: [{ selector: 'ds-mobile-actions-bottom-sheet', standalone: true, imports: [
|
|
1325
|
-
CommonModule,
|
|
1326
|
-
DsIconComponent,
|
|
1327
|
-
DsMobileActionListItemComponent,
|
|
1328
|
-
DsMobileBottomSheetWrapperComponent,
|
|
1329
|
-
], template: `
|
|
1304
|
+
args: [{ selector: 'ds-mobile-actions-bottom-sheet', standalone: true, imports: [CommonModule, DsIconComponent, DsMobileActionListItemComponent, DsMobileBottomSheetWrapperComponent], template: `
|
|
1330
1305
|
<ds-mobile-bottom-sheet-wrapper>
|
|
1331
1306
|
<!-- Actions List -->
|
|
1332
1307
|
<div class="actions-list">
|
|
1333
1308
|
@for (group of actionGroups(); track $index; let isLast = $last) {
|
|
1334
1309
|
<!-- Action Group -->
|
|
1335
1310
|
<div class="action-group">
|
|
1336
|
-
@for (actionItem of group.actions; track actionItem.action; let
|
|
1337
|
-
isLastInGroup = $last) {
|
|
1311
|
+
@for (actionItem of group.actions; track actionItem.action; let isLastInGroup = $last) {
|
|
1338
1312
|
<ds-mobile-action-list-item
|
|
1339
1313
|
[title]="actionItem.title"
|
|
1340
1314
|
[showDivider]="!isLastInGroup"
|
|
1341
1315
|
[class.destructive]="actionItem.destructive"
|
|
1342
1316
|
(itemClick)="selectAction(actionItem.action)"
|
|
1343
1317
|
>
|
|
1344
|
-
<ds-icon
|
|
1345
|
-
action-icon
|
|
1346
|
-
[name]="actionItem.icon"
|
|
1347
|
-
size="20px"
|
|
1348
|
-
[class.destructive-icon]="actionItem.destructive"
|
|
1349
|
-
/>
|
|
1318
|
+
<ds-icon action-icon [name]="actionItem.icon" size="20px" [class.destructive-icon]="actionItem.destructive" />
|
|
1350
1319
|
</ds-mobile-action-list-item>
|
|
1351
1320
|
}
|
|
1352
1321
|
</div>
|
|
@@ -1357,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1357
1326
|
} }
|
|
1358
1327
|
</div>
|
|
1359
1328
|
</ds-mobile-bottom-sheet-wrapper>
|
|
1360
|
-
`, styles: [":host{display:block;height:auto}.actions-list{display:flex;flex-direction:column;padding-top:16px}.action-group{display:flex;flex-direction:column;padding:0 16px}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(
|
|
1329
|
+
`, styles: [":host{display:block;height:auto}.actions-list{display:flex;flex-direction:column;padding-top:16px}.action-group{display:flex;flex-direction:column;padding:0 16px}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(--color-background-neutral-secondary, #f5f5f5)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .list-item-inner:before{z-index:0!important}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-leading,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-main,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-trailing{position:relative;z-index:1}ds-mobile-action-list-item:last-of-type{--divider-display: none}ds-mobile-action-list-item.destructive{--text-color-default-primary: var(--color-error-base, #ef4444)}.destructive-icon{color:var(--color-error-base, #ef4444)}.action-group-divider{height:1px;background:var(--color-border-subtle, #e5e5e5);margin:8px 0}\n"] }]
|
|
1361
1330
|
}], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { customActionGroups: [{
|
|
1362
1331
|
type: Input
|
|
1363
1332
|
}], isOwnContent: [{
|
|
@@ -2010,8 +1979,7 @@ class DsMobileProfileActionsSheetComponent {
|
|
|
2010
1979
|
* Check if language has changed
|
|
2011
1980
|
*/
|
|
2012
1981
|
hasLanguageChanged = computed(() => {
|
|
2013
|
-
return
|
|
2014
|
-
this.selectedLanguage() !== '');
|
|
1982
|
+
return this.selectedLanguage() !== this.initialLanguage && this.selectedLanguage() !== '';
|
|
2015
1983
|
}, ...(ngDevMode ? [{ debugName: "hasLanguageChanged" }] : []));
|
|
2016
1984
|
/**
|
|
2017
1985
|
* Available languages for selection
|
|
@@ -2131,9 +2099,7 @@ class DsMobileProfileActionsSheetComponent {
|
|
|
2131
2099
|
if (!this.viewContainer || !this.sheetWrapper)
|
|
2132
2100
|
return;
|
|
2133
2101
|
const container = this.viewContainer.nativeElement;
|
|
2134
|
-
const activeView = this.currentView() === 'main'
|
|
2135
|
-
? container.querySelector('.main-view')
|
|
2136
|
-
: container.querySelector('.language-view');
|
|
2102
|
+
const activeView = this.currentView() === 'main' ? container.querySelector('.main-view') : container.querySelector('.language-view');
|
|
2137
2103
|
if (activeView instanceof HTMLElement) {
|
|
2138
2104
|
const height = activeView.scrollHeight;
|
|
2139
2105
|
this.containerHeight.set(height);
|
|
@@ -2222,50 +2188,30 @@ class DsMobileProfileActionsSheetComponent {
|
|
|
2222
2188
|
<ds-mobile-bottom-sheet-wrapper>
|
|
2223
2189
|
<div class="profile-sheet-content" #sheetWrapper>
|
|
2224
2190
|
<!-- View Container with CSS Animation -->
|
|
2225
|
-
<div
|
|
2226
|
-
class="view-container"
|
|
2227
|
-
#viewContainer
|
|
2228
|
-
[class.show-language]="currentView() === 'language'"
|
|
2229
|
-
[style.height.px]="containerHeight()"
|
|
2230
|
-
>
|
|
2191
|
+
<div class="view-container" #viewContainer [class.show-language]="currentView() === 'language'" [style.height.px]="containerHeight()">
|
|
2231
2192
|
<!-- Main Actions View -->
|
|
2232
2193
|
<div class="view main-view">
|
|
2233
2194
|
<div class="actions-list">
|
|
2234
2195
|
@for (group of actionGroups; track $index; let isLast = $last) {
|
|
2235
2196
|
<!-- Action Group -->
|
|
2236
2197
|
<div class="action-group">
|
|
2237
|
-
@for (actionItem of group.actions; track actionItem.action; let
|
|
2238
|
-
isLastInGroup = $last) {
|
|
2198
|
+
@for (actionItem of group.actions; track actionItem.action; let isLastInGroup = $last) {
|
|
2239
2199
|
<ds-mobile-action-list-item
|
|
2240
2200
|
[title]="actionItem.title"
|
|
2241
2201
|
[showDivider]="!isLastInGroup"
|
|
2242
2202
|
[class.destructive]="actionItem.destructive"
|
|
2243
2203
|
(itemClick)="handleActionClick(actionItem)"
|
|
2244
2204
|
>
|
|
2245
|
-
<ds-icon
|
|
2246
|
-
action-icon
|
|
2247
|
-
[name]="actionItem.icon"
|
|
2248
|
-
size="20px"
|
|
2249
|
-
[class.destructive-icon]="actionItem.destructive"
|
|
2250
|
-
/>
|
|
2205
|
+
<ds-icon action-icon [name]="actionItem.icon" size="20px" [class.destructive-icon]="actionItem.destructive" />
|
|
2251
2206
|
|
|
2252
|
-
@if (actionItem.showChevron || actionItem.subtitle ||
|
|
2253
|
-
actionItem.flagIcon) {
|
|
2207
|
+
@if (actionItem.showChevron || actionItem.subtitle || actionItem.flagIcon) {
|
|
2254
2208
|
<div content-trailing class="trailing-content">
|
|
2255
2209
|
@if (actionItem.flagIcon) {
|
|
2256
|
-
<img
|
|
2257
|
-
[src]="actionItem.flagIcon"
|
|
2258
|
-
[alt]="actionItem.title + ' flag'"
|
|
2259
|
-
class="subtitle-flag"
|
|
2260
|
-
/>
|
|
2210
|
+
<img [src]="actionItem.flagIcon" [alt]="actionItem.title + ' flag'" class="subtitle-flag" />
|
|
2261
2211
|
} @if (actionItem.subtitle) {
|
|
2262
2212
|
<span class="subtitle">{{ actionItem.subtitle }}</span>
|
|
2263
2213
|
} @if (actionItem.showChevron) {
|
|
2264
|
-
<ds-icon
|
|
2265
|
-
name="remixArrowRightSLine"
|
|
2266
|
-
size="20px"
|
|
2267
|
-
class="chevron-icon"
|
|
2268
|
-
/>
|
|
2214
|
+
<ds-icon name="remixArrowRightSLine" size="20px" class="chevron-icon" />
|
|
2269
2215
|
}
|
|
2270
2216
|
</div>
|
|
2271
2217
|
}
|
|
@@ -2286,51 +2232,25 @@ class DsMobileProfileActionsSheetComponent {
|
|
|
2286
2232
|
<ion-header>
|
|
2287
2233
|
<ion-toolbar>
|
|
2288
2234
|
<ion-buttons slot="start">
|
|
2289
|
-
<ds-button
|
|
2290
|
-
variant="secondary"
|
|
2291
|
-
size="sm"
|
|
2292
|
-
(clicked)="navigateBack()"
|
|
2293
|
-
>
|
|
2294
|
-
Tilbage
|
|
2295
|
-
</ds-button>
|
|
2235
|
+
<ds-button variant="secondary" size="sm" (clicked)="navigateBack()"> Tilbage </ds-button>
|
|
2296
2236
|
</ion-buttons>
|
|
2297
2237
|
<ion-title>Sprog</ion-title>
|
|
2298
2238
|
<ion-buttons slot="end">
|
|
2299
|
-
<ds-button
|
|
2300
|
-
variant="primary"
|
|
2301
|
-
size="sm"
|
|
2302
|
-
[disabled]="!hasLanguageChanged()"
|
|
2303
|
-
(clicked)="confirmLanguageSelection()"
|
|
2304
|
-
>
|
|
2305
|
-
Færdig
|
|
2306
|
-
</ds-button>
|
|
2239
|
+
<ds-button variant="primary" size="sm" [disabled]="!hasLanguageChanged()" (clicked)="confirmLanguageSelection()"> Færdig </ds-button>
|
|
2307
2240
|
</ion-buttons>
|
|
2308
2241
|
</ion-toolbar>
|
|
2309
2242
|
</ion-header>
|
|
2310
2243
|
|
|
2311
2244
|
<!-- Language Options -->
|
|
2312
2245
|
<div class="language-list">
|
|
2313
|
-
@for (language of availableLanguages; track language.code; let
|
|
2314
|
-
|
|
2315
|
-
<ds-mobile-action-list-item
|
|
2316
|
-
[title]="language.nativeName"
|
|
2317
|
-
[showDivider]="!isLast"
|
|
2318
|
-
(itemClick)="selectLanguage(language.code)"
|
|
2319
|
-
>
|
|
2246
|
+
@for (language of availableLanguages; track language.code; let isLast = $last) {
|
|
2247
|
+
<ds-mobile-action-list-item [title]="language.nativeName" [showDivider]="!isLast" (itemClick)="selectLanguage(language.code)">
|
|
2320
2248
|
<!-- Country Flag -->
|
|
2321
|
-
<img
|
|
2322
|
-
action-icon
|
|
2323
|
-
[src]="language.flagIcon"
|
|
2324
|
-
[alt]="language.englishName + ' flag'"
|
|
2325
|
-
class="language-flag"
|
|
2326
|
-
/>
|
|
2249
|
+
<img action-icon [src]="language.flagIcon" [alt]="language.englishName + ' flag'" class="language-flag" />
|
|
2327
2250
|
|
|
2328
2251
|
<!-- Radio Indicator in trailing slot -->
|
|
2329
2252
|
<div content-trailing class="radio-wrapper">
|
|
2330
|
-
<div
|
|
2331
|
-
class="radio-indicator"
|
|
2332
|
-
[class.radio-checked]="language.code === selectedLanguage()"
|
|
2333
|
-
>
|
|
2253
|
+
<div class="radio-indicator" [class.radio-checked]="language.code === selectedLanguage()">
|
|
2334
2254
|
<div class="radio-inner"></div>
|
|
2335
2255
|
</div>
|
|
2336
2256
|
</div>
|
|
@@ -2341,68 +2261,38 @@ class DsMobileProfileActionsSheetComponent {
|
|
|
2341
2261
|
</div>
|
|
2342
2262
|
</div>
|
|
2343
2263
|
</ds-mobile-bottom-sheet-wrapper>
|
|
2344
|
-
`, isInline: true, styles: [":host{display:block;height:auto}.profile-sheet-content{overflow:hidden;width:100%}.view-container{display:grid;grid-template-columns:50% 50%;width:200%;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .15s ease-in-out;overflow:hidden}.view-container.show-language{transform:translate(-50%)}.view{width:100%}.main-view{padding-top:16px}.actions-list{display:flex;flex-direction:column}.action-group{display:flex;flex-direction:column;padding:0 16px}.language-view{display:flex;flex-direction:column}ion-header{box-shadow:none}:host ::ng-deep .header-ios ion-toolbar:last-of-type{--border-width: 0 !important}ion-toolbar{--background: var(--color-background-neutral-primary, #ffffff);--border-width: 0 !important;--border-color: var(--color-border-default, #e5e7eb) !important;--padding-top: 12px;--padding-bottom: 8px;--min-height: 56px;border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-toolbar::part(native){border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:22px;letter-spacing:-.4px;color:var(--color-text-primary, #1a1a1a)}ion-buttons[slot=start] ds-button{--border-radius: 100px}ion-buttons[slot=start] ds-button::ng-deep button{border-radius:100px}ion-buttons[slot=end] ds-button{--border-radius: 100px}ion-buttons[slot=end] ds-button::ng-deep button{border-radius:100px}.language-list{padding:8px 16px}.language-flag{width:24px;height:24px;object-fit:cover}.radio-wrapper{display:flex;align-items:center;justify-content:center}.radio-indicator{width:20px;height:20px;border:2px solid var(--color-border-default, #d1d5db);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.radio-indicator.radio-checked{border-color:var(--color-brand-base, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-brand-base, #7c3aed)}.trailing-content{display:flex;align-items:center;gap:8px}.subtitle-flag{width:16px;height:16px;object-fit:cover;border-radius:2px}.subtitle{font-size:15px;color:var(--color-text-subtle, #6b7280);line-height:20px}.chevron-icon{color:var(--color-text-secondary, #737373)}.check-icon{color:var(--color-primary-base, #7c3aed)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(
|
|
2264
|
+
`, isInline: true, styles: [":host{display:block;height:auto}.profile-sheet-content{overflow:hidden;width:100%}.view-container{display:grid;grid-template-columns:50% 50%;width:200%;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .15s ease-in-out;overflow:hidden}.view-container.show-language{transform:translate(-50%)}.view{width:100%}.main-view{padding-top:16px}.actions-list{display:flex;flex-direction:column}.action-group{display:flex;flex-direction:column;padding:0 16px}.language-view{display:flex;flex-direction:column}ion-header{box-shadow:none}:host ::ng-deep .header-ios ion-toolbar:last-of-type{--border-width: 0 !important}ion-toolbar{--background: var(--color-background-neutral-primary, #ffffff);--border-width: 0 !important;--border-color: var(--color-border-default, #e5e7eb) !important;--padding-top: 12px;--padding-bottom: 8px;--min-height: 56px;border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-toolbar::part(native){border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:22px;letter-spacing:-.4px;color:var(--color-text-primary, #1a1a1a)}ion-buttons[slot=start] ds-button{--border-radius: 100px}ion-buttons[slot=start] ds-button::ng-deep button{border-radius:100px}ion-buttons[slot=end] ds-button{--border-radius: 100px}ion-buttons[slot=end] ds-button::ng-deep button{border-radius:100px}.language-list{padding:8px 16px}.language-flag{width:24px;height:24px;object-fit:cover}.radio-wrapper{display:flex;align-items:center;justify-content:center}.radio-indicator{width:20px;height:20px;border:2px solid var(--color-border-default, #d1d5db);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.radio-indicator.radio-checked{border-color:var(--color-brand-base, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-brand-base, #7c3aed)}.trailing-content{display:flex;align-items:center;gap:8px}.subtitle-flag{width:16px;height:16px;object-fit:cover;border-radius:2px}.subtitle{font-size:15px;color:var(--color-text-subtle, #6b7280);line-height:20px}.chevron-icon{color:var(--color-text-secondary, #737373)}.check-icon{color:var(--color-primary-base, #7c3aed)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(--color-background-neutral-secondary, #f5f5f5)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .list-item-inner:before{z-index:0!important}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-leading,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-main,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-trailing{position:relative;z-index:1}ds-mobile-action-list-item.destructive{--text-color-default-primary: var(--color-error-base, #ef4444)}.destructive-icon{color:var(--color-error-base, #ef4444)}.action-group-divider{height:1px;background:var(--color-border-subtle, #e5e5e5);margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileActionListItemComponent, selector: "ds-mobile-action-list-item", inputs: ["title", "showDivider", "disabled"], outputs: ["itemClick"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper" }] });
|
|
2345
2265
|
}
|
|
2346
2266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileProfileActionsSheetComponent, decorators: [{
|
|
2347
2267
|
type: Component,
|
|
2348
|
-
args: [{ selector: 'ds-mobile-profile-actions-sheet', standalone: true, imports: [
|
|
2349
|
-
CommonModule,
|
|
2350
|
-
DsIconComponent,
|
|
2351
|
-
DsMobileActionListItemComponent,
|
|
2352
|
-
DsButtonComponent,
|
|
2353
|
-
IonHeader,
|
|
2354
|
-
IonToolbar,
|
|
2355
|
-
IonTitle,
|
|
2356
|
-
IonButtons,
|
|
2357
|
-
DsMobileBottomSheetWrapperComponent,
|
|
2358
|
-
], template: `
|
|
2268
|
+
args: [{ selector: 'ds-mobile-profile-actions-sheet', standalone: true, imports: [CommonModule, DsIconComponent, DsMobileActionListItemComponent, DsButtonComponent, IonHeader, IonToolbar, IonTitle, IonButtons, DsMobileBottomSheetWrapperComponent], template: `
|
|
2359
2269
|
<ds-mobile-bottom-sheet-wrapper>
|
|
2360
2270
|
<div class="profile-sheet-content" #sheetWrapper>
|
|
2361
2271
|
<!-- View Container with CSS Animation -->
|
|
2362
|
-
<div
|
|
2363
|
-
class="view-container"
|
|
2364
|
-
#viewContainer
|
|
2365
|
-
[class.show-language]="currentView() === 'language'"
|
|
2366
|
-
[style.height.px]="containerHeight()"
|
|
2367
|
-
>
|
|
2272
|
+
<div class="view-container" #viewContainer [class.show-language]="currentView() === 'language'" [style.height.px]="containerHeight()">
|
|
2368
2273
|
<!-- Main Actions View -->
|
|
2369
2274
|
<div class="view main-view">
|
|
2370
2275
|
<div class="actions-list">
|
|
2371
2276
|
@for (group of actionGroups; track $index; let isLast = $last) {
|
|
2372
2277
|
<!-- Action Group -->
|
|
2373
2278
|
<div class="action-group">
|
|
2374
|
-
@for (actionItem of group.actions; track actionItem.action; let
|
|
2375
|
-
isLastInGroup = $last) {
|
|
2279
|
+
@for (actionItem of group.actions; track actionItem.action; let isLastInGroup = $last) {
|
|
2376
2280
|
<ds-mobile-action-list-item
|
|
2377
2281
|
[title]="actionItem.title"
|
|
2378
2282
|
[showDivider]="!isLastInGroup"
|
|
2379
2283
|
[class.destructive]="actionItem.destructive"
|
|
2380
2284
|
(itemClick)="handleActionClick(actionItem)"
|
|
2381
2285
|
>
|
|
2382
|
-
<ds-icon
|
|
2383
|
-
action-icon
|
|
2384
|
-
[name]="actionItem.icon"
|
|
2385
|
-
size="20px"
|
|
2386
|
-
[class.destructive-icon]="actionItem.destructive"
|
|
2387
|
-
/>
|
|
2286
|
+
<ds-icon action-icon [name]="actionItem.icon" size="20px" [class.destructive-icon]="actionItem.destructive" />
|
|
2388
2287
|
|
|
2389
|
-
@if (actionItem.showChevron || actionItem.subtitle ||
|
|
2390
|
-
actionItem.flagIcon) {
|
|
2288
|
+
@if (actionItem.showChevron || actionItem.subtitle || actionItem.flagIcon) {
|
|
2391
2289
|
<div content-trailing class="trailing-content">
|
|
2392
2290
|
@if (actionItem.flagIcon) {
|
|
2393
|
-
<img
|
|
2394
|
-
[src]="actionItem.flagIcon"
|
|
2395
|
-
[alt]="actionItem.title + ' flag'"
|
|
2396
|
-
class="subtitle-flag"
|
|
2397
|
-
/>
|
|
2291
|
+
<img [src]="actionItem.flagIcon" [alt]="actionItem.title + ' flag'" class="subtitle-flag" />
|
|
2398
2292
|
} @if (actionItem.subtitle) {
|
|
2399
2293
|
<span class="subtitle">{{ actionItem.subtitle }}</span>
|
|
2400
2294
|
} @if (actionItem.showChevron) {
|
|
2401
|
-
<ds-icon
|
|
2402
|
-
name="remixArrowRightSLine"
|
|
2403
|
-
size="20px"
|
|
2404
|
-
class="chevron-icon"
|
|
2405
|
-
/>
|
|
2295
|
+
<ds-icon name="remixArrowRightSLine" size="20px" class="chevron-icon" />
|
|
2406
2296
|
}
|
|
2407
2297
|
</div>
|
|
2408
2298
|
}
|
|
@@ -2423,51 +2313,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2423
2313
|
<ion-header>
|
|
2424
2314
|
<ion-toolbar>
|
|
2425
2315
|
<ion-buttons slot="start">
|
|
2426
|
-
<ds-button
|
|
2427
|
-
variant="secondary"
|
|
2428
|
-
size="sm"
|
|
2429
|
-
(clicked)="navigateBack()"
|
|
2430
|
-
>
|
|
2431
|
-
Tilbage
|
|
2432
|
-
</ds-button>
|
|
2316
|
+
<ds-button variant="secondary" size="sm" (clicked)="navigateBack()"> Tilbage </ds-button>
|
|
2433
2317
|
</ion-buttons>
|
|
2434
2318
|
<ion-title>Sprog</ion-title>
|
|
2435
2319
|
<ion-buttons slot="end">
|
|
2436
|
-
<ds-button
|
|
2437
|
-
variant="primary"
|
|
2438
|
-
size="sm"
|
|
2439
|
-
[disabled]="!hasLanguageChanged()"
|
|
2440
|
-
(clicked)="confirmLanguageSelection()"
|
|
2441
|
-
>
|
|
2442
|
-
Færdig
|
|
2443
|
-
</ds-button>
|
|
2320
|
+
<ds-button variant="primary" size="sm" [disabled]="!hasLanguageChanged()" (clicked)="confirmLanguageSelection()"> Færdig </ds-button>
|
|
2444
2321
|
</ion-buttons>
|
|
2445
2322
|
</ion-toolbar>
|
|
2446
2323
|
</ion-header>
|
|
2447
2324
|
|
|
2448
2325
|
<!-- Language Options -->
|
|
2449
2326
|
<div class="language-list">
|
|
2450
|
-
@for (language of availableLanguages; track language.code; let
|
|
2451
|
-
|
|
2452
|
-
<ds-mobile-action-list-item
|
|
2453
|
-
[title]="language.nativeName"
|
|
2454
|
-
[showDivider]="!isLast"
|
|
2455
|
-
(itemClick)="selectLanguage(language.code)"
|
|
2456
|
-
>
|
|
2327
|
+
@for (language of availableLanguages; track language.code; let isLast = $last) {
|
|
2328
|
+
<ds-mobile-action-list-item [title]="language.nativeName" [showDivider]="!isLast" (itemClick)="selectLanguage(language.code)">
|
|
2457
2329
|
<!-- Country Flag -->
|
|
2458
|
-
<img
|
|
2459
|
-
action-icon
|
|
2460
|
-
[src]="language.flagIcon"
|
|
2461
|
-
[alt]="language.englishName + ' flag'"
|
|
2462
|
-
class="language-flag"
|
|
2463
|
-
/>
|
|
2330
|
+
<img action-icon [src]="language.flagIcon" [alt]="language.englishName + ' flag'" class="language-flag" />
|
|
2464
2331
|
|
|
2465
2332
|
<!-- Radio Indicator in trailing slot -->
|
|
2466
2333
|
<div content-trailing class="radio-wrapper">
|
|
2467
|
-
<div
|
|
2468
|
-
class="radio-indicator"
|
|
2469
|
-
[class.radio-checked]="language.code === selectedLanguage()"
|
|
2470
|
-
>
|
|
2334
|
+
<div class="radio-indicator" [class.radio-checked]="language.code === selectedLanguage()">
|
|
2471
2335
|
<div class="radio-inner"></div>
|
|
2472
2336
|
</div>
|
|
2473
2337
|
</div>
|
|
@@ -2478,7 +2342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2478
2342
|
</div>
|
|
2479
2343
|
</div>
|
|
2480
2344
|
</ds-mobile-bottom-sheet-wrapper>
|
|
2481
|
-
`, styles: [":host{display:block;height:auto}.profile-sheet-content{overflow:hidden;width:100%}.view-container{display:grid;grid-template-columns:50% 50%;width:200%;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .15s ease-in-out;overflow:hidden}.view-container.show-language{transform:translate(-50%)}.view{width:100%}.main-view{padding-top:16px}.actions-list{display:flex;flex-direction:column}.action-group{display:flex;flex-direction:column;padding:0 16px}.language-view{display:flex;flex-direction:column}ion-header{box-shadow:none}:host ::ng-deep .header-ios ion-toolbar:last-of-type{--border-width: 0 !important}ion-toolbar{--background: var(--color-background-neutral-primary, #ffffff);--border-width: 0 !important;--border-color: var(--color-border-default, #e5e7eb) !important;--padding-top: 12px;--padding-bottom: 8px;--min-height: 56px;border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-toolbar::part(native){border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:22px;letter-spacing:-.4px;color:var(--color-text-primary, #1a1a1a)}ion-buttons[slot=start] ds-button{--border-radius: 100px}ion-buttons[slot=start] ds-button::ng-deep button{border-radius:100px}ion-buttons[slot=end] ds-button{--border-radius: 100px}ion-buttons[slot=end] ds-button::ng-deep button{border-radius:100px}.language-list{padding:8px 16px}.language-flag{width:24px;height:24px;object-fit:cover}.radio-wrapper{display:flex;align-items:center;justify-content:center}.radio-indicator{width:20px;height:20px;border:2px solid var(--color-border-default, #d1d5db);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.radio-indicator.radio-checked{border-color:var(--color-brand-base, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-brand-base, #7c3aed)}.trailing-content{display:flex;align-items:center;gap:8px}.subtitle-flag{width:16px;height:16px;object-fit:cover;border-radius:2px}.subtitle{font-size:15px;color:var(--color-text-subtle, #6b7280);line-height:20px}.chevron-icon{color:var(--color-text-secondary, #737373)}.check-icon{color:var(--color-primary-base, #7c3aed)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(
|
|
2345
|
+
`, styles: [":host{display:block;height:auto}.profile-sheet-content{overflow:hidden;width:100%}.view-container{display:grid;grid-template-columns:50% 50%;width:200%;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .15s ease-in-out;overflow:hidden}.view-container.show-language{transform:translate(-50%)}.view{width:100%}.main-view{padding-top:16px}.actions-list{display:flex;flex-direction:column}.action-group{display:flex;flex-direction:column;padding:0 16px}.language-view{display:flex;flex-direction:column}ion-header{box-shadow:none}:host ::ng-deep .header-ios ion-toolbar:last-of-type{--border-width: 0 !important}ion-toolbar{--background: var(--color-background-neutral-primary, #ffffff);--border-width: 0 !important;--border-color: var(--color-border-default, #e5e7eb) !important;--padding-top: 12px;--padding-bottom: 8px;--min-height: 56px;border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-toolbar::part(native){border-bottom:1px solid var(--color-border-default, #e5e7eb)!important}ion-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:22px;letter-spacing:-.4px;color:var(--color-text-primary, #1a1a1a)}ion-buttons[slot=start] ds-button{--border-radius: 100px}ion-buttons[slot=start] ds-button::ng-deep button{border-radius:100px}ion-buttons[slot=end] ds-button{--border-radius: 100px}ion-buttons[slot=end] ds-button::ng-deep button{border-radius:100px}.language-list{padding:8px 16px}.language-flag{width:24px;height:24px;object-fit:cover}.radio-wrapper{display:flex;align-items:center;justify-content:center}.radio-indicator{width:20px;height:20px;border:2px solid var(--color-border-default, #d1d5db);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.radio-indicator.radio-checked{border-color:var(--color-brand-base, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-brand-base, #7c3aed)}.trailing-content{display:flex;align-items:center;gap:8px}.subtitle-flag{width:16px;height:16px;object-fit:cover;border-radius:2px}.subtitle{font-size:15px;color:var(--color-text-subtle, #6b7280);line-height:20px}.chevron-icon{color:var(--color-text-secondary, #737373)}.check-icon{color:var(--color-primary-base, #7c3aed)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item{--color-background-primary: transparent;--color-background-neutral-primary-hover: var(--color-background-neutral-secondary, #f5f5f5)}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .list-item-inner:before{z-index:0!important}::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-leading,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-main,::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-trailing{position:relative;z-index:1}ds-mobile-action-list-item.destructive{--text-color-default-primary: var(--color-error-base, #ef4444)}.destructive-icon{color:var(--color-error-base, #ef4444)}.action-group-divider{height:1px;background:var(--color-border-subtle, #e5e5e5);margin:8px 0}\n"] }]
|
|
2482
2346
|
}], ctorParameters: () => [{ type: i1.ModalController }, { type: i0.Injector }], propDecorators: { actionGroups: [{
|
|
2483
2347
|
type: Input
|
|
2484
2348
|
}], currentLanguage: [{
|
|
@@ -3210,9 +3074,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
3210
3074
|
userService = inject(UserService);
|
|
3211
3075
|
whitelabelDemoModal = inject(WhitelabelDemoModalService);
|
|
3212
3076
|
// Computed property to check if running on native platform
|
|
3213
|
-
isNativePlatform = computed(() => this.platform.is('ios') ||
|
|
3214
|
-
this.platform.is('android') ||
|
|
3215
|
-
this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
|
|
3077
|
+
isNativePlatform = computed(() => this.platform.is('ios') || this.platform.is('android') || this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
|
|
3216
3078
|
// Inputs - Title
|
|
3217
3079
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : [])); // For fixed header title
|
|
3218
3080
|
headerTitle = input('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : [])); // Optional different title for expandable header
|
|
@@ -3372,8 +3234,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
3372
3234
|
const result = await sheet.onWillDismiss();
|
|
3373
3235
|
if (result.data?.action) {
|
|
3374
3236
|
// Handle appearance/whitelabel-demo action internally (works on all pages)
|
|
3375
|
-
if (result.data.action === 'appearance' ||
|
|
3376
|
-
result.data.action === 'whitelabel-demo') {
|
|
3237
|
+
if (result.data.action === 'appearance' || result.data.action === 'whitelabel-demo') {
|
|
3377
3238
|
console.log('Opening whitelabel demo...');
|
|
3378
3239
|
// Small delay to ensure bottom sheet is fully dismissed
|
|
3379
3240
|
setTimeout(async () => {
|
|
@@ -3480,19 +3341,8 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
3480
3341
|
|
|
3481
3342
|
<!-- Pull to refresh (only on native iOS/Android) -->
|
|
3482
3343
|
@if (showRefresh() && isNativePlatform()) {
|
|
3483
|
-
<ion-refresher
|
|
3484
|
-
|
|
3485
|
-
(ionRefresh)="handleRefresh($event)"
|
|
3486
|
-
[pullFactor]="0.4"
|
|
3487
|
-
[pullMin]="80"
|
|
3488
|
-
[pullMax]="240"
|
|
3489
|
-
closeDuration="600ms"
|
|
3490
|
-
>
|
|
3491
|
-
<ion-refresher-content
|
|
3492
|
-
pullingIcon="remixArrowDownS"
|
|
3493
|
-
refreshingSpinner="crescent"
|
|
3494
|
-
>
|
|
3495
|
-
</ion-refresher-content>
|
|
3344
|
+
<ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.4" [pullMin]="80" [pullMax]="240" closeDuration="600ms">
|
|
3345
|
+
<ion-refresher-content pullingIcon="remixArrowDownS" refreshingSpinner="crescent"> </ion-refresher-content>
|
|
3496
3346
|
</ion-refresher>
|
|
3497
3347
|
}
|
|
3498
3348
|
|
|
@@ -3525,17 +3375,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
3525
3375
|
}
|
|
3526
3376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
|
|
3527
3377
|
type: Component,
|
|
3528
|
-
args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [
|
|
3529
|
-
CommonModule,
|
|
3530
|
-
IonHeader,
|
|
3531
|
-
IonToolbar,
|
|
3532
|
-
IonTitle,
|
|
3533
|
-
IonContent,
|
|
3534
|
-
IonRefresher,
|
|
3535
|
-
IonRefresherContent,
|
|
3536
|
-
DsAvatarComponent,
|
|
3537
|
-
DsLogoComponent,
|
|
3538
|
-
], template: `
|
|
3378
|
+
args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent], template: `
|
|
3539
3379
|
<!-- Fixed header at top -->
|
|
3540
3380
|
<ion-header>
|
|
3541
3381
|
<ion-toolbar>
|
|
@@ -3575,19 +3415,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3575
3415
|
|
|
3576
3416
|
<!-- Pull to refresh (only on native iOS/Android) -->
|
|
3577
3417
|
@if (showRefresh() && isNativePlatform()) {
|
|
3578
|
-
<ion-refresher
|
|
3579
|
-
|
|
3580
|
-
(ionRefresh)="handleRefresh($event)"
|
|
3581
|
-
[pullFactor]="0.4"
|
|
3582
|
-
[pullMin]="80"
|
|
3583
|
-
[pullMax]="240"
|
|
3584
|
-
closeDuration="600ms"
|
|
3585
|
-
>
|
|
3586
|
-
<ion-refresher-content
|
|
3587
|
-
pullingIcon="remixArrowDownS"
|
|
3588
|
-
refreshingSpinner="crescent"
|
|
3589
|
-
>
|
|
3590
|
-
</ion-refresher-content>
|
|
3418
|
+
<ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.4" [pullMin]="80" [pullMax]="240" closeDuration="600ms">
|
|
3419
|
+
<ion-refresher-content pullingIcon="remixArrowDownS" refreshingSpinner="crescent"> </ion-refresher-content>
|
|
3591
3420
|
</ion-refresher>
|
|
3592
3421
|
}
|
|
3593
3422
|
|
|
@@ -7760,9 +7589,7 @@ class DsMobileTabBarComponent {
|
|
|
7760
7589
|
ngOnInit() {
|
|
7761
7590
|
// Listen to router events to detect active tab from URL
|
|
7762
7591
|
if (this.router) {
|
|
7763
|
-
this.routerSubscription = this.router.events
|
|
7764
|
-
.pipe(filter((event) => event instanceof NavigationEnd))
|
|
7765
|
-
.subscribe((event) => {
|
|
7592
|
+
this.routerSubscription = this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
|
|
7766
7593
|
const url = event.urlAfterRedirects || event.url;
|
|
7767
7594
|
// Extract the route segment (e.g., /tab-bar-test/home -> home)
|
|
7768
7595
|
const segments = url.split('/').filter((s) => s);
|
|
@@ -7848,13 +7675,9 @@ class DsMobileTabBarComponent {
|
|
|
7848
7675
|
// console.log('[ds-mobile-tab-bar] updateSlot: After update, slot attribute:', verifySlot, 'slot property:', verifySlotProperty);
|
|
7849
7676
|
// Check computed styles
|
|
7850
7677
|
const computedStyle = window.getComputedStyle(tabBar);
|
|
7851
|
-
const parentComputedStyle = tabBar.parentElement
|
|
7852
|
-
? window.getComputedStyle(tabBar.parentElement)
|
|
7853
|
-
: null;
|
|
7678
|
+
const parentComputedStyle = tabBar.parentElement ? window.getComputedStyle(tabBar.parentElement) : null;
|
|
7854
7679
|
const ionTabsForStyles = tabBar.closest('ion-tabs');
|
|
7855
|
-
const ionTabsComputedStyle = ionTabsForStyles
|
|
7856
|
-
? window.getComputedStyle(ionTabsForStyles)
|
|
7857
|
-
: null;
|
|
7680
|
+
const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
|
|
7858
7681
|
// console.log('[ds-mobile-tab-bar] updateSlot: Computed styles:', {
|
|
7859
7682
|
// tabBar: {
|
|
7860
7683
|
// position: computedStyle.position,
|
|
@@ -7885,9 +7708,7 @@ class DsMobileTabBarComponent {
|
|
|
7885
7708
|
// Even if slot is correct, check computed styles to see why it's not at top
|
|
7886
7709
|
const computedStyle = window.getComputedStyle(tabBar);
|
|
7887
7710
|
const ionTabsForStyles = tabBar.closest('ion-tabs');
|
|
7888
|
-
const ionTabsComputedStyle = ionTabsForStyles
|
|
7889
|
-
? window.getComputedStyle(ionTabsForStyles)
|
|
7890
|
-
: null;
|
|
7711
|
+
const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
|
|
7891
7712
|
const tabBarRect = tabBar.getBoundingClientRect();
|
|
7892
7713
|
// Log key values directly so they're always visible
|
|
7893
7714
|
// console.log('[ds-mobile-tab-bar] KEY VALUES:');
|
|
@@ -7973,8 +7794,7 @@ class DsMobileTabBarComponent {
|
|
|
7973
7794
|
// console.log('[ds-mobile-tab-bar] setupSlotEnforcement: Setting up MutationObserver');
|
|
7974
7795
|
const observer = new MutationObserver((mutations) => {
|
|
7975
7796
|
mutations.forEach((mutation) => {
|
|
7976
|
-
if (mutation.type === 'attributes' &&
|
|
7977
|
-
mutation.attributeName === 'slot') {
|
|
7797
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'slot') {
|
|
7978
7798
|
const target = mutation.target;
|
|
7979
7799
|
const expectedSlot = this.isDesktop() ? 'top' : 'bottom';
|
|
7980
7800
|
// Check both host element and tab bar
|
|
@@ -8051,11 +7871,9 @@ class DsMobileTabBarComponent {
|
|
|
8051
7871
|
};
|
|
8052
7872
|
this.mutationObserver = new MutationObserver((mutations) => {
|
|
8053
7873
|
mutations.forEach((mutation) => {
|
|
8054
|
-
if (mutation.type === 'attributes' &&
|
|
8055
|
-
mutation.attributeName === 'title') {
|
|
7874
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
|
|
8056
7875
|
const target = mutation.target;
|
|
8057
|
-
if (target.tagName === 'ION-TAB-BUTTON' &&
|
|
8058
|
-
target.hasAttribute('title')) {
|
|
7876
|
+
if (target.tagName === 'ION-TAB-BUTTON' && target.hasAttribute('title')) {
|
|
8059
7877
|
target.removeAttribute('title');
|
|
8060
7878
|
}
|
|
8061
7879
|
}
|
|
@@ -8247,11 +8065,7 @@ class DsMobileTabBarComponent {
|
|
|
8247
8065
|
}
|
|
8248
8066
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileTabBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8249
8067
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: "tabs", avatarType: "avatarType", avatarInitials: "avatarInitials", avatarSrc: "avatarSrc", avatarIconName: "avatarIconName", profileMenuItems: "profileMenuItems" }, outputs: { avatarClick: "avatarClick", profileActionSelected: "profileActionSelected" }, ngImport: i0, template: `
|
|
8250
|
-
<ion-tab-bar
|
|
8251
|
-
[attr.slot]="isDesktop() ? 'top' : 'bottom'"
|
|
8252
|
-
class="ds-tab-bar"
|
|
8253
|
-
[class.ds-tab-bar--desktop]="isDesktop()"
|
|
8254
|
-
>
|
|
8068
|
+
<ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
|
|
8255
8069
|
<!-- Logo (desktop only, positioned via CSS) -->
|
|
8256
8070
|
<div class="ds-tab-bar__logo">
|
|
8257
8071
|
<ds-logo variant="mark" size="lg" />
|
|
@@ -8270,16 +8084,8 @@ class DsMobileTabBarComponent {
|
|
|
8270
8084
|
>
|
|
8271
8085
|
<div class="tab-icon-ripple"></div>
|
|
8272
8086
|
<div class="tab-icon-wrapper">
|
|
8273
|
-
<ds-icon
|
|
8274
|
-
|
|
8275
|
-
[size]="isDesktop() ? '20px' : '24px'"
|
|
8276
|
-
class="tab-icon-inactive"
|
|
8277
|
-
/>
|
|
8278
|
-
<ds-icon
|
|
8279
|
-
[name]="tab.iconActive"
|
|
8280
|
-
[size]="isDesktop() ? '20px' : '24px'"
|
|
8281
|
-
class="tab-icon-active"
|
|
8282
|
-
/>
|
|
8087
|
+
<ds-icon [name]="tab.icon" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-inactive" />
|
|
8088
|
+
<ds-icon [name]="tab.iconActive" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-active" />
|
|
8283
8089
|
</div>
|
|
8284
8090
|
<ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
|
|
8285
8091
|
</ion-tab-button>
|
|
@@ -8287,34 +8093,15 @@ class DsMobileTabBarComponent {
|
|
|
8287
8093
|
|
|
8288
8094
|
<!-- Avatar (desktop only, positioned via CSS) -->
|
|
8289
8095
|
<div class="ds-tab-bar__actions">
|
|
8290
|
-
<ds-avatar
|
|
8291
|
-
[size]="'md'"
|
|
8292
|
-
[type]="avatarType"
|
|
8293
|
-
[initials]="avatarInitials"
|
|
8294
|
-
[src]="avatarSrc"
|
|
8295
|
-
[iconName]="avatarIconName"
|
|
8296
|
-
(click)="handleAvatarClick()"
|
|
8297
|
-
/>
|
|
8096
|
+
<ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
|
|
8298
8097
|
</div>
|
|
8299
8098
|
</ion-tab-bar>
|
|
8300
8099
|
`, isInline: true, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-brand-secondary)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--ion-safe-area-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-brand-secondary);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-brand-base);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-brand-base);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-brand-base);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-secondary-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-secondary-content, white);color:rgba(var(--color-secondary-content-rgb, 255, 255, 255),.7);background:rgba(var(--color-secondary-content-rgb, 255, 255, 255),.1);position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-secondary-content, white);--color-selected: var(--color-secondary-content, white);color:var(--color-secondary-content, white)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-secondary-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-secondary-content, white);color:var(--color-secondary-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-secondary-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-background-brand);--color-selected: var(--color-primary-content, white);--color: var(--color-primary-content, white);color:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-primary-content, white);color:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-primary-content, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-primary-content, white);color:var(--color-primary-content, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-primary-content, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }] });
|
|
8301
8100
|
}
|
|
8302
8101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileTabBarComponent, decorators: [{
|
|
8303
8102
|
type: Component,
|
|
8304
|
-
args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [
|
|
8305
|
-
|
|
8306
|
-
IonTabBar,
|
|
8307
|
-
IonTabButton,
|
|
8308
|
-
IonLabel,
|
|
8309
|
-
DsIconComponent,
|
|
8310
|
-
DsAvatarComponent,
|
|
8311
|
-
DsLogoComponent,
|
|
8312
|
-
], template: `
|
|
8313
|
-
<ion-tab-bar
|
|
8314
|
-
[attr.slot]="isDesktop() ? 'top' : 'bottom'"
|
|
8315
|
-
class="ds-tab-bar"
|
|
8316
|
-
[class.ds-tab-bar--desktop]="isDesktop()"
|
|
8317
|
-
>
|
|
8103
|
+
args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule, IonTabBar, IonTabButton, IonLabel, DsIconComponent, DsAvatarComponent, DsLogoComponent], template: `
|
|
8104
|
+
<ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
|
|
8318
8105
|
<!-- Logo (desktop only, positioned via CSS) -->
|
|
8319
8106
|
<div class="ds-tab-bar__logo">
|
|
8320
8107
|
<ds-logo variant="mark" size="lg" />
|
|
@@ -8333,16 +8120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8333
8120
|
>
|
|
8334
8121
|
<div class="tab-icon-ripple"></div>
|
|
8335
8122
|
<div class="tab-icon-wrapper">
|
|
8336
|
-
<ds-icon
|
|
8337
|
-
|
|
8338
|
-
[size]="isDesktop() ? '20px' : '24px'"
|
|
8339
|
-
class="tab-icon-inactive"
|
|
8340
|
-
/>
|
|
8341
|
-
<ds-icon
|
|
8342
|
-
[name]="tab.iconActive"
|
|
8343
|
-
[size]="isDesktop() ? '20px' : '24px'"
|
|
8344
|
-
class="tab-icon-active"
|
|
8345
|
-
/>
|
|
8123
|
+
<ds-icon [name]="tab.icon" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-inactive" />
|
|
8124
|
+
<ds-icon [name]="tab.iconActive" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-active" />
|
|
8346
8125
|
</div>
|
|
8347
8126
|
<ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
|
|
8348
8127
|
</ion-tab-button>
|
|
@@ -8350,14 +8129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8350
8129
|
|
|
8351
8130
|
<!-- Avatar (desktop only, positioned via CSS) -->
|
|
8352
8131
|
<div class="ds-tab-bar__actions">
|
|
8353
|
-
<ds-avatar
|
|
8354
|
-
[size]="'md'"
|
|
8355
|
-
[type]="avatarType"
|
|
8356
|
-
[initials]="avatarInitials"
|
|
8357
|
-
[src]="avatarSrc"
|
|
8358
|
-
[iconName]="avatarIconName"
|
|
8359
|
-
(click)="handleAvatarClick()"
|
|
8360
|
-
/>
|
|
8132
|
+
<ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
|
|
8361
8133
|
</div>
|
|
8362
8134
|
</ion-tab-bar>
|
|
8363
8135
|
`, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-brand-secondary)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--ion-safe-area-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-brand-secondary);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-brand-base);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-brand-base);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-brand-base);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-secondary-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-secondary-content, white);color:rgba(var(--color-secondary-content-rgb, 255, 255, 255),.7);background:rgba(var(--color-secondary-content-rgb, 255, 255, 255),.1);position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-secondary-content, white);--color-selected: var(--color-secondary-content, white);color:var(--color-secondary-content, white)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-secondary-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-secondary-content, white);color:var(--color-secondary-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-secondary-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-background-brand);--color-selected: var(--color-primary-content, white);--color: var(--color-primary-content, white);color:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-primary-content, white);color:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-primary-content, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-primary-content, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-primary-content, white);color:var(--color-primary-content, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-primary-content, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"] }]
|