@educarehq/solaris-components 0.6.9 → 0.7.0
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.
|
@@ -528,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
528
528
|
}] } });
|
|
529
529
|
|
|
530
530
|
class SolarisBadge {
|
|
531
|
-
shape = '
|
|
531
|
+
shape = 'full';
|
|
532
532
|
size = 'md';
|
|
533
533
|
density = 'comfortable';
|
|
534
534
|
color = 'surface';
|
|
@@ -536,13 +536,14 @@ class SolarisBadge {
|
|
|
536
536
|
customTextColor;
|
|
537
537
|
interactive = false;
|
|
538
538
|
ariaHidden = null;
|
|
539
|
-
hostClass =
|
|
539
|
+
hostClass = true;
|
|
540
540
|
presetColors = new Set([
|
|
541
541
|
'primary',
|
|
542
542
|
'success',
|
|
543
543
|
'warning',
|
|
544
544
|
'error',
|
|
545
545
|
'info',
|
|
546
|
+
'information',
|
|
546
547
|
'surface',
|
|
547
548
|
]);
|
|
548
549
|
get resolvedAppearance() {
|
|
@@ -552,20 +553,30 @@ class SolarisBadge {
|
|
|
552
553
|
return this.shape;
|
|
553
554
|
}
|
|
554
555
|
get resolvedColor() {
|
|
555
|
-
|
|
556
|
+
const color = this.normalizedColorInput;
|
|
557
|
+
if (color === 'information') {
|
|
558
|
+
return 'info';
|
|
559
|
+
}
|
|
560
|
+
return this.presetColors.has(color)
|
|
561
|
+
? color
|
|
562
|
+
: 'custom';
|
|
556
563
|
}
|
|
557
564
|
get isCustomColor() {
|
|
558
|
-
return !this.presetColors.has(this.
|
|
565
|
+
return !this.presetColors.has(this.normalizedColorInput);
|
|
559
566
|
}
|
|
560
567
|
get customColorValue() {
|
|
561
|
-
return this.isCustomColor ?
|
|
568
|
+
return this.isCustomColor ? this.normalizedColorInput : null;
|
|
569
|
+
}
|
|
570
|
+
get normalizedColorInput() {
|
|
571
|
+
const color = String(this.color ?? '').trim();
|
|
572
|
+
return color || 'surface';
|
|
562
573
|
}
|
|
563
574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
564
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.13", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { shape: "shape", size: "size", density: "density", color: "color", appearance: "appearance", customTextColor: "customTextColor", interactive: ["interactive", "interactive", booleanAttribute], ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span
|
|
575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.13", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { shape: "shape", size: "size", density: "density", color: "color", appearance: "appearance", customTextColor: "customTextColor", interactive: ["interactive", "interactive", booleanAttribute], ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class.solaris-badge-host": "this.hostClass" } }, ngImport: i0, template: "<span\n class=\"solaris-badge\"\n [attr.aria-hidden]=\"ariaHidden\"\n [attr.data-appearance]=\"resolvedAppearance\"\n [attr.data-color]=\"resolvedColor\"\n [attr.data-size]=\"size\"\n [attr.data-shape]=\"resolvedShape\"\n [attr.data-density]=\"density\"\n [style.--solaris-badge-custom]=\"customColorValue\"\n [style.--solaris-badge-custom-fg]=\"customTextColor\"\n [class.is-interactive]=\"interactive\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [":host.solaris-badge-host{display:inline-flex;vertical-align:middle}.solaris-badge{--solaris-badge-min-height: auto;--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-badge-fg);--solaris-badge-bg: transparent;--solaris-badge-bg-solid: var(--solaris-badge-bg);--solaris-badge-border: transparent;--solaris-badge-border-solid: var(--solaris-badge-border);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-line-height: var(--solaris-lh-tight);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--solaris-space-2);min-block-size:var(--solaris-badge-min-height);border:1px solid transparent;border-radius:var(--solaris-badge-radius);font-weight:600;line-height:var(--solaris-badge-line-height);letter-spacing:var(--solaris-ls-sm);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle}.solaris-badge[data-size=sm]{--solaris-badge-min-height: 2rem;padding:.2rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge[data-size=md]{--solaris-badge-min-height: 2.4rem;padding:.3rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge[data-size=lg]{--solaris-badge-min-height: 2.8rem;padding:.4rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge[data-density=compact][data-size=sm]{--solaris-badge-min-height: 1.8rem;padding:.1rem .5rem}.solaris-badge[data-density=compact][data-size=md]{--solaris-badge-min-height: 2.2rem;padding:.2rem .7rem}.solaris-badge[data-density=compact][data-size=lg]{--solaris-badge-min-height: 2.6rem;padding:.3rem .9rem}.solaris-badge[data-shape=pill]{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge[data-shape=rounded]{--solaris-badge-radius: var(--solaris-radius-md)}.solaris-badge.is-interactive{cursor:pointer;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge[data-color]{--solaris-badge-accent: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-white));--solaris-badge-fg: var(--solaris-badge-accent);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg-soft: color-mix(in srgb, var(--_base) 16%, transparent);--solaris-badge-bg-solid: var(--_base);--solaris-badge-bg-gradient: linear-gradient( 135deg, color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white)), var(--_base) 45%, color-mix(in srgb, var(--_base) 78%, var(--solaris-color-black)) );--solaris-badge-border-soft: color-mix(in srgb, var(--_base) 28%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-black));--solaris-badge-bg-tonal: color-mix(in srgb, var(--_base) 24%, var(--solaris-color-surface-2));--solaris-badge-border-outline: color-mix(in srgb, var(--_base) 68%, var(--solaris-color-white))}.solaris-badge[data-color=surface]{--_base: var(--solaris-color-surface-2);--solaris-badge-accent: var(--solaris-color-text);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-text);--solaris-badge-bg-soft: var(--solaris-color-surface-2);--solaris-badge-bg-tonal: color-mix( in srgb, var(--solaris-color-surface-2) 86%, var(--solaris-color-white) );--solaris-badge-bg-solid: var(--solaris-color-surface-2);--solaris-badge-bg-gradient: linear-gradient( 180deg, var(--solaris-color-surface-2), color-mix(in srgb, var(--solaris-color-surface-2) 72%, var(--solaris-color-black)) );--solaris-badge-border-soft: var(--solaris-color-border);--solaris-badge-border-outline: var(--solaris-color-border);--solaris-badge-border-solid: var(--solaris-color-border)}.solaris-badge[data-color=primary]{--_base: var(--solaris-color-primary)}.solaris-badge[data-color=success]{--_base: var(--solaris-color-success)}.solaris-badge[data-color=warning]{--_base: var(--solaris-color-warning);--solaris-badge-fg-solid: var(--solaris-color-black)}.solaris-badge[data-color=error]{--_base: var(--solaris-color-error)}.solaris-badge[data-color=info]{--_base: var(--solaris-color-info)}.solaris-badge[data-color=custom]{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-accent: var(--_base);--solaris-badge-fg: var(--_base);--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, var(--solaris-color-white));--solaris-badge-bg-soft: color-mix(in srgb, var(--_base) 16%, transparent);--solaris-badge-bg-solid: var(--_base);--solaris-badge-bg-gradient: linear-gradient( 135deg, color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white)), var(--_base) 45%, color-mix(in srgb, var(--_base) 78%, var(--solaris-color-black)) );--solaris-badge-border-soft: color-mix(in srgb, var(--_base) 28%, transparent);--solaris-badge-border-outline: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-white));--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-black))}.solaris-badge[data-appearance=outline]{color:var(--solaris-badge-fg);background:transparent;border-color:var(--solaris-badge-border-outline)}.solaris-badge[data-appearance=soft]{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg-soft);border-color:var(--solaris-badge-border-soft)}.solaris-badge[data-appearance=solid]{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid);border-color:var(--solaris-badge-border-solid)}.solaris-badge[data-appearance=elevated]{color:var(--solaris-badge-fg);background:linear-gradient(180deg,color-mix(in srgb,var(--_base) 12%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--_base) 5%,var(--solaris-color-surface-1)));border-color:color-mix(in srgb,var(--_base) 34%,var(--solaris-color-border));box-shadow:var(--solaris-shadow-xs),0 0 0 1px color-mix(in srgb,var(--_base) 10%,transparent)}.solaris-badge[data-appearance=ghost]{color:var(--solaris-badge-fg);background:transparent;border-color:transparent}.solaris-badge[data-appearance=glass]{color:var(--solaris-badge-fg);background:linear-gradient(180deg,color-mix(in srgb,var(--_base) 22%,var(--solaris-color-white) 4%),color-mix(in srgb,var(--_base) 10%,transparent));border-color:color-mix(in srgb,var(--_base) 44%,var(--solaris-color-white));box-shadow:inset 0 1px color-mix(in srgb,var(--solaris-color-white) 16%,transparent),0 0 0 1px color-mix(in srgb,var(--_base) 8%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.solaris-badge[data-appearance=gradient]{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-gradient);border-color:var(--solaris-badge-border-solid)}.solaris-badge[data-color=surface][data-appearance=outline]{color:var(--solaris-color-text);background:transparent;border-color:var(--solaris-color-border)}.solaris-badge[data-color=surface][data-appearance=soft]{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 70%,transparent);border-color:var(--solaris-color-border)}.solaris-badge[data-color=surface][data-appearance=solid]{color:var(--solaris-color-text);background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border)}.solaris-badge[data-color=surface][data-appearance=ghost]{color:var(--solaris-color-text)}.solaris-badge[data-color=surface][data-appearance=gradient]{color:var(--solaris-color-text);background:linear-gradient(135deg,var(--solaris-color-surface-1),var(--solaris-color-surface-2));border-color:var(--solaris-color-border)}.solaris-badge[data-appearance=tonal]{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg-tonal);border-color:transparent}.solaris-badge[data-color=surface][data-appearance=tonal]{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 86%,var(--solaris-color-white));border-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
565
576
|
}
|
|
566
577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisBadge, decorators: [{
|
|
567
578
|
type: Component,
|
|
568
|
-
args: [{ selector: 'solaris-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span
|
|
579
|
+
args: [{ selector: 'solaris-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"solaris-badge\"\n [attr.aria-hidden]=\"ariaHidden\"\n [attr.data-appearance]=\"resolvedAppearance\"\n [attr.data-color]=\"resolvedColor\"\n [attr.data-size]=\"size\"\n [attr.data-shape]=\"resolvedShape\"\n [attr.data-density]=\"density\"\n [style.--solaris-badge-custom]=\"customColorValue\"\n [style.--solaris-badge-custom-fg]=\"customTextColor\"\n [class.is-interactive]=\"interactive\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [":host.solaris-badge-host{display:inline-flex;vertical-align:middle}.solaris-badge{--solaris-badge-min-height: auto;--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-badge-fg);--solaris-badge-bg: transparent;--solaris-badge-bg-solid: var(--solaris-badge-bg);--solaris-badge-border: transparent;--solaris-badge-border-solid: var(--solaris-badge-border);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-line-height: var(--solaris-lh-tight);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--solaris-space-2);min-block-size:var(--solaris-badge-min-height);border:1px solid transparent;border-radius:var(--solaris-badge-radius);font-weight:600;line-height:var(--solaris-badge-line-height);letter-spacing:var(--solaris-ls-sm);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle}.solaris-badge[data-size=sm]{--solaris-badge-min-height: 2rem;padding:.2rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge[data-size=md]{--solaris-badge-min-height: 2.4rem;padding:.3rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge[data-size=lg]{--solaris-badge-min-height: 2.8rem;padding:.4rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge[data-density=compact][data-size=sm]{--solaris-badge-min-height: 1.8rem;padding:.1rem .5rem}.solaris-badge[data-density=compact][data-size=md]{--solaris-badge-min-height: 2.2rem;padding:.2rem .7rem}.solaris-badge[data-density=compact][data-size=lg]{--solaris-badge-min-height: 2.6rem;padding:.3rem .9rem}.solaris-badge[data-shape=pill]{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge[data-shape=rounded]{--solaris-badge-radius: var(--solaris-radius-md)}.solaris-badge.is-interactive{cursor:pointer;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge[data-color]{--solaris-badge-accent: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-white));--solaris-badge-fg: var(--solaris-badge-accent);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg-soft: color-mix(in srgb, var(--_base) 16%, transparent);--solaris-badge-bg-solid: var(--_base);--solaris-badge-bg-gradient: linear-gradient( 135deg, color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white)), var(--_base) 45%, color-mix(in srgb, var(--_base) 78%, var(--solaris-color-black)) );--solaris-badge-border-soft: color-mix(in srgb, var(--_base) 28%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-black));--solaris-badge-bg-tonal: color-mix(in srgb, var(--_base) 24%, var(--solaris-color-surface-2));--solaris-badge-border-outline: color-mix(in srgb, var(--_base) 68%, var(--solaris-color-white))}.solaris-badge[data-color=surface]{--_base: var(--solaris-color-surface-2);--solaris-badge-accent: var(--solaris-color-text);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-text);--solaris-badge-bg-soft: var(--solaris-color-surface-2);--solaris-badge-bg-tonal: color-mix( in srgb, var(--solaris-color-surface-2) 86%, var(--solaris-color-white) );--solaris-badge-bg-solid: var(--solaris-color-surface-2);--solaris-badge-bg-gradient: linear-gradient( 180deg, var(--solaris-color-surface-2), color-mix(in srgb, var(--solaris-color-surface-2) 72%, var(--solaris-color-black)) );--solaris-badge-border-soft: var(--solaris-color-border);--solaris-badge-border-outline: var(--solaris-color-border);--solaris-badge-border-solid: var(--solaris-color-border)}.solaris-badge[data-color=primary]{--_base: var(--solaris-color-primary)}.solaris-badge[data-color=success]{--_base: var(--solaris-color-success)}.solaris-badge[data-color=warning]{--_base: var(--solaris-color-warning);--solaris-badge-fg-solid: var(--solaris-color-black)}.solaris-badge[data-color=error]{--_base: var(--solaris-color-error)}.solaris-badge[data-color=info]{--_base: var(--solaris-color-info)}.solaris-badge[data-color=custom]{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-accent: var(--_base);--solaris-badge-fg: var(--_base);--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, var(--solaris-color-white));--solaris-badge-bg-soft: color-mix(in srgb, var(--_base) 16%, transparent);--solaris-badge-bg-solid: var(--_base);--solaris-badge-bg-gradient: linear-gradient( 135deg, color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white)), var(--_base) 45%, color-mix(in srgb, var(--_base) 78%, var(--solaris-color-black)) );--solaris-badge-border-soft: color-mix(in srgb, var(--_base) 28%, transparent);--solaris-badge-border-outline: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-white));--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 72%, var(--solaris-color-black))}.solaris-badge[data-appearance=outline]{color:var(--solaris-badge-fg);background:transparent;border-color:var(--solaris-badge-border-outline)}.solaris-badge[data-appearance=soft]{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg-soft);border-color:var(--solaris-badge-border-soft)}.solaris-badge[data-appearance=solid]{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid);border-color:var(--solaris-badge-border-solid)}.solaris-badge[data-appearance=elevated]{color:var(--solaris-badge-fg);background:linear-gradient(180deg,color-mix(in srgb,var(--_base) 12%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--_base) 5%,var(--solaris-color-surface-1)));border-color:color-mix(in srgb,var(--_base) 34%,var(--solaris-color-border));box-shadow:var(--solaris-shadow-xs),0 0 0 1px color-mix(in srgb,var(--_base) 10%,transparent)}.solaris-badge[data-appearance=ghost]{color:var(--solaris-badge-fg);background:transparent;border-color:transparent}.solaris-badge[data-appearance=glass]{color:var(--solaris-badge-fg);background:linear-gradient(180deg,color-mix(in srgb,var(--_base) 22%,var(--solaris-color-white) 4%),color-mix(in srgb,var(--_base) 10%,transparent));border-color:color-mix(in srgb,var(--_base) 44%,var(--solaris-color-white));box-shadow:inset 0 1px color-mix(in srgb,var(--solaris-color-white) 16%,transparent),0 0 0 1px color-mix(in srgb,var(--_base) 8%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.solaris-badge[data-appearance=gradient]{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-gradient);border-color:var(--solaris-badge-border-solid)}.solaris-badge[data-color=surface][data-appearance=outline]{color:var(--solaris-color-text);background:transparent;border-color:var(--solaris-color-border)}.solaris-badge[data-color=surface][data-appearance=soft]{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 70%,transparent);border-color:var(--solaris-color-border)}.solaris-badge[data-color=surface][data-appearance=solid]{color:var(--solaris-color-text);background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border)}.solaris-badge[data-color=surface][data-appearance=ghost]{color:var(--solaris-color-text)}.solaris-badge[data-color=surface][data-appearance=gradient]{color:var(--solaris-color-text);background:linear-gradient(135deg,var(--solaris-color-surface-1),var(--solaris-color-surface-2));border-color:var(--solaris-color-border)}.solaris-badge[data-appearance=tonal]{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg-tonal);border-color:transparent}.solaris-badge[data-color=surface][data-appearance=tonal]{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 86%,var(--solaris-color-white));border-color:transparent}\n"] }]
|
|
569
580
|
}], propDecorators: { shape: [{
|
|
570
581
|
type: Input
|
|
571
582
|
}], size: [{
|
|
@@ -586,7 +597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
586
597
|
args: [{ alias: 'aria-hidden' }]
|
|
587
598
|
}], hostClass: [{
|
|
588
599
|
type: HostBinding,
|
|
589
|
-
args: ['class']
|
|
600
|
+
args: ['class.solaris-badge-host']
|
|
590
601
|
}] } });
|
|
591
602
|
|
|
592
603
|
class SolarisStepper {
|