feature: Modal redesign edits

projects/common/src/styles/mixins/_index.scss

@@ -18,4 +18,4 @@
 @forward './supports-backdrop-blur.mixin';
 @forward './transition.mixin';
 @forward './no-tap-highlight.mixin';
-@forward './line-clamp.mixin.scss';
+@forward './line-clamp.mixin';

projects/demo/src/app/pages/button-demo/button-demo.component.scss

@@ -6,6 +6,5 @@
 
   &__button {
     display: inline-flex;
-    flex: 1;
   }
 }

projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.html

@@ -1,3 +1,3 @@
 <div class="button-container">
-  <pupa-button class="button" flexible="true" kind="border"> Flexible button </pupa-button>
+  <pupa-button flexible="true" kind="border"> Flexible button </pupa-button>
 </div>

projects/demo/src/app/pages/button-demo/examples/example-5/example-5.component.scss

@@ -4,7 +4,3 @@
   display: flex;
   margin: 4rem 0;
 }
-
-.button {
-  flex: 1;
-}

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.html

@@ -6,11 +6,11 @@
   <pupa-modal-layout-body> Any content can be here </pupa-modal-layout-body>
 
   <pupa-modal-layout-footer>
-    <pupa-modal-layout-action class="layout-action" [value]="null">
-      <pupa-button flexible kind="border">Cancel</pupa-button>
+    <pupa-modal-layout-action [value]="null">
+      <pupa-button kind="border">Cancel</pupa-button>
     </pupa-modal-layout-action>
-    <pupa-modal-layout-action class="layout-action" [value]="'close'">
-      <pupa-button flexible kind="border">Close</pupa-button>
+    <pupa-modal-layout-action [value]="'close'">
+      <pupa-button kind="border">Close</pupa-button>
     </pupa-modal-layout-action>
   </pupa-modal-layout-footer>
 </pupa-modal-layout>

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-1/modal-content/modal-demo-example-1.component.scss

@@ -2,8 +2,3 @@
   width: 400px;
   height: 400px;
 }
-
-.layout-action {
-  display: flex;
-  justify-content: center;
-}

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-2/modal-content/modal-demo-example-2.component.html

@@ -1,7 +1,9 @@
 <pupa-modal-layout class="modal-layout">
-  <pupa-modal-layout-header-actions>
-    <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
-  </pupa-modal-layout-header-actions>
+  <pupa-modal-layout-header>
+    <pupa-modal-layout-header-actions>
+      <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
+    </pupa-modal-layout-header-actions>
+  </pupa-modal-layout-header>
 
   <pupa-modal-layout-body> Any content can be here </pupa-modal-layout-body>
 

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-3/modal-content/modal-demo-example-3.component.html

@@ -1,10 +1,9 @@
 <pupa-modal-layout class="modal-layout">
-  <pupa-modal-layout-header-actions>
-    <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
-  </pupa-modal-layout-header-actions>
-
   <pupa-modal-layout-header>
     <pupa-modal-layout-title> Modal window </pupa-modal-layout-title>
+    <pupa-modal-layout-header-actions>
+      <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
+    </pupa-modal-layout-header-actions>
   </pupa-modal-layout-header>
 
   <pupa-modal-layout-body>

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.html

@@ -1,11 +1,10 @@
 <pupa-modal-layout class="modal-layout">
