Skip to content

Commit

Permalink
Merge branch 'master' into fix-styles-editor
Browse files Browse the repository at this point in the history 
# Conflicts:
#	src/assets/components/themes/arya-blue/theme.css
#	src/assets/components/themes/arya-green/theme.css
  • Loading branch information
@SoyDiego
SoyDiego committed Oct 9, 2023
2 parents fd7344e + 257d8f1 commit 2d97998
Show file tree
Hide file tree
Showing 54 changed files with 904 additions and 597 deletions.
195 changes: 101 additions & 94 deletions src/app/components/carousel/carousel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,52 +358,57 @@ export class Carousel implements AfterContentInit {
}

ngOnChanges(simpleChange: SimpleChanges) {
if (simpleChange.value) {
if (this.circular && this._value) {
this.setCloneItems();
}
}

if (this.isCreated) {
if (simpleChange.numVisible) {
if (this.responsiveOptions) {
this.defaultNumVisible = this.numVisible;
}

if (this.isCircular()) {
if(isPlatformBrowser(this.platformId)) {
if (simpleChange.value) {
if (this.circular && this._value) {
this.setCloneItems();
}

this.createStyle();
this.calculatePosition();
}

if (simpleChange.numScroll) {
if (this.responsiveOptions) {
this.defaultNumScroll = this.numScroll;
if (this.isCreated) {
if (simpleChange.numVisible) {
if (this.responsiveOptions) {
this.defaultNumVisible = this.numVisible;
}

if (this.isCircular()) {
this.setCloneItems();
}

this.createStyle();
this.calculatePosition();
}

if (simpleChange.numScroll) {
if (this.responsiveOptions) {
this.defaultNumScroll = this.numScroll;
}
}
}

}
}

ngAfterContentInit() {
this.id = UniqueComponentId();
this.allowAutoplay = !!this.autoplayInterval;
if(isPlatformBrowser(this.platformId)) {
this.allowAutoplay = !!this.autoplayInterval;

if (this.circular) {
this.setCloneItems();
}

if (this.responsiveOptions) {
this.defaultNumScroll = this._numScroll;
this.defaultNumVisible = this._numVisible;
}

this.createStyle();
this.calculatePosition();

if (this.responsiveOptions) {
this.bindDocumentListeners();
if (this.circular) {
this.setCloneItems();
}

if (this.responsiveOptions) {
this.defaultNumScroll = this._numScroll;
this.defaultNumVisible = this._numVisible;
}

this.createStyle();
this.calculatePosition();

if (this.responsiveOptions) {
this.bindDocumentListeners();
}
}

this.templates?.forEach((item) => {
Expand Down Expand Up @@ -436,69 +441,71 @@ export class Carousel implements AfterContentInit {
}

ngAfterContentChecked() {
const isCircular = this.isCircular();
let totalShiftedItems = this.totalShiftedItems;

if (this.value && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) {
if (this.autoplayInterval) {
this.stopAutoplay(false);
}

this.remainingItems = (this.value.length - this._numVisible) % this._numScroll;

let page = this._page;
if (this.totalDots() !== 0 && page >= this.totalDots()) {
page = this.totalDots() - 1;
this._page = page;
this.onPage.emit({
page: this.page
});
}

totalShiftedItems = page * this._numScroll * -1;
if (isCircular) {
totalShiftedItems -= this._numVisible;
}

if (page === this.totalDots() - 1 && this.remainingItems > 0) {
totalShiftedItems += -1 * this.remainingItems + this._numScroll;
this.isRemainingItemsAdded = true;
} else {
this.isRemainingItemsAdded = false;
}

if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
}

this._oldNumScroll = this._numScroll;
this.prevState.numScroll = this._numScroll;
this.prevState.numVisible = this._numVisible;
this.prevState.value = [...(this._value as any[])];

if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
}

this.isCreated = true;

if (this.autoplayInterval && this.isAutoplay()) {
this.startAutoplay();
}
}

if (isCircular) {
if (this.page === 0) {
totalShiftedItems = -1 * this._numVisible;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * this.value.length;
if (this.remainingItems > 0) {
if(isPlatformBrowser(this.platformId)) {
const isCircular = this.isCircular();
let totalShiftedItems = this.totalShiftedItems;

if (this.value && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) {
if (this.autoplayInterval) {
this.stopAutoplay(false);
}

this.remainingItems = (this.value.length - this._numVisible) % this._numScroll;

let page = this._page;
if (this.totalDots() !== 0 && page >= this.totalDots()) {
page = this.totalDots() - 1;
this._page = page;
this.onPage.emit({
page: this.page
});
}

totalShiftedItems = page * this._numScroll * -1;
if (isCircular) {
totalShiftedItems -= this._numVisible;
}

if (page === this.totalDots() - 1 && this.remainingItems > 0) {
totalShiftedItems += -1 * this.remainingItems + this._numScroll;
this.isRemainingItemsAdded = true;
} else {
this.isRemainingItemsAdded = false;
}

if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
}

this._oldNumScroll = this._numScroll;
this.prevState.numScroll = this._numScroll;
this.prevState.numVisible = this._numVisible;
this.prevState.value = [...(this._value as any[])];

if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
}

this.isCreated = true;

if (this.autoplayInterval && this.isAutoplay()) {
this.startAutoplay();
}
}

if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;

if (isCircular) {
if (this.page === 0) {
totalShiftedItems = -1 * this._numVisible;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * this.value.length;
if (this.remainingItems > 0) {
this.isRemainingItemsAdded = true;
}
}

if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
}
}
}
}
Expand Down
18 changes: 10 additions & 8 deletions src/app/components/galleria/galleria.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ export class Galleria implements OnChanges, OnDestroy {

maskVisible: boolean = false;

constructor(@Inject(DOCUMENT) private document: Document, public element: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) public platformId: any, public element: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}

ngAfterContentInit() {
this.templates?.forEach((item) => {
Expand Down Expand Up @@ -518,13 +518,15 @@ export class GalleriaContent implements DoCheck {
}

startSlideShow() {
this.interval = setInterval(() => {
let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
this.onActiveIndexChange(activeIndex);
this.activeIndex = activeIndex;
}, this.galleria.transitionInterval);

this.slideShowActive = true;
if(isPlatformBrowser(this.galleria.platformId)) {
this.interval = setInterval(() => {
let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
this.onActiveIndexChange(activeIndex);
this.activeIndex = activeIndex;
}, this.galleria.transitionInterval);

this.slideShowActive = true;
}
}

stopSlideShow() {
Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/doc/colors/surfacesdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { AppConfigService } from '../../service/appconfigservice';
<div class="card">
<div class="color-stack">
<div *ngFor="let shade of shades">
<div class="color-box" [ngStyle]="{ backgroundColor: 'var(--surface-' + shade, color: shade < 500 ? 'var(--surface-900)' : 'var(--surface-0)' }">surface-{{ shade }}</div>
<div class="color-box" [ngStyle]="{ backgroundColor: 'var(--surface-' + shade + ')', color: shade < 600 ? 'var(--surface-900)' : 'var(--surface-0)' }">surface-{{ shade }}</div>
</div>
</div>
</div>
Expand Down
99 changes: 45 additions & 54 deletions src/app/showcase/doc/divider/logindoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,24 @@ import { Code } from '../../domain/code';
<p>Sample implementation of a login form using a divider with content.</p>
</app-docsectiontext>
<div class="card">
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid">
<div class="field">
<label for="username">Username</label>
<input pInputText id="username" type="text" />
</div>
<div class="field">
<label for="password">Password</label>
<input pInputText id="password" type="password" />
</div>
<p-button label="Login"></p-button>
<div class="flex flex-column md:flex-row">
<div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
<div class="flex flex-wrap justify-content-center align-items-center gap-2">
<label class="w-6rem">Username</label>
<input pInputText id="username" type="text" class="w-12rem" />
</div>
<div class="flex flex-wrap justify-content-center align-items-center gap-2">
<label class="w-6rem">Password</label>
<input pInputText id="password" type="password" class="w-12rem" />
</div>
<p-button label="Login" icon="pi pi-user" styleClass="w-10rem mx-auto"></p-button>
</div>
<div class="col-2">
<p-divider layout="vertical">
<b>OR</b>
</p-divider>
<div class="w-full md:w-2">
<p-divider layout="vertical" styleClass="hidden md:flex"><b>OR</b></p-divider>
<p-divider layout="horizontal" styleClass="flex md:hidden" [align]="'center'"><b>OR</b></p-divider>
</div>
<div class="col-5 flex align-items-center justify-content-center">
<p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success"></p-button>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success w-10rem"></p-button>
</div>
</div>
</div>
Expand All @@ -42,53 +39,47 @@ export class LoginDoc {

code: Code = {
basic: `
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid">
<div class="field">
<label for="username">Username</label>
<input pInputText id="username" type="text" />
</div>
<div class="field">
<label for="password">Password</label>
<input pInputText id="password" type="password" />
</div>
<p-button label="Login"></p-button>
<div class="flex flex-column md:flex-row">
<div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
<div class="flex flex-wrap justify-content-center align-items-center gap-2">
<label class="w-6rem">Username</label>
<input pInputText id="username" type="text" class="w-12rem" />
</div>
<div class="flex flex-wrap justify-content-center align-items-center gap-2">
<label class="w-6rem">Password</label>
<input pInputText id="password" type="password" class="w-12rem" />
</div>
<p-button label="Login" icon="pi pi-user" styleClass="w-10rem mx-auto"></p-button>
</div>
<div class="col-2">
<p-divider layout="vertical">
<b>OR</b>
</p-divider>
<div class="w-full md:w-2">
<p-divider layout="vertical" styleClass="hidden md:flex"><b>OR</b></p-divider>
<p-divider layout="horizontal" styleClass="flex md:hidden" [align]="'center'"><b>OR</b></p-divider>
</div>
<div class="col-5 flex align-items-center justify-content-center">
<p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success"></p-button>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success w-10rem"></p-button>
</div>
</div>`,

html: `
<div class="card">
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid">
<div class="field">
<label for="username">Username</label>
<input pInputText id="username" type="text" />
</div>
<div class="field">
<label for="password">Password</label>
<input pInputText id="password" type="password" />
</div>
<p-button label="Login"></p-button>
<div class="flex flex-column md:flex-row">
<div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
<div class="flex flex-wrap justify-content-center align-items-center gap-2">
<label class="w-6rem">Username</label>
<input pInputText id="username" type="text" class="w-12rem" />
</div>
<div class="flex flex-wrap justify-content-center align-items-center gap-2">
<label class="w-6rem">Password</label>
<input pInputText id="password" type="password" class="w-12rem" />
</div>
<p-button label="Login" icon="pi pi-user" styleClass="w-10rem mx-auto"></p-button>
</div>
<div class="col-2">
<p-divider layout="vertical">
<b>OR</b>
</p-divider>
<div class="w-full md:w-2">
<p-divider layout="vertical" styleClass="hidden md:flex"><b>OR</b></p-divider>
<p-divider layout="horizontal" styleClass="flex md:hidden" [align]="'center'"><b>OR</b></p-divider>
</div>
<div class="col-5 flex align-items-center justify-content-center">
<p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success"></p-button>
<div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
<p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success w-10rem"></p-button>
</div>
</div>
</div>`,
Expand Down
Loading

0 comments on commit 2d97998

Please sign in to comment.