@propbinder/mobile-design 0.2.21 → 0.2.22

package/fesm2022/propbinder-mobile-design.mjs

@@ -1446,7 +1446,7 @@ class DsMobileBottomSheetWrapperComponent {
     <div class="bottom-sheet-wrapper">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{display:block;background:var(--color-background-neutral-primary, #ffffff);background:#fff}.bottom-sheet-wrapper{display:flex;flex-direction:column;background:var(--color-background-neutral-primary, #ffffff);background:#fff;padding-bottom:max(8px,calc(env(safe-area-inset-bottom) - 16px));overflow:hidden;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [":host{display:block;background:var(--color-background-neutral-primary, #ffffff);background:#fff}.bottom-sheet-wrapper{display:flex;flex-direction:column;background:var(--color-background-neutral-primary, #ffffff);background:#fff;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);overflow:hidden;width:100%;height:auto;min-height:unset}:host ::ng-deep .view-container:not(.is-animating){height:auto!important;min-height:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBottomSheetWrapperComponent, decorators: [{
             type: Component,
@@ -1454,7 +1454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <div class="bottom-sheet-wrapper">
       <ng-content></ng-content>
     </div>
-  `, styles: [":host{display:block;background:var(--color-background-neutral-primary, #ffffff);background:#fff}.bottom-sheet-wrapper{display:flex;flex-direction:column;background:var(--color-background-neutral-primary, #ffffff);background:#fff;padding-bottom:max(8px,calc(env(safe-area-inset-bottom) - 16px));overflow:hidden;width:100%}\n"] }]
+  `, styles: [":host{display:block;background:var(--color-background-neutral-primary, #ffffff);background:#fff}.bottom-sheet-wrapper{display:flex;flex-direction:column;background:var(--color-background-neutral-primary, #ffffff);background:#fff;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);overflow:hidden;width:100%;height:auto;min-height:unset}:host ::ng-deep .view-container:not(.is-animating){height:auto!important;min-height:0!important}\n"] }]
         }] });
 
 /**
@@ -2499,9 +2499,12 @@ class DsMobileProfileActionsSheetComponent {
     <ds-mobile-bottom-sheet-wrapper>
       <div class="profile-sheet-content" #sheetWrapper>
         <!-- View Container with CSS Animation -->
-        <div class="view-container" #viewContainer [class.show-language]="currentView() === 'language'" [style.height.px]="containerHeight()">
+        <div class="view-container" #viewContainer 
+             [class.show-language]="currentView() === 'language'" 
+             [class.is-animating]="isAnimating()"
+             [style.height.px]="isAnimating() ? containerHeight() : null">
           <!-- Main Actions View -->
-          <div class="view main-view">
+          <div class="view main-view" [class.active]="currentView() === 'main'">
             <div class="actions-list">
               @for (group of actionGroups; track $index; let isLast = $last) {
               <!-- Action Group -->
@@ -2538,7 +2541,7 @@ class DsMobileProfileActionsSheetComponent {
           </div>
 
           <!-- Language Selection View -->
-          <div class="view language-view">
+          <div class="view language-view" [class.active]="currentView() === 'language'">
             <!-- Header with back and done buttons -->
             <ion-header>
               <ion-toolbar>
@@ -2572,7 +2575,7 @@ class DsMobileProfileActionsSheetComponent {
         </div>
       </div>
     </ds-mobile-bottom-sheet-wrapper>
-  `, 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-accent, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-accent, #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" }] });
+  `, 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%}.view-container:not(.is-animating) .view:not(.active){height:0!important;overflow:hidden!important}.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-accent, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-accent, #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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileProfileActionsSheetComponent, decorators: [{
             type: Component,
@@ -2580,9 +2583,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <ds-mobile-bottom-sheet-wrapper>
       <div class="profile-sheet-content" #sheetWrapper>
         <!-- View Container with CSS Animation -->
-        <div class="view-container" #viewContainer [class.show-language]="currentView() === 'language'" [style.height.px]="containerHeight()">
+        <div class="view-container" #viewContainer 
+             [class.show-language]="currentView() === 'language'" 
+             [class.is-animating]="isAnimating()"
+             [style.height.px]="isAnimating() ? containerHeight() : null">
           <!-- Main Actions View -->
-          <div class="view main-view">
+          <div class="view main-view" [class.active]="currentView() === 'main'">
             <div class="actions-list">
               @for (group of actionGroups; track $index; let isLast = $last) {
               <!-- Action Group -->
@@ -2619,7 +2625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </div>
 
           <!-- Language Selection View -->
-          <div class="view language-view">
+          <div class="view language-view" [class.active]="currentView() === 'language'">
             <!-- Header with back and done buttons -->
             <ion-header>
               <ion-toolbar>
@@ -2653,7 +2659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </div>
       </div>
     </ds-mobile-bottom-sheet-wrapper>
-  `, 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-accent, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-accent, #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"] }]
+  `, 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%}.view-container:not(.is-animating) .view:not(.active){height:0!important;overflow:hidden!important}.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-accent, #7c3aed)}.radio-inner{width:10px;height:10px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-checked .radio-inner{background:var(--color-accent, #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"] }]
         }], ctorParameters: () => [{ type: i1.ModalController }, { type: i0.Injector }], propDecorators: { actionGroups: [{
                 type: Input
             }], currentLanguage: [{