@leanix/components 0.4.932 → 0.4.934
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.
|
@@ -530,8 +530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
530
530
|
* @example
|
|
531
531
|
* ```html
|
|
532
532
|
* <lx-counter [content]="5" color="primary" size="default" />
|
|
533
|
-
* <lx-counter [content]="
|
|
534
|
-
* <lx-counter [content]="unreadCount" color="green" />
|
|
533
|
+
* <lx-counter [content]="unreadCount" color="gray" size="small" />
|
|
535
534
|
* ```
|
|
536
535
|
*/
|
|
537
536
|
class CounterComponent {
|
|
@@ -543,6 +542,14 @@ class CounterComponent {
|
|
|
543
542
|
this.size = 'default';
|
|
544
543
|
/**
|
|
545
544
|
* The color of the counter.
|
|
545
|
+
*
|
|
546
|
+
* Note: `red` uses `--sapButton_Negative_*` for visual parity with
|
|
547
|
+
* `<ui5-tag design="Negative">` / `<ui5-switch design="Graphical">`.
|
|
548
|
+
* Those tokens give 3.79:1 contrast for white text on the negative
|
|
549
|
+
* background — below WCAG AA's 4.5:1 for small text. Counters with
|
|
550
|
+
* `color="red"` should provide accessible context (e.g. `aria-label`,
|
|
551
|
+
* an adjacent label, or an icon) so the meaning isn't conveyed by
|
|
552
|
+
* color alone.
|
|
546
553
|
* @default 'primary'
|
|
547
554
|
*/
|
|
548
555
|
this.color = 'primary';
|
|
@@ -551,11 +558,11 @@ class CounterComponent {
|
|
|
551
558
|
return `${this.size} ${this.color}`;
|
|
552
559
|
}
|
|
553
560
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CounterComponent, isStandalone: true, selector: "lx-counter", inputs: { content: "content", size: "size", color: "color" }, ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.
|
|
561
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CounterComponent, isStandalone: true, selector: "lx-counter", inputs: { content: "content", size: "size", color: "color" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host:where(:not(.lxFioriReskin)){display:inline-block}:host:where(:not(.lxFioriReskin)) .content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}:host:where(:not(.lxFioriReskin)) .default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}:host:where(:not(.lxFioriReskin)) .small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}:host:where(:not(.lxFioriReskin)) .primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}:host:where(:not(.lxFioriReskin)) .gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}:host:where(:not(.lxFioriReskin)) .darkgray{background-color:#2a303d;color:#fff}:host:where(:not(.lxFioriReskin)) .green{background-color:#33cc58;color:#fff}:host:where(:not(.lxFioriReskin)) .red{background-color:#f96464;color:#fff}:host(.lxFioriReskin){display:inline-block}:host(.lxFioriReskin) .content{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sapFontBoldFamily);font-weight:400;letter-spacing:normal;box-sizing:border-box}:host(.lxFioriReskin) .default{min-width:20px;padding:0 6px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:20px}:host(.lxFioriReskin) .small{min-width:16px;padding:0 4px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:16px}:host(.lxFioriReskin) .primary{background-color:var(--sapIndicationColor_5_Background);color:var(--sapIndicationColor_5_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .gray{background-color:var(--sapIndicationColor_10b_Background);color:var(--sapIndicationColor_10b_TextColor);text-shadow:var(--sapContent_TextShadow)}:host(.lxFioriReskin) .darkgray{background-color:var(--sapIndicationColor_10_Background);color:var(--sapIndicationColor_10_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .green{background-color:var(--sapButton_Success_Background);color:var(--sapButton_Success_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .red{background-color:var(--sapButton_Negative_Background);color:var(--sapButton_Negative_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
555
562
|
}
|
|
556
563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CounterComponent, decorators: [{
|
|
557
564
|
type: Component,
|
|
558
|
-
args: [{ selector: 'lx-counter', imports: [NgClass], template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.
|
|
565
|
+
args: [{ selector: 'lx-counter', hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [NgClass], template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host:where(:not(.lxFioriReskin)){display:inline-block}:host:where(:not(.lxFioriReskin)) .content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}:host:where(:not(.lxFioriReskin)) .default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}:host:where(:not(.lxFioriReskin)) .small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}:host:where(:not(.lxFioriReskin)) .primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}:host:where(:not(.lxFioriReskin)) .gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}:host:where(:not(.lxFioriReskin)) .darkgray{background-color:#2a303d;color:#fff}:host:where(:not(.lxFioriReskin)) .green{background-color:#33cc58;color:#fff}:host:where(:not(.lxFioriReskin)) .red{background-color:#f96464;color:#fff}:host(.lxFioriReskin){display:inline-block}:host(.lxFioriReskin) .content{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sapFontBoldFamily);font-weight:400;letter-spacing:normal;box-sizing:border-box}:host(.lxFioriReskin) .default{min-width:20px;padding:0 6px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:20px}:host(.lxFioriReskin) .small{min-width:16px;padding:0 4px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:16px}:host(.lxFioriReskin) .primary{background-color:var(--sapIndicationColor_5_Background);color:var(--sapIndicationColor_5_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .gray{background-color:var(--sapIndicationColor_10b_Background);color:var(--sapIndicationColor_10b_TextColor);text-shadow:var(--sapContent_TextShadow)}:host(.lxFioriReskin) .darkgray{background-color:var(--sapIndicationColor_10_Background);color:var(--sapIndicationColor_10_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .green{background-color:var(--sapButton_Success_Background);color:var(--sapButton_Success_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .red{background-color:var(--sapButton_Negative_Background);color:var(--sapButton_Negative_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}\n"] }]
|
|
559
566
|
}], propDecorators: { content: [{
|
|
560
567
|
type: Input
|
|
561
568
|
}], size: [{
|