ng-prime-tools 1.1.11 → 1.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9838,6 +9838,7 @@ class PTNewsTickerComponent {
|
|
|
9838
9838
|
this.PTNewsTickerTrend = PTNewsTickerTrend;
|
|
9839
9839
|
this.internalNews = [];
|
|
9840
9840
|
this.animationDurationSeconds = 20;
|
|
9841
|
+
this.loopGapPixels = 0;
|
|
9841
9842
|
this.playing = true;
|
|
9842
9843
|
this.hovered = false;
|
|
9843
9844
|
this.pendingNews = null;
|
|
@@ -10041,6 +10042,9 @@ class PTNewsTickerComponent {
|
|
|
10041
10042
|
hasSegments(item) {
|
|
10042
10043
|
return Array.isArray(item.segments) && item.segments.length > 0;
|
|
10043
10044
|
}
|
|
10045
|
+
hasSingleNewsItem() {
|
|
10046
|
+
return this.internalNews.length === 1;
|
|
10047
|
+
}
|
|
10044
10048
|
isItemRemovable(item) {
|
|
10045
10049
|
return this.showRemoveButton && item.removable !== false && !item.disabled;
|
|
10046
10050
|
}
|
|
@@ -10093,6 +10097,7 @@ class PTNewsTickerComponent {
|
|
|
10093
10097
|
return {
|
|
10094
10098
|
'--pt-news-ticker-duration': `${this.animationDurationSeconds}s`,
|
|
10095
10099
|
'--pt-news-ticker-gap': this.gap,
|
|
10100
|
+
'--pt-news-ticker-loop-gap': `${this.loopGapPixels}px`,
|
|
10096
10101
|
animationDirection: this.direction === PTNewsTickerDirection.RIGHT ? 'reverse' : 'normal',
|
|
10097
10102
|
animationPlayState: this.getAnimationPlayState(),
|
|
10098
10103
|
};
|
|
@@ -10328,8 +10333,11 @@ class PTNewsTickerComponent {
|
|
|
10328
10333
|
return 'running';
|
|
10329
10334
|
}
|
|
10330
10335
|
initializeResizeObserver() {
|
|
10331
|
-
if (typeof ResizeObserver === 'undefined'
|
|
10332
|
-
|
|
10336
|
+
if (typeof ResizeObserver === 'undefined') {
|
|
10337
|
+
return;
|
|
10338
|
+
}
|
|
10339
|
+
const viewportElement = this.tickerViewport?.nativeElement;
|
|
10340
|
+
if (!viewportElement) {
|
|
10333
10341
|
return;
|
|
10334
10342
|
}
|
|
10335
10343
|
this.zone.runOutsideAngular(() => {
|
|
@@ -10338,7 +10346,7 @@ class PTNewsTickerComponent {
|
|
|
10338
10346
|
this.scheduleAnimationRefresh(true);
|
|
10339
10347
|
});
|
|
10340
10348
|
});
|
|
10341
|
-
this.resizeObserver.observe(
|
|
10349
|
+
this.resizeObserver.observe(viewportElement);
|
|
10342
10350
|
});
|
|
10343
10351
|
}
|
|
10344
10352
|
scheduleAnimationRefresh(force = false) {
|
|
@@ -10357,31 +10365,45 @@ class PTNewsTickerComponent {
|
|
|
10357
10365
|
});
|
|
10358
10366
|
}
|
|
10359
10367
|
calculateAnimationDuration() {
|
|
10368
|
+
const viewportElement = this.tickerViewport?.nativeElement;
|
|
10360
10369
|
const groupElement = this.tickerGroup?.nativeElement;
|
|
10361
|
-
if (!groupElement || this.internalNews.length === 0) {
|
|
10370
|
+
if (!viewportElement || !groupElement || this.internalNews.length === 0) {
|
|
10371
|
+
this.loopGapPixels = 0;
|
|
10362
10372
|
this.animationDurationSeconds = 1;
|
|
10363
10373
|
this.changeDetectorRef.markForCheck();
|
|
10364
10374
|
return;
|
|
10365
10375
|
}
|
|
10366
|
-
const
|
|
10376
|
+
const viewportWidth = Math.max(viewportElement.clientWidth, viewportElement.getBoundingClientRect().width, 1);
|
|
10377
|
+
const groupContentWidth = Math.max(groupElement.scrollWidth, groupElement.getBoundingClientRect().width, 1);
|
|
10378
|
+
const nextLoopGapPixels = this.hasSingleNewsItem() ? viewportWidth : 0;
|
|
10367
10379
|
const normalizedSpeed = this.normalizeSpeed(this.speed);
|
|
10368
|
-
const
|
|
10369
|
-
|
|
10370
|
-
|
|
10371
|
-
|
|
10380
|
+
const travelDistance = this.loop
|
|
10381
|
+
? groupContentWidth + nextLoopGapPixels
|
|
10382
|
+
: groupContentWidth + viewportWidth;
|
|
10383
|
+
const nextDuration = Math.max(1, travelDistance / normalizedSpeed);
|
|
10384
|
+
const durationChanged = Math.abs(nextDuration - this.animationDurationSeconds) >= 0.01;
|
|
10385
|
+
const loopGapChanged = Math.abs(nextLoopGapPixels - this.loopGapPixels) >= 0.5;
|
|
10386
|
+
this.loopGapPixels = nextLoopGapPixels;
|
|
10372
10387
|
this.animationDurationSeconds = nextDuration;
|
|
10373
|
-
|
|
10388
|
+
if (durationChanged || loopGapChanged) {
|
|
10389
|
+
this.changeDetectorRef.markForCheck();
|
|
10390
|
+
}
|
|
10374
10391
|
}
|
|
10375
10392
|
normalizeNews(news) {
|
|
10376
10393
|
if (!Array.isArray(news)) {
|
|
10377
10394
|
return [];
|
|
10378
10395
|
}
|
|
10379
|
-
|
|
10396
|
+
const normalizedItems = news
|
|
10380
10397
|
.filter((item) => item &&
|
|
10381
10398
|
item.id !== null &&
|
|
10382
10399
|
item.id !== undefined &&
|
|
10383
10400
|
String(item.text ?? '').trim().length > 0)
|
|
10384
10401
|
.map((item) => this.normalizeItem(item));
|
|
10402
|
+
const itemsById = new Map();
|
|
10403
|
+
normalizedItems.forEach((item) => {
|
|
10404
|
+
itemsById.set(String(item.id), item);
|
|
10405
|
+
});
|
|
10406
|
+
return Array.from(itemsById.values());
|
|
10385
10407
|
}
|
|
10386
10408
|
normalizeItem(item) {
|
|
10387
10409
|
return {
|
|
@@ -10489,11 +10511,11 @@ class PTNewsTickerComponent {
|
|
|
10489
10511
|
}
|
|
10490
10512
|
}
|
|
10491
10513
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10492
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNewsTickerComponent, isStandalone: false, selector: "pt-news-ticker", inputs: { news: "news", speed: "speed", defaultSpeed: "defaultSpeed", speedStep: "speedStep", minSpeed: "minSpeed", maxSpeed: "maxSpeed", direction: "direction", autoplay: "autoplay", loop: "loop", pauseOnHover: "pauseOnHover", showControls: "showControls", showPlayPauseControl: "showPlayPauseControl", showSpeedControls: "showSpeedControls", showResetSpeedControl: "showResetSpeedControl", showRemoveButton: "showRemoveButton", showSpeedValue: "showSpeedValue", showNewBadge: "showNewBadge", newBadgeText: "newBadgeText", newBadgeDuration: "newBadgeDuration", height: "height", gap: "gap", itemGap: "itemGap", containerBackgroundColor: "containerBackgroundColor", containerTextColor: "containerTextColor", borderColor: "borderColor", borderWidth: "borderWidth", borderRadius: "borderRadius", controlsBackgroundColor: "controlsBackgroundColor", controlsBorderColor: "controlsBorderColor", emptyMessage: "emptyMessage", emptyIcon: "emptyIcon", ariaLabel: "ariaLabel" }, outputs: { newsClick: "newsClick", newsRemove: "newsRemove", newsChange: "newsChange", playStateChange: "playStateChange", speedChange: "speedChange" }, viewQueries: [{ propertyName: "tickerViewport", first: true, predicate: ["tickerViewport"], descendants: true }, { propertyName: "tickerTrack", first: true, predicate: ["tickerTrack"], descendants: true }, { propertyName: "tickerGroup", first: true, predicate: ["tickerGroup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-news-ticker\"\n [ngStyle]=\"getContainerStyle()\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"region\"\n>\n @if (showControls) {\n <div class=\"pt-news-ticker__controls\">\n @if (showPlayPauseControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n [icon]=\"playing ? 'pi pi-pause' : 'pi pi-play'\"\n [pTooltip]=\"playing ? 'Mettre en pause' : 'Reprendre'\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"\n playing ? 'Mettre le ruban en pause' : 'Reprendre le ruban'\n \"\n (click)=\"togglePlayState()\"\n ></button>\n }\n\n @if (showSpeedControls) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-minus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Ralentir\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Ralentir le ruban\"\n [disabled]=\"speed <= minSpeed\"\n (click)=\"decreaseSpeed()\"\n ></button>\n\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Acc\u00E9l\u00E9rer\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Acc\u00E9l\u00E9rer le ruban\"\n [disabled]=\"speed >= maxSpeed\"\n (click)=\"increaseSpeed()\"\n ></button>\n }\n\n @if (showResetSpeedControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-refresh\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"R\u00E9initialiser la vitesse\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"R\u00E9initialiser la vitesse\"\n [disabled]=\"speed === defaultSpeed\"\n (click)=\"resetSpeed()\"\n ></button>\n }\n\n @if (showSpeedValue) {\n <span\n class=\"pt-news-ticker__speed\"\n [attr.aria-label]=\"'Vitesse ' + speed + ' pixels par seconde'\"\n >\n {{ speed }} px/s\n </span>\n }\n </div>\n }\n\n <div\n #tickerViewport\n class=\"pt-news-ticker__viewport\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n @if (internalNews.length > 0) {\n <div\n #tickerTrack\n class=\"pt-news-ticker__track\"\n [class.pt-news-ticker__track--single]=\"!loop\"\n [ngStyle]=\"getTrackStyle()\"\n (animationiteration)=\"onTrackAnimationIteration($event)\"\n (animationend)=\"onTrackAnimationEnd($event)\"\n >\n <div\n #tickerGroup\n class=\"pt-news-ticker__group\"\n [attr.aria-hidden]=\"false\"\n >\n @for (item of internalNews; track getTrackById($index, item)) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-label]=\"\n hasItemLink(item) ? item.text + ', ouvrir le lien' : item.text\n \"\n [attr.role]=\"getItemRole(item)\"\n [attr.tabindex]=\"getItemTabIndex(item)\"\n (click)=\"onItemClick($event, item)\"\n (keydown.enter)=\"onItemClick($event, item)\"\n (keydown.space)=\"onItemClick($event, item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n [pTooltip]=\"segment.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-times\"\n class=\"pt-news-ticker__remove-button p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Supprimer l\u2019actualit\u00E9\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"'Supprimer : ' + item.text\"\n (click)=\"onRemoveClick($event, item)\"\n ></button>\n }\n </article>\n }\n </div>\n\n @if (loop) {\n <div class=\"pt-news-ticker__group\" aria-hidden=\"true\">\n @for (\n item of internalNews;\n track getDuplicateTrackById($index, item)\n ) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getDuplicateItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <span\n class=\"pt-news-ticker__duplicate-remove-placeholder\"\n aria-hidden=\"true\"\n >\n <i class=\"pi pi-times\"></i>\n </span>\n }\n </article>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-news-ticker__empty\">\n @if (emptyIcon) {\n <i [ngClass]=\"emptyIcon\" aria-hidden=\"true\"></i>\n }\n\n <span>{{ emptyMessage }}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-news-ticker{display:flex;align-items:stretch;width:100%;min-width:0;max-width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;border:var(--pt-news-ticker-border-width, 1px) solid var(--pt-news-ticker-border-color, #e2e8f0);border-radius:var(--pt-news-ticker-border-radius, 8px);background:var(--pt-news-ticker-background, #ffffff);color:var(--pt-news-ticker-text-color, #0f172a)}.pt-news-ticker__controls{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.1rem;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.25rem .4rem;border-right:1px solid var(--pt-news-ticker-controls-border-color, #e2e8f0);background:var(--pt-news-ticker-controls-background, #f8fafc)}.pt-news-ticker__controls ::ng-deep .p-button.p-button-rounded.p-button-text{width:1.9rem;min-width:1.9rem;height:1.9rem;padding:0}.pt-news-ticker__controls ::ng-deep .p-button .p-button-icon{font-size:.78rem}.pt-news-ticker__speed{min-width:3.5rem;padding:0 .35rem;color:#475569;font-size:.7rem;font-weight:700;text-align:center;white-space:nowrap}.pt-news-ticker__viewport{position:relative;display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;contain:layout paint}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{position:absolute;z-index:3;top:0;bottom:0;width:2.5rem;content:\"\";pointer-events:none}.pt-news-ticker__viewport:before{left:0;background:linear-gradient(to right,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__viewport:after{right:0;background:linear-gradient(to left,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;transform:translateZ(0);animation-name:pt-news-ticker-scroll;animation-duration:var(--pt-news-ticker-duration, 20s);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.pt-news-ticker__track--single{animation-iteration-count:1;animation-fill-mode:forwards}.pt-news-ticker__group{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-ticker-gap, 2rem);min-width:max-content;padding-right:var(--pt-news-ticker-gap, 2rem)}.pt-news-ticker__item{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-item-gap, .5rem);min-height:2.25rem;max-width:48rem;padding:.35rem .65rem;overflow:hidden;border:1px solid var(--pt-news-item-border-color, transparent);border-radius:999px;outline:none;background:var(--pt-news-item-background, transparent);color:var( --pt-news-item-text-color, var(--pt-news-ticker-text-color, #0f172a) );line-height:1.25;white-space:nowrap;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}.pt-news-ticker__item--info,.pt-news-ticker__item--default{background:transparent}.pt-news-ticker__item--clickable,.pt-news-ticker__item--link{cursor:pointer}.pt-news-ticker__item--clickable:hover,.pt-news-ticker__item--link:hover{box-shadow:0 3px 10px #0f172a1f;transform:translateY(-1px)}.pt-news-ticker__item:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-color, #3b82f6)}.pt-news-ticker__item--disabled{cursor:not-allowed;opacity:.5}.pt-news-ticker__item-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--pt-news-item-icon-color, currentColor);font-size:.95rem}.pt-news-ticker__content{display:inline-flex;align-items:center;flex:0 0 auto;gap:.55rem;min-width:0}.pt-news-ticker__item-title{display:inline-block;flex:0 0 auto;overflow:hidden;font-size:.85rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__item-text{display:block;flex:1 1 auto;min-width:0;overflow:hidden;font-size:.85rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__segments{display:inline-flex;align-items:center;flex:0 0 auto;gap:.45rem;white-space:nowrap}.pt-news-ticker__segment{display:inline-flex;align-items:center;flex:0 0 auto;gap:.22rem;color:var(--pt-news-segment-color, currentColor);font-size:.82rem;font-weight:700;white-space:nowrap}.pt-news-ticker__segment-label{color:inherit;font-weight:700}.pt-news-ticker__segment-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pt-news-segment-icon-color, currentColor);font-size:.68rem;font-weight:700}.pt-news-ticker__segment-value{color:inherit;font-variant-numeric:tabular-nums;font-weight:800}.pt-news-ticker__segment-separator{color:#94a3b8;font-size:.75rem;font-weight:700}.pt-news-ticker__new-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:1.15rem;padding:.12rem .42rem;border:1px solid #93c5fd;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;animation:pt-news-ticker-new-badge-pulse 1.5s ease-in-out infinite}.pt-news-ticker__item--flash .pt-news-ticker__new-badge{border-color:#ffffffb3;background:#fff;color:#b91c1c}.pt-news-ticker__item--danger .pt-news-ticker__new-badge{border-color:#ffffffbf;background:#fff;color:#b91c1c}.pt-news-ticker__link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor;font-size:.72rem;opacity:.75}.pt-news-ticker__item--link:hover .pt-news-ticker__link-icon{opacity:1}.pt-news-ticker__remove-button{flex:0 0 auto}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button{width:1.45rem;min-width:1.45rem;height:1.45rem;padding:0;color:currentColor}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button .p-button-icon{font-size:.65rem}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button:not(:disabled):hover{background:#0f172a1a}.pt-news-ticker__duplicate-remove-placeholder{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.45rem;min-width:1.45rem;height:1.45rem;opacity:0;pointer-events:none}.pt-news-ticker__duplicate-remove-placeholder .pi{font-size:.65rem}.pt-news-ticker__item--flash{border-color:var(--pt-news-item-border-color, #991b1b);color:var(--pt-news-flash-text-color, #ffffff);animation-name:pt-news-ticker-flash;animation-duration:var(--pt-news-flash-duration, .7s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.pt-news-ticker__item--flash .pt-news-ticker__item-icon{color:var(--pt-news-item-icon-color, #ffffff)}.pt-news-ticker__empty{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.75rem 1rem;color:#64748b;font-size:.85rem;font-weight:500;text-align:center}.pt-news-ticker__empty .pi{font-size:1rem}@keyframes pt-news-ticker-scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes pt-news-ticker-flash{0%{background-color:var(--pt-news-flash-background, #dc2626)}to{background-color:var(--pt-news-flash-alternate-background, #7f1d1d)}}@keyframes pt-news-ticker-new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.96)}}@media(max-width:768px){.pt-news-ticker{min-height:3rem}.pt-news-ticker__controls{padding-right:.25rem;padding-left:.25rem}.pt-news-ticker__speed{display:none}.pt-news-ticker__item{max-width:34rem}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{width:1.25rem}}@media(max-width:480px){.pt-news-ticker__item{max-width:24rem}.pt-news-ticker__item-title,.pt-news-ticker__item-text{font-size:.78rem}.pt-news-ticker__segment{font-size:.75rem}.pt-news-ticker__new-badge{font-size:.56rem}}@media(prefers-reduced-motion:reduce){.pt-news-ticker__track{animation:none!important;transform:none!important}.pt-news-ticker__item--flash{animation:none!important;background-color:var(--pt-news-flash-background, #dc2626)!important}.pt-news-ticker__new-badge{animation:none!important}.pt-news-ticker__viewport{overflow-x:auto;contain:none}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] }); }
|
|
10514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNewsTickerComponent, isStandalone: false, selector: "pt-news-ticker", inputs: { news: "news", speed: "speed", defaultSpeed: "defaultSpeed", speedStep: "speedStep", minSpeed: "minSpeed", maxSpeed: "maxSpeed", direction: "direction", autoplay: "autoplay", loop: "loop", pauseOnHover: "pauseOnHover", showControls: "showControls", showPlayPauseControl: "showPlayPauseControl", showSpeedControls: "showSpeedControls", showResetSpeedControl: "showResetSpeedControl", showRemoveButton: "showRemoveButton", showSpeedValue: "showSpeedValue", showNewBadge: "showNewBadge", newBadgeText: "newBadgeText", newBadgeDuration: "newBadgeDuration", height: "height", gap: "gap", itemGap: "itemGap", containerBackgroundColor: "containerBackgroundColor", containerTextColor: "containerTextColor", borderColor: "borderColor", borderWidth: "borderWidth", borderRadius: "borderRadius", controlsBackgroundColor: "controlsBackgroundColor", controlsBorderColor: "controlsBorderColor", emptyMessage: "emptyMessage", emptyIcon: "emptyIcon", ariaLabel: "ariaLabel" }, outputs: { newsClick: "newsClick", newsRemove: "newsRemove", newsChange: "newsChange", playStateChange: "playStateChange", speedChange: "speedChange" }, viewQueries: [{ propertyName: "tickerViewport", first: true, predicate: ["tickerViewport"], descendants: true }, { propertyName: "tickerTrack", first: true, predicate: ["tickerTrack"], descendants: true }, { propertyName: "tickerGroup", first: true, predicate: ["tickerGroup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-news-ticker\"\n [ngStyle]=\"getContainerStyle()\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"region\"\n>\n @if (showControls) {\n <div class=\"pt-news-ticker__controls\">\n @if (showPlayPauseControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n [icon]=\"playing ? 'pi pi-pause' : 'pi pi-play'\"\n [pTooltip]=\"playing ? 'Mettre en pause' : 'Reprendre'\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"\n playing ? 'Mettre le ruban en pause' : 'Reprendre le ruban'\n \"\n (click)=\"togglePlayState()\"\n ></button>\n }\n\n @if (showSpeedControls) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-minus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Ralentir\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Ralentir le ruban\"\n [disabled]=\"speed <= minSpeed\"\n (click)=\"decreaseSpeed()\"\n ></button>\n\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Acc\u00E9l\u00E9rer\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Acc\u00E9l\u00E9rer le ruban\"\n [disabled]=\"speed >= maxSpeed\"\n (click)=\"increaseSpeed()\"\n ></button>\n }\n\n @if (showResetSpeedControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-refresh\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"R\u00E9initialiser la vitesse\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"R\u00E9initialiser la vitesse\"\n [disabled]=\"speed === defaultSpeed\"\n (click)=\"resetSpeed()\"\n ></button>\n }\n\n @if (showSpeedValue) {\n <span\n class=\"pt-news-ticker__speed\"\n [attr.aria-label]=\"'Vitesse ' + speed + ' pixels par seconde'\"\n >\n {{ speed }} px/s\n </span>\n }\n </div>\n }\n\n <div\n #tickerViewport\n class=\"pt-news-ticker__viewport\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n @if (internalNews.length > 0) {\n <div\n #tickerTrack\n class=\"pt-news-ticker__track\"\n [class.pt-news-ticker__track--single]=\"!loop\"\n [ngStyle]=\"getTrackStyle()\"\n (animationiteration)=\"onTrackAnimationIteration($event)\"\n (animationend)=\"onTrackAnimationEnd($event)\"\n >\n <div\n #tickerGroup\n class=\"pt-news-ticker__group\"\n [class.pt-news-ticker__group--single]=\"hasSingleNewsItem()\"\n [attr.aria-hidden]=\"false\"\n >\n @for (item of internalNews; track getTrackById($index, item)) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-label]=\"\n hasItemLink(item) ? item.text + ', ouvrir le lien' : item.text\n \"\n [attr.role]=\"getItemRole(item)\"\n [attr.tabindex]=\"getItemTabIndex(item)\"\n (click)=\"onItemClick($event, item)\"\n (keydown.enter)=\"onItemClick($event, item)\"\n (keydown.space)=\"onItemClick($event, item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n [pTooltip]=\"segment.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-times\"\n class=\"pt-news-ticker__remove-button p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Supprimer l\u2019actualit\u00E9\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"'Supprimer : ' + item.text\"\n (click)=\"onRemoveClick($event, item)\"\n ></button>\n }\n </article>\n }\n </div>\n\n @if (loop) {\n <div\n class=\"pt-news-ticker__group\"\n [class.pt-news-ticker__group--single]=\"hasSingleNewsItem()\"\n aria-hidden=\"true\"\n >\n @for (\n item of internalNews;\n track getDuplicateTrackById($index, item)\n ) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getDuplicateItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <span\n class=\"pt-news-ticker__duplicate-remove-placeholder\"\n aria-hidden=\"true\"\n >\n <i class=\"pi pi-times\"></i>\n </span>\n }\n </article>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-news-ticker__empty\">\n @if (emptyIcon) {\n <i [ngClass]=\"emptyIcon\" aria-hidden=\"true\"></i>\n }\n\n <span>{{ emptyMessage }}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-news-ticker{display:flex;align-items:stretch;width:100%;min-width:0;max-width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;border:var(--pt-news-ticker-border-width, 1px) solid var(--pt-news-ticker-border-color, #e2e8f0);border-radius:var(--pt-news-ticker-border-radius, 8px);background:var(--pt-news-ticker-background, #ffffff);color:var(--pt-news-ticker-text-color, #0f172a)}.pt-news-ticker__controls{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.1rem;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.25rem .4rem;border-right:1px solid var(--pt-news-ticker-controls-border-color, #e2e8f0);background:var(--pt-news-ticker-controls-background, #f8fafc)}.pt-news-ticker__controls ::ng-deep .p-button.p-button-rounded.p-button-text{width:1.9rem;min-width:1.9rem;height:1.9rem;padding:0}.pt-news-ticker__controls ::ng-deep .p-button .p-button-icon{font-size:.78rem}.pt-news-ticker__speed{min-width:3.5rem;padding:0 .35rem;color:#475569;font-size:.7rem;font-weight:700;text-align:center;white-space:nowrap}.pt-news-ticker__viewport{position:relative;display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;contain:layout paint}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{position:absolute;z-index:3;top:0;bottom:0;width:2.5rem;content:\"\";pointer-events:none}.pt-news-ticker__viewport:before{left:0;background:linear-gradient(to right,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__viewport:after{right:0;background:linear-gradient(to left,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;transform:translateZ(0);animation-name:pt-news-ticker-scroll;animation-duration:var(--pt-news-ticker-duration, 20s);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.pt-news-ticker__track--single{animation-iteration-count:1;animation-fill-mode:forwards}.pt-news-ticker__group{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-ticker-gap, 2rem);width:max-content;min-width:max-content;padding-right:var(--pt-news-ticker-gap, 2rem)}.pt-news-ticker__group--single{padding-right:max(var(--pt-news-ticker-gap, 2rem),var(--pt-news-ticker-loop-gap, 0px))}.pt-news-ticker__item{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-item-gap, .5rem);width:max-content;min-width:max-content;max-width:none;min-height:2.25rem;padding:.35rem .65rem;overflow:visible;border:1px solid var(--pt-news-item-border-color, transparent);border-radius:999px;outline:none;background:var(--pt-news-item-background, transparent);color:var( --pt-news-item-text-color, var(--pt-news-ticker-text-color, #0f172a) );line-height:1.25;white-space:nowrap;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}.pt-news-ticker__item--info,.pt-news-ticker__item--default{background:transparent}.pt-news-ticker__item--clickable,.pt-news-ticker__item--link{cursor:pointer}.pt-news-ticker__item--clickable:hover,.pt-news-ticker__item--link:hover{box-shadow:0 3px 10px #0f172a1f;transform:translateY(-1px)}.pt-news-ticker__item:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-color, #3b82f6)}.pt-news-ticker__item--disabled{cursor:not-allowed;opacity:.5}.pt-news-ticker__item-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--pt-news-item-icon-color, currentColor);font-size:.95rem}.pt-news-ticker__content{display:inline-flex;align-items:center;flex:0 0 auto;gap:.55rem;width:max-content;min-width:max-content;overflow:visible;white-space:nowrap}.pt-news-ticker__item-title{display:inline-block;flex:0 0 auto;width:max-content;min-width:max-content;overflow:visible;font-size:.85rem;font-weight:700;text-overflow:clip;white-space:nowrap}.pt-news-ticker__item-text{display:block;flex:0 0 auto;width:max-content;min-width:max-content;overflow:visible;font-size:.85rem;font-weight:600;text-overflow:clip;white-space:nowrap}.pt-news-ticker__segments{display:inline-flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;gap:.45rem;overflow:visible;white-space:nowrap}.pt-news-ticker__segment{display:inline-flex;align-items:center;flex:0 0 auto;gap:.22rem;color:var(--pt-news-segment-color, currentColor);font-size:.82rem;font-weight:700;white-space:nowrap}.pt-news-ticker__segment-label{color:inherit;font-weight:700}.pt-news-ticker__segment-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pt-news-segment-icon-color, currentColor);font-size:.68rem;font-weight:700}.pt-news-ticker__segment-value{color:inherit;font-variant-numeric:tabular-nums;font-weight:800}.pt-news-ticker__segment-separator{color:#94a3b8;font-size:.75rem;font-weight:700}.pt-news-ticker__new-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:1.15rem;padding:.12rem .42rem;border:1px solid #93c5fd;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;animation:pt-news-ticker-new-badge-pulse 1.5s ease-in-out infinite}.pt-news-ticker__item--flash .pt-news-ticker__new-badge{border-color:#ffffffb3;background:#fff;color:#b91c1c}.pt-news-ticker__item--danger .pt-news-ticker__new-badge{border-color:#ffffffbf;background:#fff;color:#b91c1c}.pt-news-ticker__link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor;font-size:.72rem;opacity:.75}.pt-news-ticker__item--link:hover .pt-news-ticker__link-icon{opacity:1}.pt-news-ticker__remove-button{flex:0 0 auto}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button{width:1.45rem;min-width:1.45rem;height:1.45rem;padding:0;color:currentColor}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button .p-button-icon{font-size:.65rem}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button:not(:disabled):hover{background:#0f172a1a}.pt-news-ticker__duplicate-remove-placeholder{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.45rem;min-width:1.45rem;height:1.45rem;opacity:0;pointer-events:none}.pt-news-ticker__duplicate-remove-placeholder .pi{font-size:.65rem}.pt-news-ticker__item--flash{border-color:var(--pt-news-item-border-color, #991b1b);color:var(--pt-news-flash-text-color, #ffffff);animation-name:pt-news-ticker-flash;animation-duration:var(--pt-news-flash-duration, .7s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.pt-news-ticker__item--flash .pt-news-ticker__item-icon{color:var(--pt-news-item-icon-color, #ffffff)}.pt-news-ticker__empty{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.75rem 1rem;color:#64748b;font-size:.85rem;font-weight:500;text-align:center}.pt-news-ticker__empty .pi{font-size:1rem}@keyframes pt-news-ticker-scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes pt-news-ticker-flash{0%{background-color:var(--pt-news-flash-background, #dc2626)}to{background-color:var(--pt-news-flash-alternate-background, #7f1d1d)}}@keyframes pt-news-ticker-new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.96)}}@media(max-width:768px){.pt-news-ticker{min-height:3rem}.pt-news-ticker__controls{padding-right:.25rem;padding-left:.25rem}.pt-news-ticker__speed{display:none}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{width:1.25rem}}@media(max-width:480px){.pt-news-ticker__item-title,.pt-news-ticker__item-text{font-size:.78rem}.pt-news-ticker__segment{font-size:.75rem}.pt-news-ticker__new-badge{font-size:.56rem}}@media(prefers-reduced-motion:reduce){.pt-news-ticker__track{animation:none!important;transform:none!important}.pt-news-ticker__item--flash{animation:none!important;background-color:var(--pt-news-flash-background, #dc2626)!important}.pt-news-ticker__new-badge{animation:none!important}.pt-news-ticker__viewport{overflow-x:auto;contain:none}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] }); }
|
|
10493
10515
|
}
|
|
10494
10516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerComponent, decorators: [{
|
|
10495
10517
|
type: Component,
|
|
10496
|
-
args: [{ selector: 'pt-news-ticker', standalone: false, template: "<div\n class=\"pt-news-ticker\"\n [ngStyle]=\"getContainerStyle()\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"region\"\n>\n @if (showControls) {\n <div class=\"pt-news-ticker__controls\">\n @if (showPlayPauseControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n [icon]=\"playing ? 'pi pi-pause' : 'pi pi-play'\"\n [pTooltip]=\"playing ? 'Mettre en pause' : 'Reprendre'\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"\n playing ? 'Mettre le ruban en pause' : 'Reprendre le ruban'\n \"\n (click)=\"togglePlayState()\"\n ></button>\n }\n\n @if (showSpeedControls) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-minus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Ralentir\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Ralentir le ruban\"\n [disabled]=\"speed <= minSpeed\"\n (click)=\"decreaseSpeed()\"\n ></button>\n\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Acc\u00E9l\u00E9rer\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Acc\u00E9l\u00E9rer le ruban\"\n [disabled]=\"speed >= maxSpeed\"\n (click)=\"increaseSpeed()\"\n ></button>\n }\n\n @if (showResetSpeedControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-refresh\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"R\u00E9initialiser la vitesse\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"R\u00E9initialiser la vitesse\"\n [disabled]=\"speed === defaultSpeed\"\n (click)=\"resetSpeed()\"\n ></button>\n }\n\n @if (showSpeedValue) {\n <span\n class=\"pt-news-ticker__speed\"\n [attr.aria-label]=\"'Vitesse ' + speed + ' pixels par seconde'\"\n >\n {{ speed }} px/s\n </span>\n }\n </div>\n }\n\n <div\n #tickerViewport\n class=\"pt-news-ticker__viewport\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n @if (internalNews.length > 0) {\n <div\n #tickerTrack\n class=\"pt-news-ticker__track\"\n [class.pt-news-ticker__track--single]=\"!loop\"\n [ngStyle]=\"getTrackStyle()\"\n (animationiteration)=\"onTrackAnimationIteration($event)\"\n (animationend)=\"onTrackAnimationEnd($event)\"\n >\n <div\n #tickerGroup\n class=\"pt-news-ticker__group\"\n [attr.aria-hidden]=\"false\"\n >\n @for (item of internalNews; track getTrackById($index, item)) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-label]=\"\n hasItemLink(item) ? item.text + ', ouvrir le lien' : item.text\n \"\n [attr.role]=\"getItemRole(item)\"\n [attr.tabindex]=\"getItemTabIndex(item)\"\n (click)=\"onItemClick($event, item)\"\n (keydown.enter)=\"onItemClick($event, item)\"\n (keydown.space)=\"onItemClick($event, item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n [pTooltip]=\"segment.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-times\"\n class=\"pt-news-ticker__remove-button p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Supprimer l\u2019actualit\u00E9\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"'Supprimer : ' + item.text\"\n (click)=\"onRemoveClick($event, item)\"\n ></button>\n }\n </article>\n }\n </div>\n\n @if (loop) {\n <div class=\"pt-news-ticker__group\" aria-hidden=\"true\">\n @for (\n item of internalNews;\n track getDuplicateTrackById($index, item)\n ) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getDuplicateItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <span\n class=\"pt-news-ticker__duplicate-remove-placeholder\"\n aria-hidden=\"true\"\n >\n <i class=\"pi pi-times\"></i>\n </span>\n }\n </article>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-news-ticker__empty\">\n @if (emptyIcon) {\n <i [ngClass]=\"emptyIcon\" aria-hidden=\"true\"></i>\n }\n\n <span>{{ emptyMessage }}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-news-ticker{display:flex;align-items:stretch;width:100%;min-width:0;max-width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;border:var(--pt-news-ticker-border-width, 1px) solid var(--pt-news-ticker-border-color, #e2e8f0);border-radius:var(--pt-news-ticker-border-radius, 8px);background:var(--pt-news-ticker-background, #ffffff);color:var(--pt-news-ticker-text-color, #0f172a)}.pt-news-ticker__controls{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.1rem;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.25rem .4rem;border-right:1px solid var(--pt-news-ticker-controls-border-color, #e2e8f0);background:var(--pt-news-ticker-controls-background, #f8fafc)}.pt-news-ticker__controls ::ng-deep .p-button.p-button-rounded.p-button-text{width:1.9rem;min-width:1.9rem;height:1.9rem;padding:0}.pt-news-ticker__controls ::ng-deep .p-button .p-button-icon{font-size:.78rem}.pt-news-ticker__speed{min-width:3.5rem;padding:0 .35rem;color:#475569;font-size:.7rem;font-weight:700;text-align:center;white-space:nowrap}.pt-news-ticker__viewport{position:relative;display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;contain:layout paint}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{position:absolute;z-index:3;top:0;bottom:0;width:2.5rem;content:\"\";pointer-events:none}.pt-news-ticker__viewport:before{left:0;background:linear-gradient(to right,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__viewport:after{right:0;background:linear-gradient(to left,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;transform:translateZ(0);animation-name:pt-news-ticker-scroll;animation-duration:var(--pt-news-ticker-duration, 20s);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.pt-news-ticker__track--single{animation-iteration-count:1;animation-fill-mode:forwards}.pt-news-ticker__group{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-ticker-gap, 2rem);min-width:max-content;padding-right:var(--pt-news-ticker-gap, 2rem)}.pt-news-ticker__item{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-item-gap, .5rem);min-height:2.25rem;max-width:48rem;padding:.35rem .65rem;overflow:hidden;border:1px solid var(--pt-news-item-border-color, transparent);border-radius:999px;outline:none;background:var(--pt-news-item-background, transparent);color:var( --pt-news-item-text-color, var(--pt-news-ticker-text-color, #0f172a) );line-height:1.25;white-space:nowrap;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}.pt-news-ticker__item--info,.pt-news-ticker__item--default{background:transparent}.pt-news-ticker__item--clickable,.pt-news-ticker__item--link{cursor:pointer}.pt-news-ticker__item--clickable:hover,.pt-news-ticker__item--link:hover{box-shadow:0 3px 10px #0f172a1f;transform:translateY(-1px)}.pt-news-ticker__item:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-color, #3b82f6)}.pt-news-ticker__item--disabled{cursor:not-allowed;opacity:.5}.pt-news-ticker__item-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--pt-news-item-icon-color, currentColor);font-size:.95rem}.pt-news-ticker__content{display:inline-flex;align-items:center;flex:0 0 auto;gap:.55rem;min-width:0}.pt-news-ticker__item-title{display:inline-block;flex:0 0 auto;overflow:hidden;font-size:.85rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__item-text{display:block;flex:1 1 auto;min-width:0;overflow:hidden;font-size:.85rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__segments{display:inline-flex;align-items:center;flex:0 0 auto;gap:.45rem;white-space:nowrap}.pt-news-ticker__segment{display:inline-flex;align-items:center;flex:0 0 auto;gap:.22rem;color:var(--pt-news-segment-color, currentColor);font-size:.82rem;font-weight:700;white-space:nowrap}.pt-news-ticker__segment-label{color:inherit;font-weight:700}.pt-news-ticker__segment-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pt-news-segment-icon-color, currentColor);font-size:.68rem;font-weight:700}.pt-news-ticker__segment-value{color:inherit;font-variant-numeric:tabular-nums;font-weight:800}.pt-news-ticker__segment-separator{color:#94a3b8;font-size:.75rem;font-weight:700}.pt-news-ticker__new-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:1.15rem;padding:.12rem .42rem;border:1px solid #93c5fd;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;animation:pt-news-ticker-new-badge-pulse 1.5s ease-in-out infinite}.pt-news-ticker__item--flash .pt-news-ticker__new-badge{border-color:#ffffffb3;background:#fff;color:#b91c1c}.pt-news-ticker__item--danger .pt-news-ticker__new-badge{border-color:#ffffffbf;background:#fff;color:#b91c1c}.pt-news-ticker__link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor;font-size:.72rem;opacity:.75}.pt-news-ticker__item--link:hover .pt-news-ticker__link-icon{opacity:1}.pt-news-ticker__remove-button{flex:0 0 auto}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button{width:1.45rem;min-width:1.45rem;height:1.45rem;padding:0;color:currentColor}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button .p-button-icon{font-size:.65rem}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button:not(:disabled):hover{background:#0f172a1a}.pt-news-ticker__duplicate-remove-placeholder{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.45rem;min-width:1.45rem;height:1.45rem;opacity:0;pointer-events:none}.pt-news-ticker__duplicate-remove-placeholder .pi{font-size:.65rem}.pt-news-ticker__item--flash{border-color:var(--pt-news-item-border-color, #991b1b);color:var(--pt-news-flash-text-color, #ffffff);animation-name:pt-news-ticker-flash;animation-duration:var(--pt-news-flash-duration, .7s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.pt-news-ticker__item--flash .pt-news-ticker__item-icon{color:var(--pt-news-item-icon-color, #ffffff)}.pt-news-ticker__empty{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.75rem 1rem;color:#64748b;font-size:.85rem;font-weight:500;text-align:center}.pt-news-ticker__empty .pi{font-size:1rem}@keyframes pt-news-ticker-scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes pt-news-ticker-flash{0%{background-color:var(--pt-news-flash-background, #dc2626)}to{background-color:var(--pt-news-flash-alternate-background, #7f1d1d)}}@keyframes pt-news-ticker-new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.96)}}@media(max-width:768px){.pt-news-ticker{min-height:3rem}.pt-news-ticker__controls{padding-right:.25rem;padding-left:.25rem}.pt-news-ticker__speed{display:none}.pt-news-ticker__item{max-width:34rem}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{width:1.25rem}}@media(max-width:480px){.pt-news-ticker__item{max-width:24rem}.pt-news-ticker__item-title,.pt-news-ticker__item-text{font-size:.78rem}.pt-news-ticker__segment{font-size:.75rem}.pt-news-ticker__new-badge{font-size:.56rem}}@media(prefers-reduced-motion:reduce){.pt-news-ticker__track{animation:none!important;transform:none!important}.pt-news-ticker__item--flash{animation:none!important;background-color:var(--pt-news-flash-background, #dc2626)!important}.pt-news-ticker__new-badge{animation:none!important}.pt-news-ticker__viewport{overflow-x:auto;contain:none}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{display:none}}\n"] }]
|
|
10518
|
+
args: [{ selector: 'pt-news-ticker', standalone: false, template: "<div\n class=\"pt-news-ticker\"\n [ngStyle]=\"getContainerStyle()\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"region\"\n>\n @if (showControls) {\n <div class=\"pt-news-ticker__controls\">\n @if (showPlayPauseControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n [icon]=\"playing ? 'pi pi-pause' : 'pi pi-play'\"\n [pTooltip]=\"playing ? 'Mettre en pause' : 'Reprendre'\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"\n playing ? 'Mettre le ruban en pause' : 'Reprendre le ruban'\n \"\n (click)=\"togglePlayState()\"\n ></button>\n }\n\n @if (showSpeedControls) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-minus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Ralentir\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Ralentir le ruban\"\n [disabled]=\"speed <= minSpeed\"\n (click)=\"decreaseSpeed()\"\n ></button>\n\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Acc\u00E9l\u00E9rer\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"Acc\u00E9l\u00E9rer le ruban\"\n [disabled]=\"speed >= maxSpeed\"\n (click)=\"increaseSpeed()\"\n ></button>\n }\n\n @if (showResetSpeedControl) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-refresh\"\n class=\"p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"R\u00E9initialiser la vitesse\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n aria-label=\"R\u00E9initialiser la vitesse\"\n [disabled]=\"speed === defaultSpeed\"\n (click)=\"resetSpeed()\"\n ></button>\n }\n\n @if (showSpeedValue) {\n <span\n class=\"pt-news-ticker__speed\"\n [attr.aria-label]=\"'Vitesse ' + speed + ' pixels par seconde'\"\n >\n {{ speed }} px/s\n </span>\n }\n </div>\n }\n\n <div\n #tickerViewport\n class=\"pt-news-ticker__viewport\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n @if (internalNews.length > 0) {\n <div\n #tickerTrack\n class=\"pt-news-ticker__track\"\n [class.pt-news-ticker__track--single]=\"!loop\"\n [ngStyle]=\"getTrackStyle()\"\n (animationiteration)=\"onTrackAnimationIteration($event)\"\n (animationend)=\"onTrackAnimationEnd($event)\"\n >\n <div\n #tickerGroup\n class=\"pt-news-ticker__group\"\n [class.pt-news-ticker__group--single]=\"hasSingleNewsItem()\"\n [attr.aria-hidden]=\"false\"\n >\n @for (item of internalNews; track getTrackById($index, item)) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-label]=\"\n hasItemLink(item) ? item.text + ', ouvrir le lien' : item.text\n \"\n [attr.role]=\"getItemRole(item)\"\n [attr.tabindex]=\"getItemTabIndex(item)\"\n (click)=\"onItemClick($event, item)\"\n (keydown.enter)=\"onItemClick($event, item)\"\n (keydown.space)=\"onItemClick($event, item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n [pTooltip]=\"segment.tooltip || ''\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <button\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-times\"\n class=\"pt-news-ticker__remove-button p-button-rounded p-button-text p-button-sm\"\n pTooltip=\"Supprimer l\u2019actualit\u00E9\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n [attr.aria-label]=\"'Supprimer : ' + item.text\"\n (click)=\"onRemoveClick($event, item)\"\n ></button>\n }\n </article>\n }\n </div>\n\n @if (loop) {\n <div\n class=\"pt-news-ticker__group\"\n [class.pt-news-ticker__group--single]=\"hasSingleNewsItem()\"\n aria-hidden=\"true\"\n >\n @for (\n item of internalNews;\n track getDuplicateTrackById($index, item)\n ) {\n <article\n class=\"pt-news-ticker__item\"\n [ngClass]=\"getDuplicateItemClasses(item)\"\n [ngStyle]=\"getItemStyle(item)\"\n >\n @if (item.icon) {\n <i\n class=\"pt-news-ticker__item-icon\"\n [ngClass]=\"item.icon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <div class=\"pt-news-ticker__content\">\n <span class=\"pt-news-ticker__item-title\">\n {{ item.text }}\n </span>\n\n @if (hasSegments(item)) {\n <span class=\"pt-news-ticker__segments\">\n @for (segment of item.segments; track $index) {\n @if ($index > 0) {\n <span\n class=\"pt-news-ticker__segment-separator\"\n aria-hidden=\"true\"\n >\n {{ getSegmentSeparator(item) }}\n </span>\n }\n\n <span\n class=\"pt-news-ticker__segment\"\n [ngStyle]=\"getSegmentStyle(segment)\"\n >\n @if (segment.label) {\n <span class=\"pt-news-ticker__segment-label\">\n {{ segment.label }}\n </span>\n }\n\n @if (getSegmentIcon(segment); as segmentIcon) {\n <i\n class=\"pt-news-ticker__segment-icon\"\n [ngClass]=\"segmentIcon\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (segment.value) {\n <span class=\"pt-news-ticker__segment-value\">\n {{ segment.value }}\n </span>\n }\n </span>\n }\n </span>\n }\n </div>\n\n @if (shouldShowNewBadge(item)) {\n <span class=\"pt-news-ticker__new-badge\">\n {{ getNewBadgeText(item) }}\n </span>\n }\n\n @if (hasItemLink(item)) {\n <i\n class=\"pt-news-ticker__link-icon pi pi-external-link\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (isItemRemovable(item)) {\n <span\n class=\"pt-news-ticker__duplicate-remove-placeholder\"\n aria-hidden=\"true\"\n >\n <i class=\"pi pi-times\"></i>\n </span>\n }\n </article>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-news-ticker__empty\">\n @if (emptyIcon) {\n <i [ngClass]=\"emptyIcon\" aria-hidden=\"true\"></i>\n }\n\n <span>{{ emptyMessage }}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-news-ticker{display:flex;align-items:stretch;width:100%;min-width:0;max-width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;border:var(--pt-news-ticker-border-width, 1px) solid var(--pt-news-ticker-border-color, #e2e8f0);border-radius:var(--pt-news-ticker-border-radius, 8px);background:var(--pt-news-ticker-background, #ffffff);color:var(--pt-news-ticker-text-color, #0f172a)}.pt-news-ticker__controls{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.1rem;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.25rem .4rem;border-right:1px solid var(--pt-news-ticker-controls-border-color, #e2e8f0);background:var(--pt-news-ticker-controls-background, #f8fafc)}.pt-news-ticker__controls ::ng-deep .p-button.p-button-rounded.p-button-text{width:1.9rem;min-width:1.9rem;height:1.9rem;padding:0}.pt-news-ticker__controls ::ng-deep .p-button .p-button-icon{font-size:.78rem}.pt-news-ticker__speed{min-width:3.5rem;padding:0 .35rem;color:#475569;font-size:.7rem;font-weight:700;text-align:center;white-space:nowrap}.pt-news-ticker__viewport{position:relative;display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;contain:layout paint}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{position:absolute;z-index:3;top:0;bottom:0;width:2.5rem;content:\"\";pointer-events:none}.pt-news-ticker__viewport:before{left:0;background:linear-gradient(to right,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__viewport:after{right:0;background:linear-gradient(to left,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;transform:translateZ(0);animation-name:pt-news-ticker-scroll;animation-duration:var(--pt-news-ticker-duration, 20s);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.pt-news-ticker__track--single{animation-iteration-count:1;animation-fill-mode:forwards}.pt-news-ticker__group{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-ticker-gap, 2rem);width:max-content;min-width:max-content;padding-right:var(--pt-news-ticker-gap, 2rem)}.pt-news-ticker__group--single{padding-right:max(var(--pt-news-ticker-gap, 2rem),var(--pt-news-ticker-loop-gap, 0px))}.pt-news-ticker__item{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-item-gap, .5rem);width:max-content;min-width:max-content;max-width:none;min-height:2.25rem;padding:.35rem .65rem;overflow:visible;border:1px solid var(--pt-news-item-border-color, transparent);border-radius:999px;outline:none;background:var(--pt-news-item-background, transparent);color:var( --pt-news-item-text-color, var(--pt-news-ticker-text-color, #0f172a) );line-height:1.25;white-space:nowrap;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}.pt-news-ticker__item--info,.pt-news-ticker__item--default{background:transparent}.pt-news-ticker__item--clickable,.pt-news-ticker__item--link{cursor:pointer}.pt-news-ticker__item--clickable:hover,.pt-news-ticker__item--link:hover{box-shadow:0 3px 10px #0f172a1f;transform:translateY(-1px)}.pt-news-ticker__item:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-color, #3b82f6)}.pt-news-ticker__item--disabled{cursor:not-allowed;opacity:.5}.pt-news-ticker__item-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--pt-news-item-icon-color, currentColor);font-size:.95rem}.pt-news-ticker__content{display:inline-flex;align-items:center;flex:0 0 auto;gap:.55rem;width:max-content;min-width:max-content;overflow:visible;white-space:nowrap}.pt-news-ticker__item-title{display:inline-block;flex:0 0 auto;width:max-content;min-width:max-content;overflow:visible;font-size:.85rem;font-weight:700;text-overflow:clip;white-space:nowrap}.pt-news-ticker__item-text{display:block;flex:0 0 auto;width:max-content;min-width:max-content;overflow:visible;font-size:.85rem;font-weight:600;text-overflow:clip;white-space:nowrap}.pt-news-ticker__segments{display:inline-flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;gap:.45rem;overflow:visible;white-space:nowrap}.pt-news-ticker__segment{display:inline-flex;align-items:center;flex:0 0 auto;gap:.22rem;color:var(--pt-news-segment-color, currentColor);font-size:.82rem;font-weight:700;white-space:nowrap}.pt-news-ticker__segment-label{color:inherit;font-weight:700}.pt-news-ticker__segment-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pt-news-segment-icon-color, currentColor);font-size:.68rem;font-weight:700}.pt-news-ticker__segment-value{color:inherit;font-variant-numeric:tabular-nums;font-weight:800}.pt-news-ticker__segment-separator{color:#94a3b8;font-size:.75rem;font-weight:700}.pt-news-ticker__new-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:1.15rem;padding:.12rem .42rem;border:1px solid #93c5fd;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;animation:pt-news-ticker-new-badge-pulse 1.5s ease-in-out infinite}.pt-news-ticker__item--flash .pt-news-ticker__new-badge{border-color:#ffffffb3;background:#fff;color:#b91c1c}.pt-news-ticker__item--danger .pt-news-ticker__new-badge{border-color:#ffffffbf;background:#fff;color:#b91c1c}.pt-news-ticker__link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor;font-size:.72rem;opacity:.75}.pt-news-ticker__item--link:hover .pt-news-ticker__link-icon{opacity:1}.pt-news-ticker__remove-button{flex:0 0 auto}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button{width:1.45rem;min-width:1.45rem;height:1.45rem;padding:0;color:currentColor}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button .p-button-icon{font-size:.65rem}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button:not(:disabled):hover{background:#0f172a1a}.pt-news-ticker__duplicate-remove-placeholder{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.45rem;min-width:1.45rem;height:1.45rem;opacity:0;pointer-events:none}.pt-news-ticker__duplicate-remove-placeholder .pi{font-size:.65rem}.pt-news-ticker__item--flash{border-color:var(--pt-news-item-border-color, #991b1b);color:var(--pt-news-flash-text-color, #ffffff);animation-name:pt-news-ticker-flash;animation-duration:var(--pt-news-flash-duration, .7s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.pt-news-ticker__item--flash .pt-news-ticker__item-icon{color:var(--pt-news-item-icon-color, #ffffff)}.pt-news-ticker__empty{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.75rem 1rem;color:#64748b;font-size:.85rem;font-weight:500;text-align:center}.pt-news-ticker__empty .pi{font-size:1rem}@keyframes pt-news-ticker-scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes pt-news-ticker-flash{0%{background-color:var(--pt-news-flash-background, #dc2626)}to{background-color:var(--pt-news-flash-alternate-background, #7f1d1d)}}@keyframes pt-news-ticker-new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.96)}}@media(max-width:768px){.pt-news-ticker{min-height:3rem}.pt-news-ticker__controls{padding-right:.25rem;padding-left:.25rem}.pt-news-ticker__speed{display:none}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{width:1.25rem}}@media(max-width:480px){.pt-news-ticker__item-title,.pt-news-ticker__item-text{font-size:.78rem}.pt-news-ticker__segment{font-size:.75rem}.pt-news-ticker__new-badge{font-size:.56rem}}@media(prefers-reduced-motion:reduce){.pt-news-ticker__track{animation:none!important;transform:none!important}.pt-news-ticker__item--flash{animation:none!important;background-color:var(--pt-news-flash-background, #dc2626)!important}.pt-news-ticker__new-badge{animation:none!important}.pt-news-ticker__viewport{overflow-x:auto;contain:none}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{display:none}}\n"] }]
|
|
10497
10519
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { news: [{
|
|
10498
10520
|
type: Input
|
|
10499
10521
|
}], speed: [{
|