-  <pupa-modal-layout-header-actions>
-    <pupa-modal-close-button class="close-button" [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
-    <pupa-modal-expand-button></pupa-modal-expand-button>
-  </pupa-modal-layout-header-actions>
-
   <pupa-modal-layout-header>
     <pupa-modal-layout-title> Modal window </pupa-modal-layout-title>
+    <pupa-modal-layout-header-actions>
+      <pupa-modal-expand-button></pupa-modal-expand-button>
+      <pupa-modal-close-button class="close-button" [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
+    </pupa-modal-layout-header-actions>
   </pupa-modal-layout-header>
 
   <pupa-modal-layout-body> Any content can be here </pupa-modal-layout-body>

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-4/modal-content/modal-demo-example-4.component.scss

@@ -7,7 +7,3 @@
   max-width: calc(100vw - 10rem);
   max-height: calc(#{vh(100)} - 10rem);
 }
-
-.close-button {
-  flex: 1;
-}

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.html

@@ -1,21 +1,20 @@
-<pupa-modal-layout height="xs" class="modal-layout">
-  <pupa-modal-layout-header-actions>
-    <pupa-modal-close-button class="close-button" [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
-    <pupa-modal-expand-button></pupa-modal-expand-button>
-  </pupa-modal-layout-header-actions>
-
+<pupa-modal-layout class="modal-layout">
   <pupa-modal-layout-header>
     <pupa-modal-layout-title>{{ loremIpsum }}</pupa-modal-layout-title>
+    <pupa-modal-layout-header-actions>
+      <pupa-modal-expand-button></pupa-modal-expand-button>
+      <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
+    </pupa-modal-layout-header-actions>
   </pupa-modal-layout-header>
 
   <pupa-modal-layout-body>{{ loremIpsum }}</pupa-modal-layout-body>
 
   <pupa-modal-layout-footer>
-    <pupa-modal-layout-action class="layout-action" [value]="null">
-      <pupa-button class="footer-button" flexible="true" kind="border">Cancel</pupa-button>
+    <pupa-modal-layout-action [value]="null">
+      <pupa-button flexible="true" kind="border">Cancel</pupa-button>
     </pupa-modal-layout-action>
-    <pupa-modal-layout-action class="layout-action" [value]="'close'">
-      <pupa-button class="footer-button" flexible="true">Close</pupa-button>
+    <pupa-modal-layout-action [value]="'close'">
+      <pupa-button flexible="true">Close</pupa-button>
     </pupa-modal-layout-action>
   </pupa-modal-layout-footer>
 </pupa-modal-layout>

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-content/modal-demo-example-5.component.scss

@@ -1,15 +1,3 @@
 .modal-layout {
   width: 400px;
 }
-
-.close-button {
-  flex: 1;
-}
-
-.layout-action {
-  display: flex;
-}
-
-.footer-button {
-  flex: 1;
-}

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts

@@ -22,6 +22,7 @@ export class ModalDemoExample5HelperComponent {
       hasBackdrop: true,
       closeOnBackdropClick: true,
       isBackdropTransparent: false,
+      height: 'xs',
       providers: [
         {
           provide: MODAL_DATA_TOKEN,

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.html

@@ -0,0 +1,16 @@
+<pupa-modal-layout class="modal-layout">
+  <pupa-modal-layout-header>
+    <pupa-modal-layout-title> Modal window </pupa-modal-layout-title>
+  </pupa-modal-layout-header>
+
+  <pupa-modal-layout-body> {{ loremIpsum }} </pupa-modal-layout-body>
+
+  <pupa-modal-layout-footer>
+    <pupa-modal-layout-action [value]="null">
+      <pupa-button [flexible]="true" kind="border">Cancel</pupa-button>
+    </pupa-modal-layout-action>
+    <pupa-modal-layout-action [value]="'close'">
+      <pupa-button [flexible]="true" kind="primary">Close</pupa-button>
+    </pupa-modal-layout-action>
+  </pupa-modal-layout-footer>
+</pupa-modal-layout>

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss

@@ -0,0 +1,3 @@
+.modal-layout {
+  width: 400px;
+}

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-content/modal-demo-example-6.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+const BODY_CONTENT: string = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat metus, 
+tempus quis cursus sit amet, aliquam tempor odio. Proin vehicula nibh vitae varius tristique. 
+Vivamus id vestibulum risus. Nulla eget leo eget est venenatis luctus in quis lectus. 
+Maecenas pulvinar sollicitudin diam dapibus scelerisque. Ut non elit viverra, fringilla arcu et, 
+blandit arcu. Phasellus ut malesuada tellus. Ut ac justo eget orci interdum euismod et vitae tortor.
+`;
+
+@Component({
+  selector: 'pupa-modal-demo-example-6',
+  templateUrl: './modal-demo-example-6.component.html',
+  styleUrls: ['./modal-demo-example-6.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class ModalDemoExample6Component {
+  public readonly loremIpsum: string = BODY_CONTENT;
+}

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.html

@@ -0,0 +1 @@
+<pupa-button (click)="openModal()">Open Modal</pupa-button>

projects/demo/src/app/pages/modal-demo/examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, Injector, ViewEncapsulation } from '@angular/core';
+import { ModalsService, OpenedModal } from '@bimeister/pupakit.overlays';
+import { Observable } from 'rxjs';
+import { MODAL_DATA_TOKEN } from '../../../../../../declarations/tokens/modal-data.token';
+import { ModalDemoExample6Component } from '../modal-content/modal-demo-example-6.component';
+
+@Component({
+  selector: 'pupa-modal-demo-example-6-helper',
+  templateUrl: './modal-demo-example-6-helper.component.html',
+  styleUrls: ['./modal-demo-example-6-helper.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class ModalDemoExample6HelperComponent {
+  public modalCloseMessage$: Observable<string>;
+
+  constructor(private readonly modalsService: ModalsService, private readonly injector: Injector) {}
+
+  public openModal(): void {
+    const modal: OpenedModal<string> = this.modalsService.open(ModalDemoExample6Component, {
+      injector: this.injector,
+      hasBackdrop: true,
+      closeOnBackdropClick: true,
+      isBackdropTransparent: false,
+      hasBorder: true,
+      providers: [
+        {
+          provide: MODAL_DATA_TOKEN,
+          useValue: [1, 2, 3, 4],
+        },
+      ],
+    });
+
+    this.modalCloseMessage$ = modal.closed$;
+  }
+}

projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.html

@@ -1,11 +1,10 @@
 <pupa-modal-dragger class="dragger"></pupa-modal-dragger>
-<pupa-modal-layout class="modal-layout" [attr.height]="size">
-  <pupa-modal-layout-header-actions>
-    <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
-  </pupa-modal-layout-header-actions>
-
+<pupa-modal-layout class="modal-layout">
   <pupa-modal-layout-header>
     <pupa-modal-layout-title> Modal window </pupa-modal-layout-title>
+    <pupa-modal-layout-header-actions>
+      <pupa-modal-close-button [value]="'🤷'" [icon]="'app-cross'"> </pupa-modal-close-button>
+    </pupa-modal-layout-header-actions>
   </pupa-modal-layout-header>
 
   <pupa-modal-layout-body>

projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss

@@ -9,7 +9,6 @@
 
 .modal-layout {
   width: 400px;
-  height: 400px;
 }
 
 .dragger {

projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.ts

@@ -37,8 +37,4 @@ export class ModalDemoContentComponent {
   public changeModalPosition(newPosition: Position): void {
     this.modalRef.updatePosition(newPosition);
   }
-
-  public get size(): string {
-    return this.modalRef.size;
-  }
 }

projects/demo/src/app/pages/modal-demo/modal-demo.component.html

@@ -26,6 +26,11 @@ <h3 demoAnchor>Predefined height XS</h3>
     <pupa-code-container [content]="example5Content">
       <pupa-modal-demo-example-5-helper *pupaCodeContainerPreviewTemplate></pupa-modal-demo-example-5-helper>
     </pupa-code-container>
+
+    <h3 demoAnchor>With borders, with flexible buttons</h3>
+    <pupa-code-container [content]="example6Content">
+      <pupa-modal-demo-example-6-helper *pupaCodeContainerPreviewTemplate></pupa-modal-demo-example-6-helper>
+    </pupa-code-container>
   </div>
 
   <div *demoPageTab="'api'">
@@ -59,11 +64,16 @@ <h3 demoAnchor>Predefined height XS</h3>
         <demo-example-viewer-property name="height" type="string">
           <ng-container *demoExampleViewerPropertyDescription>Predefined height</ng-container>
           <demo-props-radio-select
-            formControlName="size"
+            formControlName="height"
             direction="row"
             [options]="sizeOptions"
           ></demo-props-radio-select>
         </demo-example-viewer-property>
+
+        <demo-example-viewer-property name="hasBorder" type="boolean">
+          <ng-container *demoExampleViewerPropertyDescription>Has border.</ng-container>
+          <demo-props-switcher formControlName="hasBorder"></demo-props-switcher>
+        </demo-example-viewer-property>
       </demo-example-viewer-section>
     </demo-example-viewer>
   </div>

projects/demo/src/app/pages/modal-demo/modal-demo.component.ts

@@ -1,14 +1,16 @@
 import { ChangeDetectionStrategy, Component, Injector, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Position } from '@bimeister/pupakit.common';
-import { ModalsService, OpenedModal } from '@bimeister/pupakit.overlays';
+import { ModalConfig, ModalHeightType, ModalsService, OpenedModal } from '@bimeister/pupakit.overlays';
 import { PropsOption } from '../../shared/components/example-viewer/declarations/interfaces/props.option';
 import { MODAL_DATA_TOKEN } from '../../../declarations/tokens/modal-data.token';
 import { ModalDemoContentComponent } from './modal-demo-content/modal-demo-content.component';
 import { ModalDemoLocalService } from './services/modal-demo-local.service';
-import { isNil } from '@bimeister/utilities';
 
 const BASE_REQUEST_PATH: string = 'modal-demo/examples';
+type ModalFormStructure = {
+  [Key in keyof ModalConfig]: FormControl<ModalConfig[Key]>;
+};
 
 @Component({
   selector: 'demo-modal-demo',
@@ -49,13 +51,19 @@ export class ModalDemoComponent {
     TS: `${BASE_REQUEST_PATH}/modal-demo-example-5/modal-demo-example-5-helper/modal-demo-example-5-helper.component.ts`,
   };
 
-  public readonly formGroup: FormGroup = new FormGroup({
-    hasBackdrop: new FormControl(true),
-    closeOnBackdropClick: new FormControl(true),
-    isBackdropTransparent: new FormControl(false),
-    isFullscreen: new FormControl(false),
-    height: new FormControl(''),
-    size: new FormControl(''),
+  public readonly example6Content: Record<string, string> = {
+    HTML: `${BASE_REQUEST_PATH}/modal-demo-example-6/modal-content/modal-demo-example-6.component.html`,
+    SCSS: `${BASE_REQUEST_PATH}/modal-demo-example-6/modal-content/modal-demo-example-6.component.scss`,
+    TS: `${BASE_REQUEST_PATH}/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component.ts`,
+  };
+
+  public readonly formGroup: FormGroup = new FormGroup<Partial<ModalFormStructure>>({
+    hasBackdrop: new FormControl<boolean>(true),
+    closeOnBackdropClick: new FormControl<boolean>(true),
+    isBackdropTransparent: new FormControl<boolean>(false),
+    isFullscreen: new FormControl<boolean>(false),
+    height: new FormControl<ModalHeightType>(''),
+    hasBorder: new FormControl<boolean>(false),
   });
 
   public readonly sizeOptions: PropsOption[] = [
@@ -87,7 +95,6 @@ export class ModalDemoComponent {
     const openedModal: OpenedModal<string> = this.modalsService.open(ModalDemoContentComponent, {
       ...this.formGroup.value,
       injector: this.injector,
-      height: isNil(this.formGroup.value.size) ? 400 : null,
       width: 400,
       providers: [
         {

projects/demo/src/app/pages/modal-demo/modal-demo.module.ts

@@ -13,6 +13,8 @@ import { ModalDemoExample5HelperComponent } from './examples/modal-demo-example-
 import { ModalDemoContentComponent } from './modal-demo-content/modal-demo-content.component';
 import { ModalDemoRoutingModule } from './modal-demo-routing.module';
 import { ModalDemoComponent } from './modal-demo.component';
+import { ModalDemoExample6Component } from './examples/modal-demo-example-6/modal-content/modal-demo-example-6.component';
+import { ModalDemoExample6HelperComponent } from './examples/modal-demo-example-6/modal-demo-example-6-helper/modal-demo-example-6-helper.component';
 
 const EXAMPLES: Type<unknown>[] = [
   ModalDemoExample1Component,
@@ -25,6 +27,8 @@ const EXAMPLES: Type<unknown>[] = [
   ModalDemoExample4HelperComponent,
   ModalDemoExample5Component,
   ModalDemoExample5HelperComponent,
+  ModalDemoExample6Component,
+  ModalDemoExample6HelperComponent,
 ];
 
 @NgModule({

projects/kit/src/components/buttons/components/button/button.component.scss

@@ -1,5 +1,10 @@
 @use './../../button.styles.scss';
 
+:host:has(.button_flexible) {
+  display: flex;
+  flex: 1;
+}
+
 .button {
   width: inherit;
   max-width: inherit;

projects/overlays/src/components/modal/components/modal-button-icon/modal-button-icon.component.ts

@@ -22,7 +22,7 @@ export class ModalButtonIconComponent implements OnChanges {
   private readonly isMobile$: Observable<boolean> = this.clientUiStateHandlerService.breakpointIsXs$;
 
   public readonly size$: Observable<ButtonSize> = this.isMobile$.pipe(
-    map((isMobile: boolean) => (isMobile ? 'm' : 's'))
+    map((isMobile: boolean) => (isMobile ? 's' : 'm'))
   );
 
   constructor(private readonly clientUiStateHandlerService: ClientUiStateHandlerService) {}