npm - @hermes-ui/angular - Versions diffs - 0.1.4 → 0.1.6 - Mend

@hermes-ui/angular 0.1.4 → 0.1.6

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.

Files changed (34) hide show

package/fesm2022/hermes-ui-angular-addons-theme-builder.mjs CHANGED Viewed

@@ -820,7 +820,7 @@ class ThemeBuilderComponent {
         this.refreshThemeColors();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ThemeBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ThemeBuilderComponent, isStandalone: true, selector: "hermes-theme-builder", inputs: { presets: "presets" }, outputs: { generatedCSS: "generatedCSS" }, viewQueries: [{ propertyName: "previewWrapper", first: true, predicate: ["previewWrapper"], descendants: true }, { propertyName: "previewDarkWrapper", first: true, predicate: ["previewDarkWrapper"], descendants: true }], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<!-- Preset selector -->\r\n<div class=\"tb-presets\" hermes-layout=\"m-t:lg\">\r\n  <div class=\"tb-preset-cards hermes-row\">\r\n    @for (preset of presets; track preset.name) {\r\n      <a\r\n        href=\"javascript://\"\r\n        class=\"card clickable tb-preset-card hermes-col-1\"\r\n        [class.tb-preset-card-active]=\"activePreset?.name === preset.name\"\r\n        (click)=\"applyPreset(preset)\"\r\n      >\r\n        <div class=\"tb-preset-swatch\" [style.background-color]=\"preset.light?.primary?.hex\"></div>\r\n        <div class=\"card-text\">{{ preset.name }}</div>\r\n      </a>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500 Preview DARK card \u2500\u2500 -->\r\n<!-- Invisible for filling the dark values on initial load -->\r\n<div style=\"display: none\" #previewDarkWrapper hermes-theme=\"dark\"></div>\r\n\r\n<!-- \u2500\u2500 Two-column layout: controls | preview \u2500\u2500 -->\r\n<div class=\"tb-layout\" hermes-layout=\"m-t:lg m-b:lg\">\r\n  <!-- \u2500\u2500 Controls card (sticky left column) \u2500\u2500 -->\r\n  <div class=\"card tb-controls-card\">\r\n    <div class=\"card-block\">\r\n      @for (colorGroup of themeColors; track colorGroup.key) {\r\n        <div>\r\n          <hermes-stack-view>\r\n            <hermes-stack-header>\r\n              <div class=\"tb-control-header\">\r\n                {{ colorGroup.key | uppercase }}\r\n\r\n                <hermes-tooltip>\r\n                  <hermes-label\r\n                    hermes-layout=\"m:none\"\r\n                    hermesTooltipTrigger\r\n                    [hermesText]=\"'Contrast ' + colorGroup.contrast.minContrast.wcag.label\"\r\n                    [hermesBadgeText]=\"colorGroup.contrast.minContrast.wcag.score\"\r\n                    [hermesColor]=\"colorGroup.contrast.minContrast.wcag.type\"\r\n                  >\r\n                  </hermes-label>\r\n                  <hermes-tooltip-content hermesPosition=\"right\" hermesSize=\"lg\">\r\n                    <div class=\"tb-wcag-container\">\r\n                      @for (background of colorGroup.contrast.backgrounds; track background.name) {\r\n                        <div class=\"tb-wcag-item\">\r\n                          {{ background.name }}:\r\n                          <hermes-label\r\n                            hermes-layout=\"m:none\"\r\n                            hermesType=\"solid\"\r\n                            [hermesText]=\"background.wcag.label\"\r\n                            [hermesBadgeText]=\"background.wcag.score\"\r\n                            [hermesColor]=\"background.wcag.type\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </hermes-tooltip-content>\r\n                </hermes-tooltip>\r\n              </div>\r\n            </hermes-stack-header>\r\n            <hermes-stack-block [hermesStackViewLevel]=\"1\">\r\n              <hermes-stack-label class=\"tb-stack-label\">{{ colorGroup.base.label }}</hermes-stack-label>\r\n              <hermes-stack-content style=\"width: 52%\">\r\n                <div class=\"tb-color-input-wrap\">\r\n                  <input\r\n                    type=\"color\"\r\n                    class=\"tb-color-picker\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color picker'\"\r\n                    (input)=\"\r\n                      setCurrentColor(\r\n                        colorGroup.base,\r\n                        $any($event.target).value,\r\n                        colorStruct[activeTheme][colorGroup.key]\r\n                      )\r\n                    \"\r\n                  />\r\n                  <input\r\n                    readonly\r\n                    type=\"text\"\r\n                    class=\"tb-hex-input\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color hex value'\"\r\n                  />\r\n                  <button\r\n                    *ngIf=\"!colorGroup.base.isOriginalColor\"\r\n                    class=\"btn btn-sm btn-icon btn-primary\"\r\n                    (click)=\"resetColor($event, colorGroup.base, colorStruct[activeTheme][colorGroup.key])\"\r\n                    title=\"Back to original color\"\r\n                  >\r\n                    <hermes-icon shape=\"undo\"></hermes-icon>\r\n                  </button>\r\n                </div>\r\n              </hermes-stack-content>\r\n\r\n              @for (colorVariant of colorGroup.variants; track colorVariant.label) {\r\n                <hermes-stack-block [hermesStackViewLevel]=\"2\">\r\n                  <hermes-stack-label>{{ colorVariant.label }}</hermes-stack-label>\r\n                  <hermes-stack-content>\r\n                    <div class=\"tb-color-input-wrap\">\r\n                      <input\r\n                        type=\"color\"\r\n                        class=\"tb-color-picker\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color picker'\"\r\n                        (input)=\"setCurrentColor(colorVariant, $any($event.target).value)\"\r\n                      />\r\n                      <input\r\n                        readonly\r\n                        type=\"text\"\r\n                        class=\"tb-hex-input\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color hex value'\"\r\n                      />\r\n                      <button\r\n                        *ngIf=\"!colorVariant.isOriginalColor\"\r\n                        class=\"btn btn-sm btn-icon btn-primary\"\r\n                        (click)=\"resetColor($event, colorVariant)\"\r\n                        title=\"Back to original color\"\r\n                      >\r\n                        <hermes-icon shape=\"undo\"></hermes-icon>\r\n                      </button>\r\n                    </div>\r\n                  </hermes-stack-content>\r\n                </hermes-stack-block>\r\n              }\r\n            </hermes-stack-block>\r\n          </hermes-stack-view>\r\n\r\n          @if (colorGroup.key === 'warning' && !colorGroup.base.isOriginalColor) {\r\n            <hermes-toggle-wrapper>\r\n              <input\r\n                type=\"checkbox\"\r\n                hermesToggle\r\n                [(ngModel)]=\"warningTextOverrideEnabled\"\r\n                (ngModelChange)=\"onWarningTextOverrideChange()\"\r\n              />\r\n              <label>Light Theme Warning Text Override</label>\r\n            </hermes-toggle-wrapper>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- end controls card -->\r\n\r\n  <!-- \u2500\u2500 Preview card (right column) \u2500\u2500 -->\r\n  <div class=\"card tb-preview-card\">\r\n    <div class=\"card-header\">\r\n      Live Preview:\r\n      <button\r\n        class=\"btn btn-outline-neutral\"\r\n        [attr.aria-label]=\"'Switch to ' + (isDarkTheme ? 'light' : 'dark') + ' theme'\"\r\n        (click)=\"toggleActiveTheme()\"\r\n      >\r\n        <hermes-icon [shape]=\"isDarkTheme ? 'moon' : 'sun'\" [solid]=\"true\" [size]=\"'md'\"></hermes-icon>\r\n        {{ isDarkTheme ? 'Dark' : 'Light' }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"card-block tb-preview-sandbox\" #previewWrapper [attr.hermes-theme]=\"activeTheme\">\r\n      <ng-content></ng-content>\r\n\r\n      <!-- Breadcrumbs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Breadcrumbs</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-breadcrumbs [items]=\"breadcrumbs\"></hermes-breadcrumbs>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Buttons -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Buttons</p>\r\n        <div class=\"tb-preview-row\">\r\n          <button class=\"btn btn-primary\">Primary</button>\r\n          <button class=\"btn\">Primary Outline</button>\r\n          <button class=\"btn btn-link\">Primary FLAT</button>\r\n          <button class=\"btn btn-info\">Info</button>\r\n          <button class=\"btn btn-info-outline\">Info Outline</button>\r\n          <button class=\"btn btn-link-info\">Info Flat</button>\r\n          <button class=\"btn btn-danger\">Danger</button>\r\n          <button class=\"btn btn-success\">Success</button>\r\n          <button class=\"btn btn-warning\">Warning</button>\r\n          <button class=\"btn btn-primary\" disabled>Disabled</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Badges & Labels -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Badges &amp; Labels</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'info'\"\r\n            [hermesText]=\"'info'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'danger'\" [hermesText]=\"'danger'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'success'\" [hermesText]=\"'success'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'warning'\"\r\n            [hermesText]=\"'warning'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'info'\" [hermesText]=\"'info'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'danger'\"\r\n            [hermesText]=\"'danger'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'success'\"\r\n            [hermesText]=\"'success'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'warning'\" [hermesText]=\"'warning'\" [hermesBadgeText]=\"'99+'\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\">\r\n          <hermes-alert-item><span class=\"alert-text\">This is an info alert.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Operation completed successfully.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Please review before proceeding.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Something went wrong.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- App-Level Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">App-Level Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level info.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Thanks</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level alert.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Fix</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level warning.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Check</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level success.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Great</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- Forms -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Form Controls</p>\r\n        <form hermesForm #tbForm=\"ngForm\" hermesLayout=\"horizontal\">\r\n          <hermes-input-container>\r\n            <label>Text input</label>\r\n            <input hermesInput type=\"text\" placeholder=\"Enter value...\" />\r\n          </hermes-input-container>\r\n          <hermes-checkbox-container>\r\n            <label>Checkbox</label>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox checked />\r\n              <label>Checkbox (checked)</label>\r\n            </hermes-checkbox-wrapper>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox />\r\n              <label>Checkbox (unchecked)</label>\r\n            </hermes-checkbox-wrapper>\r\n          </hermes-checkbox-container>\r\n          <hermes-radio-container>\r\n            <label>Radio</label>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"a\" checked />\r\n              <label>Radio A</label>\r\n            </hermes-radio-wrapper>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"b\" />\r\n              <label>Radio B</label>\r\n            </hermes-radio-wrapper>\r\n          </hermes-radio-container>\r\n          <hermes-toggle-container>\r\n            <label>Toggle</label>\r\n            <hermes-toggle-wrapper>\r\n              <input type=\"checkbox\" hermesToggle checked />\r\n              <label>Toggle (on)</label>\r\n            </hermes-toggle-wrapper>\r\n          </hermes-toggle-container>\r\n\r\n          <hermes-textarea-container>\r\n            <label>Textarea</label>\r\n            <textarea hermesTextarea [(ngModel)]=\"description\" name=\"description\" required></textarea>\r\n            <hermes-control-helper>Please provide a description.</hermes-control-helper>\r\n            <hermes-control-error *hermesIfError=\"'required'\">You must provide a description!</hermes-control-error>\r\n          </hermes-textarea-container>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Accordion -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Accordion</p>\r\n        <hermes-accordion>\r\n          <hermes-accordion-panel [hermesAccordionPanelOpen]=\"true\">\r\n            <hermes-accordion-title>Panel One</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the first accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n          <hermes-accordion-panel>\r\n            <hermes-accordion-title>Panel Two</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the second accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n        </hermes-accordion>\r\n      </div>\r\n\r\n      <!-- Tree view -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tree View</p>\r\n        <hermes-tree>\r\n          <hermes-tree-node [hermesExpanded]=\"true\">\r\n            Root Node\r\n            <hermes-tree-node [hermesSelected]=\"1\"> Child One </hermes-tree-node>\r\n            <hermes-tree-node>\r\n              Child Two\r\n              <hermes-tree-node>Grandchild</hermes-tree-node>\r\n            </hermes-tree-node>\r\n          </hermes-tree-node>\r\n        </hermes-tree>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Progress Bar</p>\r\n        <hermes-progress-bar hermesValue=\"20\" hermesMax=\"100\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"55\" hermesMax=\"100\" hermesColor=\"warning\" hermesLabeled></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"80\" hermesMax=\"100\" hermesColor=\"success\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"40\" hermesMax=\"100\" hermesColor=\"danger\"></hermes-progress-bar>\r\n      </div>\r\n\r\n      <!-- Vertical nav -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Vertical Navigation</p>\r\n        <div class=\"tb-nav-preview-wrap\">\r\n          <hermes-vertical-nav [hermesVerticalNavCollapsible]=\"true\">\r\n            <hermes-vertical-nav-group hermesVerticalNavGroupExpanded>\r\n              <hermes-icon shape=\"home\" hermesVerticalNavIcon></hermes-icon>\r\n              Dashboard\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\" class=\"active\">Overview</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Analytics</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n            <hermes-vertical-nav-group>\r\n              <hermes-icon shape=\"cog\" hermesVerticalNavIcon></hermes-icon>\r\n              Settings\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Profile</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Security</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n          </hermes-vertical-nav>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Stepper</p>\r\n        <form hermesStepper #tbStepperForm=\"ngForm\">\r\n          <hermes-stepper-panel ngModelGroup=\"account\">\r\n            <hermes-step-title>Account Details</hermes-step-title>\r\n            <hermes-step-description>Tell us about yourself</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-input-container>\r\n                <label>Full Name</label>\r\n                <input hermesInput name=\"fullName\" [(ngModel)]=\"stepperForm.account.fullName\" />\r\n              </hermes-input-container>\r\n              <button hermesStepButton=\"next\">Next</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n\r\n          <hermes-stepper-panel ngModelGroup=\"confirm\">\r\n            <hermes-step-title>Confirmation</hermes-step-title>\r\n            <hermes-step-description>Review and submit</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-checkbox-container>\r\n                <hermes-checkbox-wrapper>\r\n                  <input type=\"checkbox\" hermesCheckbox name=\"agree\" [(ngModel)]=\"stepperForm.confirm.agree\" />\r\n                  <label>I agree to the terms</label>\r\n                </hermes-checkbox-wrapper>\r\n              </hermes-checkbox-container>\r\n              <button hermesStepButton=\"previous\">Previous</button>\r\n              <button hermesStepButton=\"submit\">Submit</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Datagrid -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Datagrid</p>\r\n        <hermes-datagrid [hermesDgSelectionType]=\"'multi'\">\r\n          <hermes-dg-column>Name</hermes-dg-column>\r\n          <hermes-dg-column>Role</hermes-dg-column>\r\n          <hermes-dg-column>Status</hermes-dg-column>\r\n          @for (row of rows; track row.name) {\r\n            <hermes-dg-row [hermesDgItem]=\"row\">\r\n              <hermes-dg-cell>{{ row.name }}</hermes-dg-cell>\r\n              <hermes-dg-cell>{{ row.role }}</hermes-dg-cell>\r\n              <hermes-dg-cell>\r\n                <span\r\n                  class=\"badge\"\r\n                  [class.badge-success]=\"row.status === 'Active'\"\r\n                  [class.badge-danger]=\"row.status === 'Inactive'\"\r\n                >\r\n                  {{ row.status }}\r\n                </span>\r\n              </hermes-dg-cell>\r\n            </hermes-dg-row>\r\n          }\r\n          <hermes-dg-footer>{{ rows.length }} users</hermes-dg-footer>\r\n        </hermes-datagrid>\r\n      </div>\r\n\r\n      <!-- Tabs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tabs</p>\r\n        <hermes-tabs>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Dashboard</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Dashboard tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Management</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Management tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Settings</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Settings tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n        </hermes-tabs>\r\n      </div>\r\n\r\n      <!-- Timeline -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Timeline</p>\r\n        <hermes-timeline>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.SUCCESS\">\r\n            <hermes-timeline-step-header>11:59 am</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Add KMS</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Root CA certificate requested.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.CURRENT\">\r\n            <hermes-timeline-step-header>12:04 pm</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Make KMS trust vCenter</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>\r\n              Upload the certificate to the KMS to complete the connection.\r\n            </hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.NOT_STARTED\">\r\n            <hermes-timeline-step-header>--:-- --</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Enable Encryption</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Not started yet.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n        </hermes-timeline>\r\n      </div>\r\n\r\n      <!-- Wizard launcher -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Wizard</p>\r\n        <button class=\"btn btn-outline\" (click)=\"wizardOpen = true\">Open Wizard</button>\r\n        <hermes-wizard [(hermesWizardOpen)]=\"wizardOpen\" hermesWizardSize=\"md\">\r\n          <hermes-wizard-title>Sample Wizard</hermes-wizard-title>\r\n          <hermes-wizard-button [type]=\"'cancel'\">Cancel</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'previous'\">Back</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'next'\">Next</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'finish'\">Finish</hermes-wizard-button>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 1: Introduction</ng-template>\r\n            Welcome to the wizard. This step introduces the process.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 2: Configuration</ng-template>\r\n            Configure the required options in this step.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 3: Confirm</ng-template>\r\n            Review your choices and click Finish.\r\n          </hermes-wizard-page>\r\n        </hermes-wizard>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- end preview card -->\r\n</div>\r\n<!-- end .tb-layout -->\r\n", styles: [":host{display:block}:host ::ng-deep .stack-view .stack-view-key{min-width:26%;max-width:26%}:host ::ng-deep .stack-view .stack-block-content{max-width:46%}:host ::ng-deep .card .alert{margin:0}:host ::ng-deep .card-block .progress,:host ::ng-deep .card-block .progress-static{position:relative;height:var(--hermes-base-progress-bar-height);margin:0}:host ::ng-deep .card-block .progress>progress,:host ::ng-deep .card-block .progress-static>progress{height:100%;position:static}.tb-presets{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap;margin:0 var(--hermes-base-gap-m)}.tb-preset-cards{gap:var(--hermes-base-gap-l)}.tb-preset-cards .tb-preset-card{display:inline-flex;align-items:center;gap:var(--hermes-base-gap-m);margin:0;padding:var(--hermes-base-vertical-offset-m) var(--hermes-base-horizontal-offset-m);min-width:170px}.tb-preset-cards .tb-preset-card.tb-preset-card-active{outline:var(--hermes-alias-object-border-width-200) solid var(--hermes-alias-primary);outline-offset:2px}.tb-preset-cards .tb-preset-card .card-text{margin-bottom:0}.tb-preset-swatch{display:flex;align-items:center;justify-content:center;height:var(--hermes-base-row-height-m);min-width:var(--hermes-base-row-height-m);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);background:var(--hermes-alias-object-container-background);color:var(--hermes-alias-typography-color-300)}.tb-layout{display:grid;grid-template-columns:370px 1fr;gap:var(--hermes-base-gap-l);align-items:start}.tb-controls-card{margin-top:0;position:sticky;top:0;max-height:calc(100vh - var(--hermes-global-space-15));overflow-y:auto}.tb-controls-card .tb-control-header{display:flex;align-items:center;justify-content:space-between}.tb-wcag-container{display:flex;flex-direction:column;gap:var(--hermes-base-gap-s)}.tb-wcag-container .tb-wcag-item{display:flex;justify-content:space-between;align-items:center}.card-block{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l)}.card-block .tb-color-input-wrap{display:flex;align-items:center;gap:var(--hermes-base-gap-s);min-width:190px}.card-block .tb-color-picker{padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-2xs);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);cursor:pointer;background:var(--hermes-alias-object-container-background);width:var(--hermes-global-space-11)}.card-block .tb-hex-input{width:var(--hermes-base-layout-space-5xl);padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-s);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100)}.card-block .tb-stack-label{display:flex;gap:var(--hermes-base-gap-m);align-items:center}.tb-preview-card{margin-top:0}.tb-preview-card .card-header{display:flex;align-items:center;gap:var(--hermes-base-gap-m)}.tb-preview-sandbox{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l);border-bottom-left-radius:var(--hermes-alias-object-border-radius-100);border-bottom-right-radius:var(--hermes-alias-object-border-radius-100)}.tb-preview-section{display:flex;flex-direction:column;gap:var(--hermes-base-gap-m)}.tb-preview-row{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap}.tb-nav-preview-wrap{height:180px;border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);overflow:hidden;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: HermesModule }, { kind: "component", type: i1.HermesAlert, selector: "hermes-alert", inputs: ["hermesAlertSizeSmall", "hermesAlertClosable", "hermesAlertAppLevel", "hermesCloseButtonAriaLabel", "hermesAlertLightweight", "hermesAlertType", "hermesAlertIcon", "hermesAlertClosed"], outputs: ["hermesAlertClosedChange"] }, { kind: "component", type: i1.HermesAlertItem, selector: "hermes-alert-item" }, { kind: "directive", type: i1.HermesAlertText, selector: ".alert-text" }, { kind: "component", type: i2.HermesLabel, selector: "hermes-label", inputs: ["hermesColor", "hermesBadgeText", "hermesText", "hermesClickable", "hermesDisabled", "hermesType"] }, { kind: "component", type: i3.HermesDatagrid, selector: "hermes-datagrid", inputs: ["hermesLoadingMoreItems", "hermesDgSingleSelectionAriaLabel", "hermesDgSingleActionableAriaLabel", "hermesDetailExpandableAriaLabel", "hermesDgDisablePageFocus", "hermesDgCustomSelectAllEnabled", "hermesDgSelectAllDisabled", "hermesDgLoading", "hermesDgSelectionType", "hermesDgSelected", "hermesDgPreserveSelection", "hermesDgRowSelection", "hermesDgItemsIdentityFn"], outputs: ["hermesDgSelectedChange", "hermesDgRefresh", "hermesDgCustomSelectAll"] }, { kind: "component", type: i3.HermesDatagridCell, selector: "hermes-dg-cell" }, { kind: "component", type: i3.HermesDatagridColumn, selector: "hermes-dg-column", inputs: ["hermesFilterStringPlaceholder", "hermesFilterNumberMaxPlaceholder", "hermesFilterNumberMinPlaceholder", "hermesDgDisableUnsort", "hermesDgPinned", "hermesDgColType", "hermesDgField", "hermesDgSortBy", "hermesDgSortOrder", "hermesFilterValue"], outputs: ["hermesDgSortOrderChange", "hermesFilterValueChange"] }, { kind: "component", type: i3.HermesDatagridFooter, selector: "hermes-dg-footer" }, { kind: "component", type: i3.HermesDatagridRow, selector: "hermes-dg-row", inputs: ["hermesDgDetailDisabled", "hermesDgDetailHidden", "hermesDgSkeletonLoading", "hermesDgItem", "hermesDgSelectable", "hermesDgSelected", "hermesDgExpanded", "hermesDgDetailOpenLabel", "hermesDgDetailCloseLabel", "hermesDgRowSelectionLabel"], outputs: ["hermesDgSelectedChange", "hermesDgExpandedChange"] }, { kind: "directive", type: i3.DatagridCellRenderer, selector: "hermes-dg-cell" }, { kind: "directive", type: i3.DatagridHeaderRenderer, selector: "hermes-dg-column", outputs: ["hermesDgColumnResize"] }, { kind: "directive", type: i3.DatagridMainRenderer, selector: "hermes-datagrid" }, { kind: "directive", type: i3.DatagridRowRenderer, selector: "hermes-dg-row" }, { kind: "directive", type: i3.ActionableOompaLoompa, selector: "hermes-datagrid, hermes-dg-row" }, { kind: "directive", type: i3.DatagridWillyWonka, selector: "hermes-datagrid" }, { kind: "directive", type: i3.ExpandableOompaLoompa, selector: "hermes-datagrid, hermes-dg-row" }, { kind: "component", type: i4.HermesStackView, selector: "hermes-stack-view" }, { kind: "component", type: i4.HermesStackHeader, selector: "hermes-stack-header", inputs: ["hermesStackHeaderLevel"] }, { kind: "component", type: i4.HermesStackBlock, selector: "hermes-stack-block", inputs: ["hermesSbExpanded", "hermesSbExpandable", "hermesStackViewLevel", "hermesSbNotifyChange"], outputs: ["hermesSbExpandedChange"] }, { kind: "component", type: i4.HermesStackViewLabel, selector: "hermes-stack-label", inputs: ["id"] }, { kind: "directive", type: i4.HermesStackViewCustomTags, selector: "hermes-stack-content" }, { kind: "component", type: i5.HermesTree, selector: "hermes-tree", inputs: ["hermesLazy"] }, { kind: "component", type: i5.HermesTreeNode, selector: "hermes-tree-node", inputs: ["hermesExpandable", "hermesDisabled", "hermesSelected", "hermesExpanded", "hermesForTypeAhead"], outputs: ["hermesSelectedChange", "hermesExpandedChange"] }, { kind: "component", type: i6.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i6.HermesIconCustomTag, selector: "hermes-icon" }, { kind: "directive", type: i7.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i7.HermesControlError, selector: "hermes-control-error" }, { kind: "component", type: i7.HermesControlHelper, selector: "hermes-control-helper" }, { kind: "directive", type: i7.HermesIfError, selector: "[hermesIfError]", inputs: ["hermesIfError"] }, { kind: "directive", type: i7.HermesForm, selector: "[hermesForm]", inputs: ["hermesLabelSize"] }, { kind: "directive", type: i7.HermesLayout, selector: "[hermesForm][hermesLayout]", inputs: ["hermesLayout"] }, { kind: "directive", type: i8.HermesCheckbox, selector: "[hermesCheckbox],[hermesToggle]" }, { kind: "component", type: i8.HermesCheckboxContainer, selector: "hermes-checkbox-container,hermes-toggle-container", inputs: ["hermesInline"] }, { kind: "component", type: i8.HermesCheckboxWrapper, selector: "hermes-checkbox-wrapper,hermes-toggle-wrapper" }, { kind: "directive", type: i9.HermesInput, selector: "[hermesInput]" }, { kind: "component", type: i9.HermesInputContainer, selector: "hermes-input-container" }, { kind: "directive", type: i10.HermesRadio, selector: "[hermesRadio]" }, { kind: "component", type: i10.HermesRadioContainer, selector: "hermes-radio-container", inputs: ["hermesInline"] }, { kind: "component", type: i10.HermesRadioWrapper, selector: "hermes-radio-wrapper" }, { kind: "directive", type: i11.HermesTextarea, selector: "[hermesTextarea]" }, { kind: "component", type: i11.HermesTextareaContainer, selector: "hermes-textarea-container" }, { kind: "component", type: i12.HermesTabContent, selector: "hermes-tab-content", inputs: ["id"] }, { kind: "component", type: i12.HermesTab, selector: "hermes-tab" }, { kind: "component", type: i12.HermesTabs, selector: "hermes-tabs", inputs: ["hermesLayout"] }, { kind: "directive", type: i12.HermesTabLink, selector: "[hermesTabLink]", inputs: ["id", "hermesTabLinkInOverflow"] }, { kind: "directive", type: i12.TabsWillyWonka, selector: "hermes-tabs" }, { kind: "directive", type: i12.ActiveOompaLoompa, selector: "[hermesTabLink], hermes-tab-content" }, { kind: "component", type: i13.HermesVerticalNav, selector: "hermes-vertical-nav", inputs: ["hermesVerticalNavToggleLabel", "hermesVerticalNavCollapsible", "hermesVerticalNavCollapsed"], outputs: ["hermesVerticalNavCollapsedChange"] }, { kind: "component", type: i13.HermesVerticalNavLink, selector: "[hermesVerticalNavLink]" }, { kind: "component", type: i13.HermesVerticalNavGroup, selector: "hermes-vertical-nav-group", inputs: ["hermesVerticalNavGroupExpanded"], outputs: ["hermesVerticalNavGroupExpandedChange"] }, { kind: "component", type: i13.HermesVerticalNavGroupChildren, selector: "hermes-vertical-nav-group-children" }, { kind: "directive", type: i13.HermesVerticalNavIcon, selector: "[hermesVerticalNavIcon]" }, { kind: "component", type: i14.HermesBreadcrumbs, selector: "hermes-breadcrumbs", inputs: ["items"], outputs: ["hermesBreadcrumbItemClick"] }, { kind: "component", type: i15.HermesTooltip, selector: "hermes-tooltip" }, { kind: "directive", type: i15.HermesTooltipTrigger, selector: "[hermesTooltipTrigger]" }, { kind: "component", type: i15.HermesTooltipContent, selector: "hermes-tooltip-content", inputs: ["id", "hermesPosition", "hermesSize"] }, { kind: "component", type: i16.HermesWizard, selector: "hermes-wizard", inputs: ["hermesWizardStepnavAriaLabel", "hermesWizardStepnavLayout", "hermesWizardSize", "hermesWizardInPage", "hermesWizardInPageFillContentArea", "hermesWizardHideFooter", "hermesWizardFooterAlign", "hermesWizardClosable", "hermesWizardPreventModalAnimation", "hermesWizardForceForwardNavigation", "hermesWizardOpen", "hermesWizardPreventDefaultNext", "hermesWizardPreventDefaultCancel", "hermesWizardPreventNavigation", "hermesWizardDisableStepnav"], outputs: ["hermesWizardOpenChange", "hermesWizardOnCancel", "hermesWizardOnFinish", "hermesWizardOnReset", "hermesWizardCurrentPageChange", "hermesWizardOnNext", "hermesWizardOnPrevious"] }, { kind: "component", type: i16.HermesWizardPage, selector: "hermes-wizard-page", inputs: ["id", "hermesWizardPagePreventDefault", "hermesWizardPageNextDisabled", "hermesWizardPagePreviousDisabled", "hermesWizardPageHasError", "hermesWizardPagePreventDefaultCancel", "hermesWizardPagePreventDefaultNext"], outputs: ["hermesWizardPageNextDisabledChange", "hermesWizardPagePreviousDisabledChange", "hermesWizardPagePreventDefaultCancelChange", "hermesWizardPageOnCommit", "hermesWizardPageOnLoad", "hermesWizardPageOnCancel", "hermesWizardPageFinish", "hermesWizardPagePrevious", "hermesWizardPageNext", "hermesWizardPageDanger", "hermesWizardPagePrimary", "hermesWizardPageCustomButton"] }, { kind: "component", type: i16.HermesWizardButton, selector: "hermes-wizard-button", inputs: ["type", "hermesWizardButtonDisabled", "hermesWizardButtonHidden"], outputs: ["hermesWizardButtonClicked"] }, { kind: "directive", type: i16.HermesWizardTitle, selector: "hermes-wizard-title", inputs: ["hermesHeadingLevel"] }, { kind: "directive", type: i16.HermesWizardPageTitle, selector: "[hermesPageTitle]", inputs: ["hermesHeadingLevel"] }, { kind: "component", type: i17.HermesAccordion, selector: "hermes-accordion", inputs: ["hermesAccordionMultiPanel"] }, { kind: "component", type: i17.HermesAccordionPanel, selector: "hermes-accordion-panel", inputs: ["hermesAccordionPanelDisabled", "hermesAccordionPanelOpen", "hermesAccordionPanelHeadingLevel"], outputs: ["hermesAccordionPanelOpenChange"] }, { kind: "component", type: i17.HermesAccordionTitle, selector: "hermes-accordion-title" }, { kind: "component", type: i17.HermesAccordionContent, selector: "hermes-accordion-content" }, { kind: "directive", type: i17.AccordionOompaLoompa, selector: "hermes-accordion-panel" }, { kind: "directive", type: i17.AccordionWillyWonka, selector: "hermes-accordion" }, { kind: "component", type: i18.HermesStepper, selector: "form[hermesStepper]", inputs: ["hermesInitialStep"] }, { kind: "directive", type: i18.HermesStepButton, selector: "[hermesStepButton]", inputs: ["hermesStepButton"] }, { kind: "component", type: i18.HermesStepTitle, selector: "hermes-step-title" }, { kind: "component", type: i18.HermesStepDescription, selector: "hermes-step-description" }, { kind: "component", type: i18.HermesStepContent, selector: "hermes-step-content" }, { kind: "component", type: i18.HermesStepperPanel, selector: "hermes-stepper-panel" }, { kind: "directive", type: i18.StepperOompaLoompa, selector: "hermes-stepper-panel, [hermesStepButton]" }, { kind: "directive", type: i18.StepperWillyWonka, selector: "form[hermesStepper]" }, { kind: "component", type: i19.HermesProgressBar, selector: "hermes-progress-bar", inputs: ["hermesMax", "hermesDisplayval", "hermesColor", "hermesValue", "id", "hermesCompact", "hermesLabeled", "hermesFade", "hermesLoop", "hermesFlash", "hermesFlashDanger"] }, { kind: "component", type: i20.HermesTimeline, selector: "hermes-timeline", inputs: ["hermesLayout"] }, { kind: "component", type: i20.HermesTimelineStep, selector: "hermes-timeline-step", inputs: ["hermesState"] }, { kind: "component", type: i20.HermesTimelineStepDescription, selector: "hermes-timeline-step-description" }, { kind: "component", type: i20.HermesTimelineStepHeader, selector: "hermes-timeline-step-header" }, { kind: "component", type: i20.HermesTimelineStepTitle, selector: "hermes-timeline-step-title" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i21.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i22.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i22.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i22.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i22.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i22.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i22.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i22.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i22.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i22.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i21.UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ThemeBuilderComponent, isStandalone: true, selector: "hermes-theme-builder", inputs: { presets: "presets" }, outputs: { generatedCSS: "generatedCSS" }, viewQueries: [{ propertyName: "previewWrapper", first: true, predicate: ["previewWrapper"], descendants: true }, { propertyName: "previewDarkWrapper", first: true, predicate: ["previewDarkWrapper"], descendants: true }], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<!-- Preset selector -->\r\n<div class=\"tb-presets\" hermes-layout=\"m-t:lg\">\r\n  <div class=\"tb-preset-cards hermes-row\">\r\n    @for (preset of presets; track preset.name) {\r\n      <a\r\n        href=\"javascript://\"\r\n        class=\"card clickable tb-preset-card hermes-col-1\"\r\n        [class.tb-preset-card-active]=\"activePreset?.name === preset.name\"\r\n        (click)=\"applyPreset(preset)\"\r\n      >\r\n        <div class=\"tb-preset-swatch\" [style.background-color]=\"preset.light?.primary?.hex\"></div>\r\n        <div class=\"card-text\">{{ preset.name }}</div>\r\n      </a>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500 Preview DARK card \u2500\u2500 -->\r\n<!-- Invisible for filling the dark values on initial load -->\r\n<div style=\"display: none\" #previewDarkWrapper hermes-theme=\"dark\"></div>\r\n\r\n<!-- \u2500\u2500 Two-column layout: controls | preview \u2500\u2500 -->\r\n<div class=\"tb-layout\" hermes-layout=\"m-t:lg m-b:lg\">\r\n  <!-- \u2500\u2500 Controls card (sticky left column) \u2500\u2500 -->\r\n  <div class=\"card tb-controls-card\">\r\n    <div class=\"card-block\">\r\n      @for (colorGroup of themeColors; track colorGroup.key) {\r\n        <div>\r\n          <hermes-stack-view>\r\n            <hermes-stack-header>\r\n              <div class=\"tb-control-header\">\r\n                {{ colorGroup.key | uppercase }}\r\n\r\n                <hermes-tooltip>\r\n                  <hermes-label\r\n                    hermes-layout=\"m:none\"\r\n                    hermesTooltipTrigger\r\n                    [hermesText]=\"'Contrast ' + colorGroup.contrast.minContrast.wcag.label\"\r\n                    [hermesBadgeText]=\"colorGroup.contrast.minContrast.wcag.score\"\r\n                    [hermesColor]=\"colorGroup.contrast.minContrast.wcag.type\"\r\n                  >\r\n                  </hermes-label>\r\n                  <hermes-tooltip-content hermesPosition=\"right\" hermesSize=\"lg\">\r\n                    <div class=\"tb-wcag-container\">\r\n                      @for (background of colorGroup.contrast.backgrounds; track background.name) {\r\n                        <div class=\"tb-wcag-item\">\r\n                          {{ background.name }}:\r\n                          <hermes-label\r\n                            hermes-layout=\"m:none\"\r\n                            hermesType=\"solid\"\r\n                            [hermesText]=\"background.wcag.label\"\r\n                            [hermesBadgeText]=\"background.wcag.score\"\r\n                            [hermesColor]=\"background.wcag.type\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </hermes-tooltip-content>\r\n                </hermes-tooltip>\r\n              </div>\r\n            </hermes-stack-header>\r\n            <hermes-stack-block [hermesStackViewLevel]=\"1\">\r\n              <hermes-stack-label class=\"tb-stack-label\">{{ colorGroup.base.label }}</hermes-stack-label>\r\n              <hermes-stack-content style=\"width: 52%\">\r\n                <div class=\"tb-color-input-wrap\">\r\n                  <input\r\n                    type=\"color\"\r\n                    class=\"tb-color-picker\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color picker'\"\r\n                    (input)=\"\r\n                      setCurrentColor(\r\n                        colorGroup.base,\r\n                        $any($event.target).value,\r\n                        colorStruct[activeTheme][colorGroup.key]\r\n                      )\r\n                    \"\r\n                  />\r\n                  <input\r\n                    readonly\r\n                    type=\"text\"\r\n                    class=\"tb-hex-input\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color hex value'\"\r\n                  />\r\n                  <button\r\n                    *ngIf=\"!colorGroup.base.isOriginalColor\"\r\n                    class=\"btn btn-sm btn-icon btn-primary\"\r\n                    (click)=\"resetColor($event, colorGroup.base, colorStruct[activeTheme][colorGroup.key])\"\r\n                    title=\"Back to original color\"\r\n                  >\r\n                    <hermes-icon shape=\"undo\"></hermes-icon>\r\n                  </button>\r\n                </div>\r\n              </hermes-stack-content>\r\n\r\n              @for (colorVariant of colorGroup.variants; track colorVariant.label) {\r\n                <hermes-stack-block [hermesStackViewLevel]=\"2\">\r\n                  <hermes-stack-label>{{ colorVariant.label }}</hermes-stack-label>\r\n                  <hermes-stack-content>\r\n                    <div class=\"tb-color-input-wrap\">\r\n                      <input\r\n                        type=\"color\"\r\n                        class=\"tb-color-picker\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color picker'\"\r\n                        (input)=\"setCurrentColor(colorVariant, $any($event.target).value)\"\r\n                      />\r\n                      <input\r\n                        readonly\r\n                        type=\"text\"\r\n                        class=\"tb-hex-input\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color hex value'\"\r\n                      />\r\n                      <button\r\n                        *ngIf=\"!colorVariant.isOriginalColor\"\r\n                        class=\"btn btn-sm btn-icon btn-primary\"\r\n                        (click)=\"resetColor($event, colorVariant)\"\r\n                        title=\"Back to original color\"\r\n                      >\r\n                        <hermes-icon shape=\"undo\"></hermes-icon>\r\n                      </button>\r\n                    </div>\r\n                  </hermes-stack-content>\r\n                </hermes-stack-block>\r\n              }\r\n            </hermes-stack-block>\r\n          </hermes-stack-view>\r\n\r\n          @if (colorGroup.key === 'warning' && !colorGroup.base.isOriginalColor) {\r\n            <hermes-toggle-wrapper>\r\n              <input\r\n                type=\"checkbox\"\r\n                hermesToggle\r\n                [(ngModel)]=\"warningTextOverrideEnabled\"\r\n                (ngModelChange)=\"onWarningTextOverrideChange()\"\r\n              />\r\n              <label>Light Theme Warning Text Override</label>\r\n            </hermes-toggle-wrapper>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- end controls card -->\r\n\r\n  <!-- \u2500\u2500 Preview card (right column) \u2500\u2500 -->\r\n  <div class=\"card tb-preview-card\">\r\n    <div class=\"card-header\">\r\n      Live Preview:\r\n      <button\r\n        class=\"btn btn-outline-neutral\"\r\n        [attr.aria-label]=\"'Switch to ' + (isDarkTheme ? 'light' : 'dark') + ' theme'\"\r\n        (click)=\"toggleActiveTheme()\"\r\n      >\r\n        <hermes-icon [shape]=\"isDarkTheme ? 'moon' : 'sun'\" [solid]=\"true\" [size]=\"'md'\"></hermes-icon>\r\n        {{ isDarkTheme ? 'Dark' : 'Light' }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"card-block tb-preview-sandbox\" #previewWrapper [attr.hermes-theme]=\"activeTheme\">\r\n      <ng-content></ng-content>\r\n\r\n      <!-- Breadcrumbs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Breadcrumbs</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-breadcrumbs [items]=\"breadcrumbs\"></hermes-breadcrumbs>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Buttons -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Buttons</p>\r\n        <div class=\"tb-preview-row\">\r\n          <button class=\"btn btn-primary\">Primary</button>\r\n          <button class=\"btn\">Primary Outline</button>\r\n          <button class=\"btn btn-link\">Primary FLAT</button>\r\n          <button class=\"btn btn-info\">Info</button>\r\n          <button class=\"btn btn-info-outline\">Info Outline</button>\r\n          <button class=\"btn btn-link-info\">Info Flat</button>\r\n          <button class=\"btn btn-danger\">Danger</button>\r\n          <button class=\"btn btn-success\">Success</button>\r\n          <button class=\"btn btn-warning\">Warning</button>\r\n          <button class=\"btn btn-primary\" disabled>Disabled</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Badges & Labels -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Badges &amp; Labels</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'info'\"\r\n            [hermesText]=\"'info'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'danger'\" [hermesText]=\"'danger'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'success'\" [hermesText]=\"'success'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'warning'\"\r\n            [hermesText]=\"'warning'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'info'\" [hermesText]=\"'info'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'danger'\"\r\n            [hermesText]=\"'danger'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'success'\"\r\n            [hermesText]=\"'success'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'warning'\" [hermesText]=\"'warning'\" [hermesBadgeText]=\"'99+'\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\">\r\n          <hermes-alert-item><span class=\"alert-text\">This is an info alert.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Operation completed successfully.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Please review before proceeding.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Something went wrong.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- App-Level Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">App-Level Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level info.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Thanks</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level alert.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Fix</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level warning.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Check</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level success.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Great</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- Forms -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Form Controls</p>\r\n        <form hermesForm #tbForm=\"ngForm\" hermesLayout=\"horizontal\">\r\n          <hermes-input-container>\r\n            <label>Text input</label>\r\n            <input hermesInput type=\"text\" placeholder=\"Enter value...\" />\r\n          </hermes-input-container>\r\n          <hermes-checkbox-container>\r\n            <label>Checkbox</label>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox checked />\r\n              <label>Checkbox (checked)</label>\r\n            </hermes-checkbox-wrapper>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox />\r\n              <label>Checkbox (unchecked)</label>\r\n            </hermes-checkbox-wrapper>\r\n          </hermes-checkbox-container>\r\n          <hermes-radio-container>\r\n            <label>Radio</label>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"a\" checked />\r\n              <label>Radio A</label>\r\n            </hermes-radio-wrapper>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"b\" />\r\n              <label>Radio B</label>\r\n            </hermes-radio-wrapper>\r\n          </hermes-radio-container>\r\n          <hermes-toggle-container>\r\n            <label>Toggle</label>\r\n            <hermes-toggle-wrapper>\r\n              <input type=\"checkbox\" hermesToggle checked />\r\n              <label>Toggle (on)</label>\r\n            </hermes-toggle-wrapper>\r\n          </hermes-toggle-container>\r\n\r\n          <hermes-textarea-container>\r\n            <label>Textarea</label>\r\n            <textarea hermesTextarea [(ngModel)]=\"description\" name=\"description\" required></textarea>\r\n            <hermes-control-helper>Please provide a description.</hermes-control-helper>\r\n            <hermes-control-error *hermesIfError=\"'required'\">You must provide a description!</hermes-control-error>\r\n          </hermes-textarea-container>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Accordion -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Accordion</p>\r\n        <hermes-accordion>\r\n          <hermes-accordion-panel [hermesAccordionPanelOpen]=\"true\">\r\n            <hermes-accordion-title>Panel One</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the first accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n          <hermes-accordion-panel>\r\n            <hermes-accordion-title>Panel Two</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the second accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n        </hermes-accordion>\r\n      </div>\r\n\r\n      <!-- Tree view -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tree View</p>\r\n        <hermes-tree>\r\n          <hermes-tree-node [hermesExpanded]=\"true\">\r\n            Root Node\r\n            <hermes-tree-node [hermesSelected]=\"1\"> Child One </hermes-tree-node>\r\n            <hermes-tree-node>\r\n              Child Two\r\n              <hermes-tree-node>Grandchild</hermes-tree-node>\r\n            </hermes-tree-node>\r\n          </hermes-tree-node>\r\n        </hermes-tree>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Progress Bar</p>\r\n        <hermes-progress-bar hermesValue=\"20\" hermesMax=\"100\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"55\" hermesMax=\"100\" hermesColor=\"warning\" hermesLabeled></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"80\" hermesMax=\"100\" hermesColor=\"success\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"40\" hermesMax=\"100\" hermesColor=\"danger\"></hermes-progress-bar>\r\n      </div>\r\n\r\n      <!-- Vertical nav -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Vertical Navigation</p>\r\n        <div class=\"tb-nav-preview-wrap\">\r\n          <hermes-vertical-nav [hermesVerticalNavCollapsible]=\"true\">\r\n            <hermes-vertical-nav-group hermesVerticalNavGroupExpanded>\r\n              <hermes-icon shape=\"home\" hermesVerticalNavIcon></hermes-icon>\r\n              Dashboard\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\" class=\"active\">Overview</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Analytics</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n            <hermes-vertical-nav-group>\r\n              <hermes-icon shape=\"cog\" hermesVerticalNavIcon></hermes-icon>\r\n              Settings\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Profile</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Security</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n          </hermes-vertical-nav>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Stepper</p>\r\n        <form hermesStepper #tbStepperForm=\"ngForm\">\r\n          <hermes-stepper-panel ngModelGroup=\"account\">\r\n            <hermes-step-title>Account Details</hermes-step-title>\r\n            <hermes-step-description>Tell us about yourself</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-input-container>\r\n                <label>Full Name</label>\r\n                <input hermesInput name=\"fullName\" [(ngModel)]=\"stepperForm.account.fullName\" />\r\n              </hermes-input-container>\r\n              <button hermesStepButton=\"next\">Next</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n\r\n          <hermes-stepper-panel ngModelGroup=\"confirm\">\r\n            <hermes-step-title>Confirmation</hermes-step-title>\r\n            <hermes-step-description>Review and submit</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-checkbox-container>\r\n                <hermes-checkbox-wrapper>\r\n                  <input type=\"checkbox\" hermesCheckbox name=\"agree\" [(ngModel)]=\"stepperForm.confirm.agree\" />\r\n                  <label>I agree to the terms</label>\r\n                </hermes-checkbox-wrapper>\r\n              </hermes-checkbox-container>\r\n              <button hermesStepButton=\"previous\">Previous</button>\r\n              <button hermesStepButton=\"submit\">Submit</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Datagrid -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Datagrid</p>\r\n        <hermes-datagrid [hermesDgSelectionType]=\"'multi'\">\r\n          <hermes-dg-column>Name</hermes-dg-column>\r\n          <hermes-dg-column>Role</hermes-dg-column>\r\n          <hermes-dg-column>Status</hermes-dg-column>\r\n          @for (row of rows; track row.name) {\r\n            <hermes-dg-row [hermesDgItem]=\"row\">\r\n              <hermes-dg-cell>{{ row.name }}</hermes-dg-cell>\r\n              <hermes-dg-cell>{{ row.role }}</hermes-dg-cell>\r\n              <hermes-dg-cell>\r\n                <span\r\n                  class=\"badge\"\r\n                  [class.badge-success]=\"row.status === 'Active'\"\r\n                  [class.badge-danger]=\"row.status === 'Inactive'\"\r\n                >\r\n                  {{ row.status }}\r\n                </span>\r\n              </hermes-dg-cell>\r\n            </hermes-dg-row>\r\n          }\r\n          <hermes-dg-footer>{{ rows.length }} users</hermes-dg-footer>\r\n        </hermes-datagrid>\r\n      </div>\r\n\r\n      <!-- Tabs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tabs</p>\r\n        <hermes-tabs>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Dashboard</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Dashboard tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Management</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Management tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Settings</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Settings tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n        </hermes-tabs>\r\n      </div>\r\n\r\n      <!-- Timeline -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Timeline</p>\r\n        <hermes-timeline>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.SUCCESS\">\r\n            <hermes-timeline-step-header>11:59 am</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Add KMS</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Root CA certificate requested.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.CURRENT\">\r\n            <hermes-timeline-step-header>12:04 pm</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Make KMS trust vCenter</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>\r\n              Upload the certificate to the KMS to complete the connection.\r\n            </hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.NOT_STARTED\">\r\n            <hermes-timeline-step-header>--:-- --</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Enable Encryption</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Not started yet.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n        </hermes-timeline>\r\n      </div>\r\n\r\n      <!-- Wizard launcher -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Wizard</p>\r\n        <button class=\"btn btn-outline\" (click)=\"wizardOpen = true\">Open Wizard</button>\r\n        <hermes-wizard [(hermesWizardOpen)]=\"wizardOpen\" hermesWizardSize=\"md\">\r\n          <hermes-wizard-title>Sample Wizard</hermes-wizard-title>\r\n          <hermes-wizard-button [type]=\"'cancel'\">Cancel</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'previous'\">Back</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'next'\">Next</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'finish'\">Finish</hermes-wizard-button>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 1: Introduction</ng-template>\r\n            Welcome to the wizard. This step introduces the process.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 2: Configuration</ng-template>\r\n            Configure the required options in this step.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 3: Confirm</ng-template>\r\n            Review your choices and click Finish.\r\n          </hermes-wizard-page>\r\n        </hermes-wizard>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- end preview card -->\r\n</div>\r\n<!-- end .tb-layout -->\r\n", styles: [":host{display:block}:host ::ng-deep .stack-view .stack-view-key{min-width:26%;max-width:26%}:host ::ng-deep .stack-view .stack-block-content{max-width:46%}:host ::ng-deep .card .alert{margin:0}:host ::ng-deep .card-block .progress,:host ::ng-deep .card-block .progress-static{position:relative;height:var(--hermes-base-progress-bar-height);margin:0}:host ::ng-deep .card-block .progress>progress,:host ::ng-deep .card-block .progress-static>progress{height:100%;position:static}.tb-presets{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap;margin:0 var(--hermes-base-gap-m)}.tb-preset-cards{gap:var(--hermes-base-gap-l)}.tb-preset-cards .tb-preset-card{display:inline-flex;align-items:center;gap:var(--hermes-base-gap-m);margin:0;padding:var(--hermes-base-vertical-offset-m) var(--hermes-base-horizontal-offset-m);min-width:170px}.tb-preset-cards .tb-preset-card.tb-preset-card-active{outline:var(--hermes-alias-object-border-width-200) solid var(--hermes-alias-primary);outline-offset:2px}.tb-preset-cards .tb-preset-card .card-text{margin-bottom:0}.tb-preset-swatch{display:flex;align-items:center;justify-content:center;height:var(--hermes-base-row-height-m);min-width:var(--hermes-base-row-height-m);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);background:var(--hermes-alias-object-container-background);color:var(--hermes-alias-typography-color-300)}.tb-layout{display:grid;grid-template-columns:370px 1fr;gap:var(--hermes-base-gap-l);align-items:start}.tb-controls-card{margin-top:0;position:sticky;top:0;max-height:calc(100vh - var(--hermes-global-space-15));overflow-y:auto}.tb-controls-card .tb-control-header{display:flex;align-items:center;justify-content:space-between}.tb-wcag-container{display:flex;flex-direction:column;gap:var(--hermes-base-gap-s)}.tb-wcag-container .tb-wcag-item{display:flex;justify-content:space-between;align-items:center}.card-block{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l)}.card-block .tb-color-input-wrap{display:flex;align-items:center;gap:var(--hermes-base-gap-s);min-width:190px}.card-block .tb-color-picker{padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-2xs);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);cursor:pointer;background:var(--hermes-alias-object-container-background);width:var(--hermes-global-space-11)}.card-block .tb-hex-input{width:var(--hermes-base-layout-space-5xl);padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-s);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100)}.card-block .tb-stack-label{display:flex;gap:var(--hermes-base-gap-m);align-items:center}.tb-preview-card{margin-top:0}.tb-preview-card .card-header{display:flex;align-items:center;gap:var(--hermes-base-gap-m)}.tb-preview-sandbox{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l);border-bottom-left-radius:var(--hermes-alias-object-border-radius-100);border-bottom-right-radius:var(--hermes-alias-object-border-radius-100)}.tb-preview-section{display:flex;flex-direction:column;gap:var(--hermes-base-gap-m)}.tb-preview-row{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap}.tb-nav-preview-wrap{height:180px;border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);overflow:hidden;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: HermesModule }, { kind: "component", type: i1.HermesAlert, selector: "hermes-alert", inputs: ["hermesAlertSizeSmall", "hermesAlertClosable", "hermesAlertAppLevel", "hermesCloseButtonAriaLabel", "hermesAlertLightweight", "hermesAlertType", "hermesAlertIcon", "hermesAlertClosed"], outputs: ["hermesAlertClosedChange"] }, { kind: "component", type: i1.HermesAlertItem, selector: "hermes-alert-item" }, { kind: "directive", type: i1.HermesAlertText, selector: ".alert-text" }, { kind: "component", type: i2.HermesLabel, selector: "hermes-label", inputs: ["hermesColor", "hermesBadgeText", "hermesText", "hermesClickable", "hermesDisabled", "hermesType"] }, { kind: "component", type: i3.HermesDatagrid, selector: "hermes-datagrid", inputs: ["hermesLoadingMoreItems", "hermesDgSingleSelectionAriaLabel", "hermesDgSingleActionableAriaLabel", "hermesDetailExpandableAriaLabel", "hermesDgDisablePageFocus", "hermesDgCustomSelectAllEnabled", "hermesDgSelectAllDisabled", "hermesDgLoading", "hermesDgSelectionType", "hermesDgSelected", "hermesDgPreserveSelection", "hermesDgRowSelection", "hermesDgItemsIdentityFn"], outputs: ["hermesDgSelectedChange", "hermesDgRefresh", "hermesDgCustomSelectAll"] }, { kind: "component", type: i3.HermesDatagridCell, selector: "hermes-dg-cell" }, { kind: "component", type: i3.HermesDatagridColumn, selector: "hermes-dg-column", inputs: ["hermesFilterStringPlaceholder", "hermesFilterNumberMaxPlaceholder", "hermesFilterNumberMinPlaceholder", "hermesDgDisableUnsort", "hermesDgPinned", "hermesDgColType", "hermesDgField", "hermesDgSortBy", "hermesDgSortOrder", "hermesFilterValue"], outputs: ["hermesDgSortOrderChange", "hermesFilterValueChange"] }, { kind: "component", type: i3.HermesDatagridFooter, selector: "hermes-dg-footer" }, { kind: "component", type: i3.HermesDatagridRow, selector: "hermes-dg-row", inputs: ["hermesDgDetailDisabled", "hermesDgDetailHidden", "hermesDgSkeletonLoading", "hermesDgItem", "hermesDgSelectable", "hermesDgSelected", "hermesDgExpanded", "hermesDgDetailOpenLabel", "hermesDgDetailCloseLabel", "hermesDgRowSelectionLabel"], outputs: ["hermesDgSelectedChange", "hermesDgExpandedChange"] }, { kind: "directive", type: i3.DatagridCellRenderer, selector: "hermes-dg-cell" }, { kind: "directive", type: i3.DatagridHeaderRenderer, selector: "hermes-dg-column", outputs: ["hermesDgColumnResize"] }, { kind: "directive", type: i3.DatagridMainRenderer, selector: "hermes-datagrid" }, { kind: "directive", type: i3.DatagridRowRenderer, selector: "hermes-dg-row" }, { kind: "directive", type: i3.ActionableOompaLoompa, selector: "hermes-datagrid, hermes-dg-row" }, { kind: "directive", type: i3.DatagridWillyWonka, selector: "hermes-datagrid" }, { kind: "directive", type: i3.ExpandableOompaLoompa, selector: "hermes-datagrid, hermes-dg-row" }, { kind: "component", type: i4.HermesStackView, selector: "hermes-stack-view" }, { kind: "component", type: i4.HermesStackHeader, selector: "hermes-stack-header", inputs: ["hermesStackHeaderLevel"] }, { kind: "component", type: i4.HermesStackBlock, selector: "hermes-stack-block", inputs: ["hermesSbExpanded", "hermesSbExpandable", "hermesStackViewLevel", "hermesSbNotifyChange"], outputs: ["hermesSbExpandedChange"] }, { kind: "component", type: i4.HermesStackViewLabel, selector: "hermes-stack-label", inputs: ["id"] }, { kind: "directive", type: i4.HermesStackViewCustomTags, selector: "hermes-stack-content" }, { kind: "component", type: i5.HermesTree, selector: "hermes-tree", inputs: ["hermesLazy"] }, { kind: "component", type: i5.HermesTreeNode, selector: "hermes-tree-node", inputs: ["hermesExpandable", "hermesDisabled", "hermesSelected", "hermesExpanded", "hermesForTypeAhead"], outputs: ["hermesSelectedChange", "hermesExpandedChange"] }, { kind: "component", type: i6.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i6.HermesIconCustomTag, selector: "hermes-icon" }, { kind: "directive", type: i7.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i7.HermesControlError, selector: "hermes-control-error" }, { kind: "component", type: i7.HermesControlHelper, selector: "hermes-control-helper" }, { kind: "directive", type: i7.HermesIfError, selector: "[hermesIfError]", inputs: ["hermesIfError"] }, { kind: "directive", type: i7.HermesForm, selector: "[hermesForm]", inputs: ["hermesLabelSize"] }, { kind: "directive", type: i7.HermesLayout, selector: "[hermesForm][hermesLayout]", inputs: ["hermesLayout"] }, { kind: "directive", type: i8.HermesCheckbox, selector: "[hermesCheckbox],[hermesToggle]" }, { kind: "component", type: i8.HermesCheckboxContainer, selector: "hermes-checkbox-container,hermes-toggle-container", inputs: ["hermesInline"] }, { kind: "component", type: i8.HermesCheckboxWrapper, selector: "hermes-checkbox-wrapper,hermes-toggle-wrapper" }, { kind: "directive", type: i9.HermesInput, selector: "[hermesInput]" }, { kind: "component", type: i9.HermesInputContainer, selector: "hermes-input-container" }, { kind: "directive", type: i10.HermesRadio, selector: "[hermesRadio]" }, { kind: "component", type: i10.HermesRadioContainer, selector: "hermes-radio-container", inputs: ["hermesInline"] }, { kind: "component", type: i10.HermesRadioWrapper, selector: "hermes-radio-wrapper" }, { kind: "directive", type: i11.HermesTextarea, selector: "[hermesTextarea]" }, { kind: "component", type: i11.HermesTextareaContainer, selector: "hermes-textarea-container" }, { kind: "component", type: i12.HermesTabContent, selector: "hermes-tab-content", inputs: ["id"] }, { kind: "component", type: i12.HermesTab, selector: "hermes-tab" }, { kind: "component", type: i12.HermesTabs, selector: "hermes-tabs", inputs: ["hermesLayout"] }, { kind: "directive", type: i12.HermesTabLink, selector: "[hermesTabLink]", inputs: ["id", "hermesTabLinkInOverflow"] }, { kind: "directive", type: i12.TabsWillyWonka, selector: "hermes-tabs" }, { kind: "directive", type: i12.ActiveOompaLoompa, selector: "[hermesTabLink], hermes-tab-content" }, { kind: "component", type: i13.HermesVerticalNav, selector: "hermes-vertical-nav", inputs: ["hermesVerticalNavToggleLabel", "hermesVerticalNavPinnable", "hermesVerticalNavCollapsible", "hermesVerticalNavCollapsed"], outputs: ["hermesVerticalNavCollapsedChange"] }, { kind: "component", type: i13.HermesVerticalNavLink, selector: "[hermesVerticalNavLink]" }, { kind: "component", type: i13.HermesVerticalNavGroup, selector: "hermes-vertical-nav-group", inputs: ["hermesVerticalNavGroupExpanded"], outputs: ["hermesVerticalNavGroupExpandedChange"] }, { kind: "component", type: i13.HermesVerticalNavGroupChildren, selector: "hermes-vertical-nav-group-children" }, { kind: "directive", type: i13.HermesVerticalNavIcon, selector: "[hermesVerticalNavIcon]" }, { kind: "component", type: i14.HermesBreadcrumbs, selector: "hermes-breadcrumbs", inputs: ["items"], outputs: ["hermesBreadcrumbItemClick"] }, { kind: "component", type: i15.HermesTooltip, selector: "hermes-tooltip" }, { kind: "directive", type: i15.HermesTooltipTrigger, selector: "[hermesTooltipTrigger]" }, { kind: "component", type: i15.HermesTooltipContent, selector: "hermes-tooltip-content", inputs: ["id", "hermesPosition", "hermesSize"] }, { kind: "component", type: i16.HermesWizard, selector: "hermes-wizard", inputs: ["hermesWizardStepnavAriaLabel", "hermesWizardStepnavLayout", "hermesWizardSize", "hermesWizardInPage", "hermesWizardInPageFillContentArea", "hermesWizardHideFooter", "hermesWizardFooterAlign", "hermesWizardClosable", "hermesWizardPreventModalAnimation", "hermesWizardForceForwardNavigation", "hermesWizardOpen", "hermesWizardPreventDefaultNext", "hermesWizardPreventDefaultCancel", "hermesWizardPreventNavigation", "hermesWizardDisableStepnav"], outputs: ["hermesWizardOpenChange", "hermesWizardOnCancel", "hermesWizardOnFinish", "hermesWizardOnReset", "hermesWizardCurrentPageChange", "hermesWizardOnNext", "hermesWizardOnPrevious"] }, { kind: "component", type: i16.HermesWizardPage, selector: "hermes-wizard-page", inputs: ["id", "hermesWizardPagePreventDefault", "hermesWizardPageNextDisabled", "hermesWizardPagePreviousDisabled", "hermesWizardPageHasError", "hermesWizardPagePreventDefaultCancel", "hermesWizardPagePreventDefaultNext"], outputs: ["hermesWizardPageNextDisabledChange", "hermesWizardPagePreviousDisabledChange", "hermesWizardPagePreventDefaultCancelChange", "hermesWizardPageOnCommit", "hermesWizardPageOnLoad", "hermesWizardPageOnCancel", "hermesWizardPageFinish", "hermesWizardPagePrevious", "hermesWizardPageNext", "hermesWizardPageDanger", "hermesWizardPagePrimary", "hermesWizardPageCustomButton"] }, { kind: "component", type: i16.HermesWizardButton, selector: "hermes-wizard-button", inputs: ["type", "hermesWizardButtonDisabled", "hermesWizardButtonHidden"], outputs: ["hermesWizardButtonClicked"] }, { kind: "directive", type: i16.HermesWizardTitle, selector: "hermes-wizard-title", inputs: ["hermesHeadingLevel"] }, { kind: "directive", type: i16.HermesWizardPageTitle, selector: "[hermesPageTitle]", inputs: ["hermesHeadingLevel"] }, { kind: "component", type: i17.HermesAccordion, selector: "hermes-accordion", inputs: ["hermesAccordionMultiPanel"] }, { kind: "component", type: i17.HermesAccordionPanel, selector: "hermes-accordion-panel", inputs: ["hermesAccordionPanelDisabled", "hermesAccordionPanelOpen", "hermesAccordionPanelHeadingLevel"], outputs: ["hermesAccordionPanelOpenChange"] }, { kind: "component", type: i17.HermesAccordionTitle, selector: "hermes-accordion-title" }, { kind: "component", type: i17.HermesAccordionContent, selector: "hermes-accordion-content" }, { kind: "directive", type: i17.AccordionOompaLoompa, selector: "hermes-accordion-panel" }, { kind: "directive", type: i17.AccordionWillyWonka, selector: "hermes-accordion" }, { kind: "component", type: i18.HermesStepper, selector: "form[hermesStepper]", inputs: ["hermesInitialStep"] }, { kind: "directive", type: i18.HermesStepButton, selector: "[hermesStepButton]", inputs: ["hermesStepButton"] }, { kind: "component", type: i18.HermesStepTitle, selector: "hermes-step-title" }, { kind: "component", type: i18.HermesStepDescription, selector: "hermes-step-description" }, { kind: "component", type: i18.HermesStepContent, selector: "hermes-step-content" }, { kind: "component", type: i18.HermesStepperPanel, selector: "hermes-stepper-panel" }, { kind: "directive", type: i18.StepperOompaLoompa, selector: "hermes-stepper-panel, [hermesStepButton]" }, { kind: "directive", type: i18.StepperWillyWonka, selector: "form[hermesStepper]" }, { kind: "component", type: i19.HermesProgressBar, selector: "hermes-progress-bar", inputs: ["hermesMax", "hermesDisplayval", "hermesColor", "hermesValue", "id", "hermesCompact", "hermesLabeled", "hermesFade", "hermesLoop", "hermesFlash", "hermesFlashDanger"] }, { kind: "component", type: i20.HermesTimeline, selector: "hermes-timeline", inputs: ["hermesLayout"] }, { kind: "component", type: i20.HermesTimelineStep, selector: "hermes-timeline-step", inputs: ["hermesState"] }, { kind: "component", type: i20.HermesTimelineStepDescription, selector: "hermes-timeline-step-description" }, { kind: "component", type: i20.HermesTimelineStepHeader, selector: "hermes-timeline-step-header" }, { kind: "component", type: i20.HermesTimelineStepTitle, selector: "hermes-timeline-step-title" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i21.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i22.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i22.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i22.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i22.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i22.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i22.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i22.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i22.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i22.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i21.UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ThemeBuilderComponent, decorators: [{
             type: Component,