@educarehq/solaris-components 0.3.0 → 0.3.2
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.
|
@@ -1655,6 +1655,10 @@ class SolarisNotificationItemComponent {
|
|
|
1655
1655
|
return 'ph-info';
|
|
1656
1656
|
}
|
|
1657
1657
|
}, ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
|
|
1658
|
+
isCompactHeader = computed(() => {
|
|
1659
|
+
const hasDescription = Boolean(this.item().description?.trim().length);
|
|
1660
|
+
return !hasDescription && !this.item().expandable;
|
|
1661
|
+
}, ...(ngDevMode ? [{ debugName: "isCompactHeader" }] : []));
|
|
1658
1662
|
toggleExpanded() {
|
|
1659
1663
|
this.notificationService.toggleExpanded(this.item().id);
|
|
1660
1664
|
}
|
|
@@ -1693,11 +1697,11 @@ class SolarisNotificationItemComponent {
|
|
|
1693
1697
|
return action.label ?? '';
|
|
1694
1698
|
}
|
|
1695
1699
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1696
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\">\r\n <div class=\"sn__leading\">\r\n
|
|
1700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1697
1701
|
}
|
|
1698
1702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
|
|
1699
1703
|
type: Component,
|
|
1700
|
-
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\">\r\n <div class=\"sn__leading\">\r\n
|
|
1704
|
+
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
|
|
1701
1705
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1702
1706
|
|
|
1703
1707
|
class SolarisNotificationCenterComponent {
|
|
@@ -4440,12 +4444,12 @@ class FormField {
|
|
|
4440
4444
|
label = '';
|
|
4441
4445
|
hintKey = '';
|
|
4442
4446
|
labelKey = '';
|
|
4443
|
-
invalid = null;
|
|
4444
4447
|
radius = 'sm';
|
|
4445
4448
|
appearance = 'filled';
|
|
4446
4449
|
showErrors = 'dirtyOrTouched';
|
|
4447
4450
|
_tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : []));
|
|
4448
4451
|
customErrorKey = input('', ...(ngDevMode ? [{ debugName: "customErrorKey" }] : []));
|
|
4452
|
+
invalid = input(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
4449
4453
|
customErrorParams = input(undefined, ...(ngDevMode ? [{ debugName: "customErrorParams" }] : []));
|
|
4450
4454
|
constructor() {
|
|
4451
4455
|
effect((onCleanup) => {
|
|
@@ -4483,8 +4487,9 @@ class FormField {
|
|
|
4483
4487
|
showPasswordToggle = computed(() => !!this.field.password(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
|
|
4484
4488
|
invalidComputed = computed(() => {
|
|
4485
4489
|
this._tick();
|
|
4486
|
-
|
|
4487
|
-
|
|
4490
|
+
const invalid = this.invalid();
|
|
4491
|
+
if (invalid !== null)
|
|
4492
|
+
return invalid;
|
|
4488
4493
|
const c = this.field.control();
|
|
4489
4494
|
if (!c)
|
|
4490
4495
|
return false;
|
|
@@ -4529,7 +4534,7 @@ class FormField {
|
|
|
4529
4534
|
return 'solaris.validation.invalid';
|
|
4530
4535
|
}, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
|
|
4531
4536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4532
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null },
|
|
4537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
4533
4538
|
SolarisFormFieldController,
|
|
4534
4539
|
{ provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
|
|
4535
4540
|
], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\">\r\n @if ((label || labelKey)) {\r\n <label class=\"solaris-form-field__label\">\r\n @if (labelKey) { {{ labelKey | translate }} }\r\n @else if (label) { {{ label }} }\r\n </label>\r\n }\r\n\r\n <div class=\"solaris-form-field__frame\">\r\n @if (hasPrefix) {\r\n <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n </span>\r\n }\r\n\r\n <div class=\"solaris-form-field__body\">\r\n <div class=\"solaris-form-field__control-slot\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n @if (showPasswordToggle()) {\r\n <solaris-password-toggle></solaris-password-toggle>\r\n }\r\n\r\n @if (invalidComputed()) {\r\n <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n <i class=\"ph ph-warning-circle\"></i>\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (errorKey()) {\r\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n } @else {\r\n <ng-content select=\"[form-field-message]\"></ng-content>\r\n }\r\n\r\n @if (hint || hintKey) {\r\n <div class=\"solaris-form-field__hint\">\r\n @if (hintKey) { {{ hintKey | translate }} }\r\n @else { {{ hint }} }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -4554,15 +4559,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4554
4559
|
type: Input
|
|
4555
4560
|
}], labelKey: [{
|
|
4556
4561
|
type: Input
|
|
4557
|
-
}], invalid: [{
|
|
4558
|
-
type: Input
|
|
4559
4562
|
}], radius: [{
|
|
4560
4563
|
type: Input
|
|
4561
4564
|
}], appearance: [{
|
|
4562
4565
|
type: Input
|
|
4563
4566
|
}], showErrors: [{
|
|
4564
4567
|
type: Input
|
|
4565
|
-
}], customErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorKey", required: false }] }], customErrorParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorParams", required: false }] }] } });
|
|
4568
|
+
}], customErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorKey", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], customErrorParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorParams", required: false }] }] } });
|
|
4566
4569
|
|
|
4567
4570
|
class SolarisSelect {
|
|
4568
4571
|
destroyRef = inject(DestroyRef);
|