Skip to content

Commit bbcd3b2

Browse files
JudimaxJudimax
committed
'[CHECKPOINT]' updated package to conform with @windmillcode/wml-components-base version 18.2.3200
1 parent 108f14d commit bbcd3b2

File tree

44 files changed

+318
-171
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+318
-171
lines changed

‎projects/wml-accordion/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,4 +481,8 @@ updated package to reflect the version 18.2.3 of @angular/core package
481481

482482
### v18.2.3110 [9/10/24]
483483

484+
updated package to conform with @windmillcode/angular-wml-components-base
485+
486+
### v18.2.3112 [9/10/24]
487+
484488
updated package to conform with @windmillcode/angular-wml-components-base[](/Windmillcode-Angular-CDK-Docs/schematics/wml-schematics/)[](/Windmillcode-Angular-CDK-Docs/components/wml-button/)

‎projects/wml-accordion/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
"peerDependencies": {
1010
"@angular/common": "^18.0.0",
1111
"@angular/core": "^18.0.0",
12-
"@windmillcode/angular-wml-components-base": "^18.2.3112",
13-
"@windmillcode/wml-components-base": "^18.2.3112"
12+
"@windmillcode/angular-wml-components-base": "^18.2.3200",
13+
"@windmillcode/wml-components-base": "^18.2.3200"
1414
},
1515
"private": false,
1616
"schematics": "",
1717
"scripts": {
1818
"build": "npx ng build"
1919
},
20-
"version": "18.2.3112"
20+
"version": "18.2.3200"
2121
}

‎projects/wml-angular-components-base/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,12 @@ updated package to reflect the version 18.2.3 of @angular/core package
8282

8383
### v18.2.3110 [9/10/24]
8484

85+
updated package to conform with @windmillcode/angular-wml-components-base
86+
87+
### v18.2.3111 [9/10/24]
88+
89+
updated package to conform with @windmillcode/angular-wml-components-base
90+
91+
### v18.2.3112 [9/10/24]
92+
8593
updated package to conform with @windmillcode/angular-wml-components-base[](/Windmillcode-Angular-CDK-Docs/intro/wml-components-base)[](/Windmillcode-Angular-CDK-Docs/schematics/wml-schematics/)

‎projects/wml-angular-components-base/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
"peerDependencies": {
1010
"@angular/common": "^18.0.0",
1111
"@angular/core": "^18.0.0",
12-
"@windmillcode/wml-components-base": "^18.2.3112"
12+
"@windmillcode/wml-components-base": "^18.2.3200"
1313
},
1414
"private": false,
1515
"schematics": "",
1616
"scripts": {
1717
"build": "npx ng build"
1818
},
19-
"version": "18.2.3112"
19+
"version": "18.2.3200"
2020
}

‎projects/wml-button/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,4 +519,8 @@ updated package to reflect the version 18.2.3 of @angular/core package
519519

520520
### v18.2.3110 [9/10/24]
521521

522+
updated package to conform with @windmillcode/angular-wml-components-base
523+
524+
### v18.2.3112 [9/10/24]
525+
522526
updated package to conform with @windmillcode/angular-wml-components-base[](/Windmillcode-Angular-CDK-Docs/components/wml-accordion/)[](/Windmillcode-Angular-CDK-Docs/components/wml-chips/)

‎projects/wml-button/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
"peerDependencies": {
1010
"@angular/common": "^18.0.0",
1111
"@angular/core": "^18.0.0",
12-
"@windmillcode/angular-wml-components-base": "^18.2.3112",
13-
"@windmillcode/wml-components-base": "^18.2.3112"
12+
"@windmillcode/angular-wml-components-base": "^18.2.3200",
13+
"@windmillcode/wml-components-base": "^18.2.3200"
1414
},
1515
"private": false,
1616
"schematics": "",
1717
"scripts": {
1818
"build": "npx ng build"
1919
},
20-
"version": "18.2.3112"
20+
"version": "18.2.3200"
2121
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
</section>
55
<section
6-
76
[ngStyle]="props.slideContainer.style"
87
[class]="props.slideContainer.class">
98
<div

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@
1515

