[UPDATE] additional work

Author: Judimax

projects/wml-angular-components-base/src/lib/models.ts

@@ -1,7 +1,7 @@
 import {  Type } from "@angular/core";
 import { TranslateLoader } from "@ngx-translate/core";
 import { Subject, of } from "rxjs";
-import {WMLMotionUIProperty,WMLMotionUIPropertyState} from "@windmillcode/wml-components-base";
+import { WMLMotionUIProperty,WMLMotionUIPropertyState } from "@windmillcode/wml-components-base";
 
 
 export class WMLAngularMotionUIProperty<V=any,T=any> extends WMLMotionUIProperty<V,T>{

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one-slide-example/wml-carousel-one-slide-example.component.scss

@@ -1,21 +1,18 @@
 
-
-
-
-  @import '../../../../styles';
-
+ @import '../../../../styles';
 
 
 
 
   .WMLCarouselOneSlideExampleView{
     display: block;
     height:100%;
+    border:calc(1/10.6 * 1em) solid green;
     .WMLCarouselOneSlideExample{
       &Main{
         &Pod{
-          
-          
+
+
           height:100%;
         }
       }

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one-slide-example/wml-carousel-one-slide-example.component.ts

@@ -1,14 +1,12 @@
 // angular
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnInit,  Input  , ViewEncapsulation   } from '@angular/core';
 
-
-
 // rxjs
 import { Subject } from 'rxjs';
 import { takeUntil,tap } from 'rxjs/operators';
 
 // wml-components
-import { WMLConstructorDecorator, generateClassPrefix, generateIdPrefix } from '@windmillcode/wml-components-base';
+import { WMLConstructorDecorator, generateClassPrefix } from '@windmillcode/wml-components-base';
 
 
 // misc
@@ -20,29 +18,18 @@ import { WMLConstructorDecorator, generateClassPrefix, generateIdPrefix } from '
   templateUrl: './wml-carousel-one-slide-example.component.html',
   styleUrls: ['./wml-carousel-one-slide-example.component.scss'],
   changeDetection:ChangeDetectionStrategy.OnPush,
-
   encapsulation:ViewEncapsulation.None
-
-
 })
 export class WMLCarouselOneSlideExampleComponent  {
 
   constructor(
-    public cdref:ChangeDetectorRef,
-
+    public cdref:ChangeDetectorRef
   ) { }
 
   classPrefix = generateClassPrefix('WMLCarouselOneSlideExample')
-
-
   @Input('props') props: WMLCarouselOneSlideExampleProps = new WMLCarouselOneSlideExampleProps()
-
-
   @HostBinding('class') myClass: string = this.classPrefix(`View`);
-
-
   @HostBinding('attr.id') myId?:string
-
   ngUnsub= new Subject<void>()
 
 

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one-slide/wml-carousel-one-slide.component.html

@@ -1,5 +1,3 @@
 <div [class]="classPrefix('MainPod')">
-  <section [class]="classPrefix('Pod0')">
-
-  </section>
+  <ng-template #customSlide></ng-template>
 </div>

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one-slide/wml-carousel-one-slide.component.ts

@@ -1,12 +1,14 @@
 // angular
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnInit,  Input  , ViewEncapsulation   } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnInit,  Input  , ViewEncapsulation, ViewChild, ViewContainerRef   } from '@angular/core';
 
 // rxjs
 import { Subject } from 'rxjs';
 import { takeUntil,tap } from 'rxjs/operators';
 
 // wml-components
-import { WMLConstructorDecorator, generateClassPrefix, generateIdPrefix } from '@windmillcode/wml-components-base';
+import { WMLConstructorDecorator, WMLCustomComponent, WMLUIProperty, generateClassPrefix, generateIdPrefix } from '@windmillcode/wml-components-base';
+import { WMLCarouselOneSlideExampleComponent, WMLCarouselOneSlideExampleProps } from '../wml-carousel-one-slide-example/wml-carousel-one-slide-example.component';
+import { addCustomComponent } from '@windmillcode/angular-wml-components-base';
 
 
 // misc
