@truenas/ui-components 0.8.3 → 0.8.4

package/fesm2022/truenas-ui-components.mjs

@@ -2937,7 +2937,7 @@ var TnBannerComponent = class TnBannerComponent {
 		}],
 		ngImport: i0,
 		template: "<!--\n  `ariaRole()` is the only thing declaring how urgently the banner announces:\n  it implies the politeness, and an explicit `aria-live` here would override it\n  — which is what the static `aria-live=\"polite\"` used to do, downgrading the\n  two types deliberately made assertive. See `../a11y/live-region.ts`.\n-->\n<div\n  tnTestIdType=\"banner\"\n  [ngClass]=\"classes()\"\n  [attr.role]=\"ariaRole()\"\n  [tnTestId]=\"testId()\"\n>\n  @if (hasStructuredContent()) {\n    <div class=\"tn-banner__main\">\n      <div class=\"tn-banner__icon\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"md\"\n          aria-hidden=\"true\"\n          [name]=\"iconName()\"\n        />\n      </div>\n\n      <div class=\"tn-banner__content\">\n        @if (heading()) {\n          <div class=\"tn-banner__heading\">\n            {{ heading() }}\n          </div>\n        }\n\n        @if (message()) {\n          <div class=\"tn-banner__message\">\n            {{ message() }}\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <div class=\"tn-banner__main\">\n      <ng-content />\n    </div>\n  }\n\n  @if (hasAction()) {\n    <div class=\"tn-banner__action\">\n      <ng-content select=\"[tnBannerAction]\" />\n    </div>\n  }\n</div>\n",
-		styles: [".tn-banner{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"],
+		styles: [".tn-banner{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #ffffff);display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -2992,7 +2992,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "<!--\n  `ariaRole()` is the only thing declaring how urgently the banner announces:\n  it implies the politeness, and an explicit `aria-live` here would override it\n  — which is what the static `aria-live=\"polite\"` used to do, downgrading the\n  two types deliberately made assertive. See `../a11y/live-region.ts`.\n-->\n<div\n  tnTestIdType=\"banner\"\n  [ngClass]=\"classes()\"\n  [attr.role]=\"ariaRole()\"\n  [tnTestId]=\"testId()\"\n>\n  @if (hasStructuredContent()) {\n    <div class=\"tn-banner__main\">\n      <div class=\"tn-banner__icon\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"md\"\n          aria-hidden=\"true\"\n          [name]=\"iconName()\"\n        />\n      </div>\n\n      <div class=\"tn-banner__content\">\n        @if (heading()) {\n          <div class=\"tn-banner__heading\">\n            {{ heading() }}\n          </div>\n        }\n\n        @if (message()) {\n          <div class=\"tn-banner__message\">\n            {{ message() }}\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <div class=\"tn-banner__main\">\n      <ng-content />\n    </div>\n  }\n\n  @if (hasAction()) {\n    <div class=\"tn-banner__action\">\n      <ng-content select=\"[tnBannerAction]\" />\n    </div>\n  }\n</div>\n",
-			styles: [".tn-banner{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"]
+			styles: [".tn-banner{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #ffffff);display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -12970,7 +12970,7 @@ var TnFormListItemComponent = class TnFormListItemComponent {
 		outputs: { delete: "delete" },
 		ngImport: i0,
 		template: "<div class=\"tn-form-list-item\">\n  @if (canDelete()) {\n    <tn-icon-button\n      class=\"tn-form-list-item__remove\"\n      name=\"close\"\n      library=\"mdi\"\n      size=\"sm\"\n      [ariaLabel]=\"resolvedRemoveAriaLabel()\"\n      [disabled]=\"resolvedDisabled()\"\n      [testId]=\"resolvedTestId()\"\n      (onClick)=\"delete.emit()\"\n    />\n  }\n\n  <div class=\"tn-form-list-item__content\">\n    <ng-content />\n  </div>\n</div>\n",
-		styles: [":host{display:block}.tn-form-list-item{position:relative;border:1px solid var(--tn-lines, var(--tn-fg4, #d0d5dd));border-radius:var(--tn-radius, 4px);background:var(--tn-alt-bg1, transparent);padding:.75rem}.tn-form-list-item__remove{position:absolute;top:.25rem;right:.25rem;z-index:1}.tn-form-list-item__content{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-right:1.5rem}\n"],
+		styles: [":host{display:block}.tn-form-list-item{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);position:relative;border:1px solid var(--tn-lines, var(--tn-fg4, #d0d5dd));border-radius:var(--tn-radius, 4px);background:var(--tn-alt-bg1, transparent);padding:.75rem}.tn-form-list-item__remove{position:absolute;top:.25rem;right:.25rem;z-index:1}.tn-form-list-item__content{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-right:1.5rem}\n"],
 		dependencies: [{
 			kind: "component",
 			type: TnIconButtonComponent,
@@ -13008,7 +13008,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			imports: [TnIconButtonComponent, TnTestIdDirective],
 			template: "<div class=\"tn-form-list-item\">\n  @if (canDelete()) {\n    <tn-icon-button\n      class=\"tn-form-list-item__remove\"\n      name=\"close\"\n      library=\"mdi\"\n      size=\"sm\"\n      [ariaLabel]=\"resolvedRemoveAriaLabel()\"\n      [disabled]=\"resolvedDisabled()\"\n      [testId]=\"resolvedTestId()\"\n      (onClick)=\"delete.emit()\"\n    />\n  }\n\n  <div class=\"tn-form-list-item__content\">\n    <ng-content />\n  </div>\n</div>\n",
-			styles: [":host{display:block}.tn-form-list-item{position:relative;border:1px solid var(--tn-lines, var(--tn-fg4, #d0d5dd));border-radius:var(--tn-radius, 4px);background:var(--tn-alt-bg1, transparent);padding:.75rem}.tn-form-list-item__remove{position:absolute;top:.25rem;right:.25rem;z-index:1}.tn-form-list-item__content{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-right:1.5rem}\n"]
+			styles: [":host{display:block}.tn-form-list-item{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);position:relative;border:1px solid var(--tn-lines, var(--tn-fg4, #d0d5dd));border-radius:var(--tn-radius, 4px);background:var(--tn-alt-bg1, transparent);padding:.75rem}.tn-form-list-item__remove{position:absolute;top:.25rem;right:.25rem;z-index:1}.tn-form-list-item__content{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-right:1.5rem}\n"]
 		}]
 	}],
 	propDecorators: {