1616
&0{}
1717
&1{
18+
height: 100%;
1819
&Item {
1920
&0 {
21+
height: 100%;
2022
position: relative;
2123
display: flex;
2224
justify-content: center;

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

Lines changed: 114 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// angular
2-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
2+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
33
// rxjs
44

55
import { fromEvent, Subject } from 'rxjs';
@@ -25,22 +25,22 @@ export class WMLCarouselOneComponent {
2525
classPrefix = generateClassPrefix('WMLCarouselOne')
2626
@Input('props') props: WMLCarouselOneProps = new WMLCarouselOneProps()
2727
@HostBinding('class') myClass: string = this.classPrefix(`View`);
28-
@HostBinding('attr.id') myId?:string
29-
@ViewChild("controller",{read:ViewContainerRef,static:true}) controller! :ViewContainerRef
28+
@HostBinding('attr.id') myId?: string
29+
@ViewChild("controller", { read: ViewContainerRef, static: true }) controller!: ViewContainerRef
3030
ngUnsub = new Subject<void>()
3131

3232
listenForUpdate = () => {
3333
return this.props.setStateSubj
34-
.pipe(
35-
takeUntil(this.ngUnsub),
36-
tap((res?) => {
37-
this.props = new WMLCarouselOneProps({
38-
...this.props,
39-
...(res ?? this.props)
34+
.pipe(
35+
takeUntil(this.ngUnsub),
36+
tap((res?) => {
37+
this.props = new WMLCarouselOneProps({
38+
...this.props,
39+
...(res ?? this.props)
40+
})
41+
this.cdref.detectChanges()
4042
})
41-
this.cdref.detectChanges()
42-
})
43-
)
43+
)
4444
}
4545

4646
ngAfterViewInit(): void {
@@ -66,9 +66,9 @@ export class WMLCarouselOneProps {
6666
constructor(props: Partial<WMLCarouselOneProps> = {}) { }
6767

6868
// component proeprties
69-
controllerVCF!:ViewContainerRef
69+
controllerVCF!: ViewContainerRef
7070
ngUnsub = new Subject<void>();
71-
cdref!:ChangeDetectorRef
71+
cdref!: ChangeDetectorRef
7272
//
7373

7474
id = ""
@@ -77,25 +77,25 @@ export class WMLCarouselOneProps {
7777
this.setStateSubj.next(value)
7878
}
7979

80-
slideWidth = "23%"
81-
slideHeight = "33%"
82-
slideDistanceFromCenter= "300px"
83-
slideDistanceFromTop='-53px'
84-
classPrefix = generateClassPrefix('WMLCarouselOne')
80+
private slideWidth = ""
81+
private slideHeight = ""
82+
slideDistanceFromCenter = ""
83+
slideDistanceFromTop = ''
84+
private classPrefix = generateClassPrefix('WMLCarouselOne')
8585

8686
slideContainer = new WMLUIProperty({
87-
style:{
87+
style: {
8888
// perspective:"1000px",
8989
// perspectiveOrigin:"50% -95%"
9090
},
91-
class:this.classPrefix('Pod1')
91+
class: this.classPrefix('Pod1')
9292
})
93-
controller = new WMLAngularMotionUIProperty({
94-
type:"transition",
95-
class:this.classPrefix('Pod1Item0'),
96-
style:{
97-
height:"250px",
98-
border:"calc(1/10.6 * 1em) solid red"
93+
controller = new WMLAngularMotionUIProperty({
94+
type: "transition",
95+
class: this.classPrefix('Pod1Item0'),
96+
style: {
97+
height: "100%",
98+
border: "calc(1/10.6 * 1em) solid red"
9999
},
100100
keyFrameStyles: {
101101
'0%': {
@@ -108,103 +108,127 @@ export class WMLCarouselOneProps {
108108
})
109109

110110

111-
slides:Array<WMLCarouselOneSlideProps> =Array(8)
112-
.fill(null)
113-
.map((nullVal,index0)=>{
114-
return new WMLCarouselOneSlideProps({
115-
view:new WMLUIProperty({
116-
class:this.classPrefix('Pod1Item1'),
111+
slides: Array<WMLCarouselOneSlideProps> = Array(8)
112+
.fill(null)
113+
.map((nullVal, index0) => {
114+
return new WMLCarouselOneSlideProps({
115+
view: new WMLUIProperty({
116+
class: this.classPrefix('Pod1Item1'),
117+
})
117118
})
118119
})
119-
})
120120

121-
init= ()=>{
121+
init = () => {
122122

123-
window.resizeTo(1520,364)
123+
window.resizeTo(1520, 364)
124124
this.listenForSlideContainerResize().subscribe()
125125
}
126126

127-
listenForSlideContainerResize = ()=>{
128-
return fromEvent(window,"resize")
129-
.pipe(
130-
takeUntil(this.ngUnsub),
131-
startWith(null),
132-
tap(()=>{
133-
const parentElement = this.controllerVCF.element.nativeElement;
134-
const parentWidth = parseFloat(getComputedStyle(parentElement).width.split("px")[0]);
135-
const parentHeight = parseFloat(getComputedStyle(parentElement).height.split("px")[0]);
127+
listenForSlideContainerResize = () => {
128+
return fromEvent(window, "resize")
129+
.pipe(
130+
takeUntil(this.ngUnsub),
131+
startWith(null),
132+
tap(() => {
133+
const parentElement = this.controllerVCF.element.nativeElement;
134+
const parentWidth = parseFloat(getComputedStyle(parentElement).width.split("px")[0]);
135+
const parentHeight = parseFloat(getComputedStyle(parentElement).height.split("px")[0]);
136136

137137

138-
this.slideWidth = `${parentWidth * 0.315}px`;
139-
this.slideHeight = `${ parentHeight * 0.52}px`;
140-
this.slideDistanceFromCenter = `${parentWidth * .42}px`;
141138

142139

143-
this.slideContainer.style.perspectiveOrigin = `50% ${-5}%`;
144-
// this.controller.style.transform =`rotateY(60deg)`
140+
this.slideContainer.style.perspectiveOrigin = `50% ${-5}%`;
141+
// this.controller.style.transform =`rotateY(60deg)`
145142

146-
this.slideHeight =this.calculateSlideHeight(parentWidth, parentHeight)+"px"
147-
this.slideDistanceFromCenter = this.calculateSlideDistanceFromCenter(parentWidth, parentHeight)+"px"
148-
this.slideDistanceFromTop = this.calculateSlideDistanceFromTop(parentWidth, parentHeight)+"px"
143+
this.slideHeight = this.calculateSlideHeight(parentWidth, parentHeight) + "px"
144+
this.slideWidth = this.calculateSlideWidth(parentWidth, parentHeight) + "px"
145+
this.slideDistanceFromCenter = this.calculateSlideDistanceFromCenter(parentWidth, parentHeight) + "px"
146+
this.slideDistanceFromTop = this.calculateSlideDistanceFromTop(parentWidth, parentHeight) + "px"
147+
this.slideDistanceFromCenter = this.calculateSlideDistanceFromCenter(parentWidth, parentHeight) + "px"
148+
this.slideContainer.style.perspective = this.calculatePerspective(parentWidth, parentHeight) + "px"
149149

150-
// this.slideHeight ="204px"
151-
// this.slideDistanceFromCenter ="153.82446px"
152-
// this.slideDistanceFromTop ='-20.226021999999997px'
153-
// TODO pass 1536px you must increase the perspective to preserve the shape
154-
this.slideContainer.style.perspective = `1000px`;
150+
// this.slideHeight = "1420.18214293px"
151+
// this.slideWidth = "650.078010500000001px"
152+
// this.slideDistanceFromCenter = "905.48578629000001px"
153+
// this.slideDistanceFromTop = '-258.70568163px'
154+
// // TODO pass 1536px you must increase the perspective to preserve the shape
155+
// this.slideContainer.style.perspective = `3500px`;
155156

156-
console.log(`Slide Height ${this.slideHeight}`)
157-
// console.log(`Slide Width ${this.slideWidth}`)
158-
console.log(`Slide Distance from Center ${this.slideDistanceFromCenter}`)
159-
console.log(`Distance from top ${this.slideDistanceFromTop}`)
160-
console.warn(`Parent Width ${parentWidth}`)
161-
console.warn(`Parent Height ${parentHeight}`)
157+
const slideInfo = {
158+
slideHeight: this.slideHeight,
159+
slideWidth: this.slideWidth,
160+
slideDistanceFromCenter: this.slideDistanceFromCenter,
161+
slideDistanceFromTop: this.slideDistanceFromTop,
162+
perspective: this.slideContainer.style.perspective,
163+
parentWidth: parentWidth,
164+
parentHeight: parentHeight
165+
};
162166

167+
console.log(slideInfo);
163168

164-
this.updateSlides();
165-
}),
166-
tap(()=>{
167-
this.cdref.detectChanges()
168-
})
169-
)
169+
170+
171+
this.updateSlides();
172+
}),
173+
tap(() => {
174+
this.cdref.detectChanges()
175+
})
176+
)
170177

171178
}
172179

173-
getAngle =()=> {
180+
getAngle = () => {
174181
return 360 / this.slides.length;
175182
}
176183

177-
calculateSlideHeight = (parentWidth, parentHeight)=> {
178-
// Slope and intercept calculated based on the provided data points
179-
const slope = -0.1121;
180-
const intercept = 241.548;
184+
calculateSlideHeight = (parentWidth, parentHeight) => {
185+
const x = parentWidth / parentHeight;
186+
const y = 0.97 - 0.075 * Math.log(1 + x);
187+
const slideHeight = parentHeight * y;
188+
return slideHeight;
189+
}
190+
191+
calculateSlideWidth(parentWidth, parentHeight) {
192+
var slideWidth = 0.33 * parentWidth + 0.02 * parentHeight - 15;
193+
// Ensure slideWidth is not less than the minimum observed value
194+
if (slideWidth < 15.078) {
195+
slideWidth = 15.078;
196+
}
197+
return slideWidth;
198+
}
181199

182-
// Calculate result based on the linear relationship
183-
const result = (parentWidth * slope) + intercept;
184200

185-
return result;
201+
calculateSlideDistanceFromCenter(parentWidth, parentHeight) {
202+
const slideDistanceFromCenter = (0.4646 * parentWidth) + (0.0001 * parentHeight) + 4.0;
203+
return slideDistanceFromCenter;
186204
}
187205

188-
calculateSlideDistanceFromCenter = (parentWidth, parentHeight)=> {
189-
const slope = 0.3887; // Updated slope based on linear regression
190-
const intercept = 32.88; // Updated intercept based on linear regression
191-
const result = (parentWidth * slope) + intercept;
192-
return result;
206+
calculateSlideDistanceFromTop(parentWidth, parentHeight) {
207+
const a = -0.005; // Coefficient for parentWidth
208+
const b = -0.06; // Coefficient for parentHeight
209+
const c = 5; // Intercept
210+
211+
return a * parentWidth + b * parentHeight + c;
193212
}
194213

195-
calculateSlideDistanceFromTop = (parentWidth, parentHeight)=> {
196-
const slopeWidth = -0.0489; // Coefficient for parentWidth
197-
const slopeHeight = -0.0173; // Coefficient for parentHeight
198-
const result = (parentWidth * slopeWidth) + (parentHeight * slopeHeight);
199-
return result;
214+
calculatePerspective(parentWidth, parentHeight) {
215+
// Modify // Adjust the interpolation factors based on the given data.
216+
const widthFactor = parentWidth / 1000;
217+
const heightFactor = parentHeight / 1000;
218+
219+
// Calculate perspective based on width and height factors
220+
let perspective = 1000 * Math.max(widthFactor, heightFactor);
221+
222+
// Return the calculated perspective, rounding to the nearest integer
223+
return Math.round(perspective);
200224
}
201225

202226

203227

204-
updateSlides = ()=> {
228+
updateSlides = () => {
205229
this.slides = this.slides.map((slide, index0) => {
206230
let angle = this.getAngle();
207-
slide.view.style.transform = `rotateY(${index0 * angle}deg) translateZ(${this.slideDistanceFromCenter }) translateY(${this.slideDistanceFromTop})`;
231+
slide.view.style.transform = `rotateY(${index0 * angle}deg) translateZ(${this.slideDistanceFromCenter}) translateY(${this.slideDistanceFromTop})`;
208232
slide.view.style.height = this.slideHeight;
209233
slide.view.style.width = this.slideWidth;
210234
return slide;

‎projects/wml-chips/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,4 +463,8 @@ updated package to reflect the version 18.2.3 of @angular/core package
463463

464464
### v18.2.3110 [9/10/24]
465465

466+
updated package to conform with @windmillcode/angular-wml-components-base
467+
468+
### v18.2.3112 [9/10/24]
469+
466470
updated package to conform with @windmillcode/angular-wml-components-base[](/Windmillcode-Angular-CDK-Docs/components/wml-button/)[](/Windmillcode-Angular-CDK-Docs/components/wml-field/)

0 commit comments

Comments
 (0)