@@ -32,6 +34,7 @@ export class WMLCarouselOneSlideComponent  {
   @HostBinding('class') myClass: string = this.classPrefix(`View`);
   @HostBinding('attr.id') myId?:string
   ngUnsub= new Subject<void>()
+  @ViewChild("customSlide",{read:ViewContainerRef}) customSlide;
 
 
   listenForUpdate = ()=>{
@@ -56,9 +59,14 @@ export class WMLCarouselOneSlideComponent  {
     }
 
     this.listenForUpdate().subscribe()
+  }
 
+  ngAfterViewInit(){
+    this.props.slideViewContainerRef = this.customSlide
+    this.props.init()
   }
 
+
   ngOnDestroy(){
     this.ngUnsub.next();
     this.ngUnsub.complete()
@@ -73,11 +81,29 @@ export class WMLCarouselOneSlideProps {
   constructor(props:Partial<WMLCarouselOneSlideProps>={}){ }
 
   id = ""
-
+  custom = new WMLCustomComponent({
+    cpnt:WMLCarouselOneSlideExampleComponent,
+    props:new WMLCarouselOneSlideExampleProps()
+  })
   setStateSubj = new Subject<WMLCarouselOneSlideProps>()
   setState = (value)=>{
     this.setStateSubj.next(value)
   }
+  view = new WMLUIProperty({
+    
+  })
+
+  // component properties
+  slideViewContainerRef!:ViewContainerRef
+  //
+
+  init=()=>{
+    addCustomComponent(
+      this.slideViewContainerRef,
+      this.custom.cpnt,
+      this.custom.props
+    )
+  }
 }
 
 

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one/wml-carousel-one.component.html

@@ -2,13 +2,18 @@
   <section [class]="classPrefix('Pod0')">
 
   </section>
-  <section [class]="classPrefix('Pod1')">
+  <section
+
+  [style]="props.slideContainer.style"
+  [class]="classPrefix('Pod1')">
     <div
-    [ngStyle]="props.controller"
-    (animationend)="props.controller.animationEnd($event)"
+    #slideContainer
+    [ngStyle]="props.controller.style"
+    (transitionend)="props.controller.transitionEnd($event)"
     [class]="classPrefix('Pod1Item0')">
       <wml-carousel-one-slide
-        [class]="classPrefix('Pod1Item1')"
+        [ngStyle]="slide.view.style"
+        [class]="classPrefix('Pod1Item1') + slide.view.class"
         [props]="slide"
         *ngFor="let slide of props.slides"
       ></wml-carousel-one-slide>

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one/wml-carousel-one.component.scss

@@ -1,42 +1,42 @@
+@import '../../../../styles';
 
+.WMLCarouselOneView{
+  display: block;
+  height:100%;
+  .WMLCarouselOne{
+    &Main{
+      &Pod{
 
 
+        height:100%;
+      }
+    }
+    &Pod{
+
+      &0{}
+      &1{
+        &Item {
+          &0 {
+            border:calc(1/10.6 * 1em) solid red;
+            height: calc(200/10.6 * 1em);
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transform-style: preserve-3d;
+          }
+          &1{
 
-  @import '../../../../styles';
-
-
-
-
-
-  .WMLCarouselOneView{
-    display: block;
-    height:100%;
-    .WMLCarouselOne{
-      &Main{
-        &Pod{
 
 
-          height:100%;
-        }
-      }
-      &Pod{
+            position: absolute;
 
-        &0{}
-        &1{
-          &Item {
-            &0 {
-              border:calc(1/10.6 * 1em) solid red;
-              
-            }
-            &1{
-              border:calc(1/10.6 * 1em) solid green;
-              width: 50%;
-            }
           }
         }
       }
     }
   }
+}