@siemens/element-ng 49.2.0 → 49.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/siemens-element-ng-accordion.mjs +2 -2
- package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-application-header.mjs +3 -3
- package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-content-action-bar.mjs +2 -2
- package/fesm2022/siemens-element-ng-content-action-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +22 -24
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +2 -2
- package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs +21 -25
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-menu.mjs +6 -6
- package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +8 -4
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-number-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-photo-upload.mjs +1 -1
- package/fesm2022/siemens-element-ng-photo-upload.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-search-bar.mjs +7 -2
- package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs +164 -10
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +11 -3
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-typeahead.mjs.map +1 -1
- package/package.json +3 -3
- package/schematics/vitest-setup.js +5 -0
- package/types/siemens-element-ng-application-header.d.ts +1 -1
- package/types/siemens-element-ng-auto-collapsable-list.d.ts +1 -1
- package/types/siemens-element-ng-avatar.d.ts +1 -1
- package/types/siemens-element-ng-circle-status.d.ts +1 -1
- package/types/siemens-element-ng-dashboard.d.ts +2 -2
- package/types/siemens-element-ng-date-range-filter.d.ts +1 -1
- package/types/siemens-element-ng-datepicker.d.ts +7 -7
- package/types/siemens-element-ng-file-uploader.d.ts +1 -1
- package/types/siemens-element-ng-filtered-search.d.ts +1 -1
- package/types/siemens-element-ng-form.d.ts +1 -1
- package/types/siemens-element-ng-list-details.d.ts +1 -1
- package/types/siemens-element-ng-main-detail-container.d.ts +10 -11
- package/types/siemens-element-ng-navbar-vertical.d.ts +7 -3
- package/types/siemens-element-ng-navbar.d.ts +1 -1
- package/types/siemens-element-ng-number-input.d.ts +1 -1
- package/types/siemens-element-ng-phone-number.d.ts +1 -1
- package/types/siemens-element-ng-photo-upload.d.ts +1 -1
- package/types/siemens-element-ng-search-bar.d.ts +1 -1
- package/types/siemens-element-ng-side-panel.d.ts +115 -5
- package/types/siemens-element-ng-split.d.ts +2 -2
- package/types/siemens-element-ng-status-bar.d.ts +1 -1
- package/types/siemens-element-ng-status-toggle.d.ts +1 -1
- package/types/siemens-element-ng-tree-view.d.ts +1 -1
- package/types/siemens-element-ng-typeahead.d.ts +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, inject, PLATFORM_ID, Injectable, input, booleanAttribute, model, output, computed, viewChild, ElementRef, ChangeDetectorRef, DestroyRef, DOCUMENT as DOCUMENT$1, effect, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { signal, inject, PLATFORM_ID, Injectable, input, booleanAttribute, model, output, computed, viewChild, ElementRef, ChangeDetectorRef, DestroyRef, DOCUMENT as DOCUMENT$1, effect, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
4
4
|
import { BehaviorSubject, Subject, EMPTY, timer } from 'rxjs';
|
|
5
5
|
import * as i1 from '@angular/cdk/portal';
|
|
6
6
|
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
@@ -513,6 +513,26 @@ class SiSidePanelContentComponent {
|
|
|
513
513
|
/**
|
|
514
514
|
* Status icons/actions
|
|
515
515
|
*
|
|
516
|
+
* @deprecated Use the {@link SiSidePanelActionsComponent} instead:
|
|
517
|
+
*
|
|
518
|
+
* ```html
|
|
519
|
+
* <si-side-panel-content>
|
|
520
|
+
* <si-side-panel-actions>
|
|
521
|
+
* <button
|
|
522
|
+
* type="button"
|
|
523
|
+
* si-side-panel-action
|
|
524
|
+
* icon="element-alarm-background-filled"
|
|
525
|
+
* iconColor="status-danger"
|
|
526
|
+
* stackedIcon="element-alarm-tick"
|
|
527
|
+
* stackedIconColor="text-body"
|
|
528
|
+
* (click)="action()"
|
|
529
|
+
* >
|
|
530
|
+
* Action
|
|
531
|
+
* </button>
|
|
532
|
+
* </si-side-panel-actions>
|
|
533
|
+
* </si-side-panel-content>
|
|
534
|
+
* ```
|
|
535
|
+
*
|
|
516
536
|
* @defaultValue []
|
|
517
537
|
*/
|
|
518
538
|
statusActions = input([], ...(ngDevMode ? [{ debugName: "statusActions" }] : []));
|
|
@@ -676,40 +696,174 @@ class SiSidePanelContentComponent {
|
|
|
676
696
|
}
|
|
677
697
|
}
|
|
678
698
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
679
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelContentComponent, isStandalone: true, selector: "si-side-panel-content", inputs: { collapsibleInput: { classPropertyName: "collapsibleInput", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, statusActions: { classPropertyName: "statusActions", publicName: "statusActions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, enterFullscreenLabel: { classPropertyName: "enterFullscreenLabel", publicName: "enterFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, exitFullscreenLabel: { classPropertyName: "exitFullscreenLabel", publicName: "exitFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, showMobileDrawerBadge: { classPropertyName: "showMobileDrawerBadge", publicName: "showMobileDrawerBadge", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, navigateConfig: { classPropertyName: "navigateConfig", publicName: "navigateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent" }, host: { properties: { "class.collapsed": "isCollapsed()", "class.expanded": "isExpanded()", "class.enable-mobile": "enableMobile()", "class.rpanel-fullscreen-overlay": "isFullscreen()" } }, providers: [SiAccordionHCollapseService], ngImport: i0, template: "<div class=\"rpanel-header pt-5\">\n <p class=\"si-h5 my-0 ms-6 auto-hide text-truncate\">{{ heading() | translate }}</p>\n @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n <si-content-action-bar\n class=\"auto-hide ms-auto\"\n viewType=\"expanded\"\n [primaryActions]=\"primaryActions()\"\n [secondaryActions]=\"secondaryActions()\"\n [toggleItemLabel]=\"toggleItemLabel()\"\n />\n }\n <div class=\"d-flex\">\n @let navigateConfig = this.navigateConfig();\n @if (displayMode() === 'navigate' && navigateConfig) {\n @if (navigateConfig.type === 'router-link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [routerLink]=\"navigateConfig.routerLink\"\n [queryParams]=\"navigateConfig.extras?.queryParams\"\n [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n [fragment]=\"navigateConfig.extras?.fragment\"\n [state]=\"navigateConfig.extras?.state\"\n [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n } @else if (navigateConfig.type === 'link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible()\"\n [href]=\"navigateConfig.href\"\n [target]=\"navigateConfig.target\"\n [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n }\n }\n @if (displayMode() === 'overlay') {\n <button\n type=\"button\"\n class=\"fullscreen-button btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [attr.aria-label]=\"\n (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n \"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleFullscreen()\"\n >\n <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"close-button btn btn-icon btn-ghost me-4\"\n [attr.aria-label]=\"closeButtonLabel() | translate\"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n <div class=\"collapse-toggle\">\n <button\n type=\"button\"\n class=\"side-panel-collapse-toggle btn btn-icon btn-ghost mx-4\"\n [attr.aria-label]=\"toggleItemLabel() | translate\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon\n class=\"flip-rtl\"\n [class.badge-dot]=\"showMobileDrawerBadge()\"\n [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n />\n </button>\n </div>\n </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n @if (statusActions().length && focusable()) {\n <div class=\"rpanel-header rpanel-statusactions px-6\">\n @for (dp of statusActions(); track $index) {\n @if (!dp.disabled) {\n <a\n class=\"rpanel-statusaction position-relative focus-inside\"\n placement=\"start\"\n [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n [siTooltip]=\"(dp.title | translate) || ''\"\n [isDisabled]=\"!isCollapsed()\"\n [siLink]=\"dp\"\n >\n <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n @if (dp.overlayIcon) {\n <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n }\n <span class=\"ms-2 auto-hide\">{{ dp.title | translate }}</span>\n </a>\n } @else {\n <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n <div class=\"dot text-muted text-center\">•</div>\n </div>\n }\n }\n </div>\n }\n @if (searchable() && focusable()) {\n <div class=\"nav-search px-6 auto-hide\">\n <si-search-bar\n #searchBar\n class=\"m-0\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"searchPlaceholder() | translate\"\n [debounceTime]=\"400\"\n [showIcon]=\"true\"\n (searchChange)=\"searchEvent.emit($event)\"\n />\n </div>\n }\n @if (focusable()) {\n <div class=\"rpanel-content\">\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:32px;block-size:32px;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:40px;block-size:40px;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:24px;block-size:24px;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:32px;block-size:32px;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}:host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:12px}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:8px}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:8px;padding-inline:12px}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--element-base-1-hover)}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.rpanel-wrapper{padding-block-start:12px}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{font-size:12px;white-space:pre-wrap;color:var(--element-text-primary)}.rpanel-statusaction:hover span{color:var(--element-text-active)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:40px}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2);z-index:2}}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelContentComponent, isStandalone: true, selector: "si-side-panel-content", inputs: { collapsibleInput: { classPropertyName: "collapsibleInput", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, statusActions: { classPropertyName: "statusActions", publicName: "statusActions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, enterFullscreenLabel: { classPropertyName: "enterFullscreenLabel", publicName: "enterFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, exitFullscreenLabel: { classPropertyName: "exitFullscreenLabel", publicName: "exitFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, showMobileDrawerBadge: { classPropertyName: "showMobileDrawerBadge", publicName: "showMobileDrawerBadge", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, navigateConfig: { classPropertyName: "navigateConfig", publicName: "navigateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent" }, host: { properties: { "class.collapsed": "isCollapsed()", "class.expanded": "isExpanded()", "class.enable-mobile": "enableMobile()", "class.rpanel-fullscreen-overlay": "isFullscreen()" } }, providers: [SiAccordionHCollapseService], ngImport: i0, template: "<div class=\"rpanel-header pt-5\">\n <p class=\"si-h5 my-0 ms-6 auto-hide text-truncate\">{{ heading() | translate }}</p>\n @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n <si-content-action-bar\n class=\"auto-hide ms-auto\"\n viewType=\"expanded\"\n [primaryActions]=\"primaryActions()\"\n [secondaryActions]=\"secondaryActions()\"\n [toggleItemLabel]=\"toggleItemLabel()\"\n />\n }\n <div class=\"d-flex\">\n @let navigateConfig = this.navigateConfig();\n @if (displayMode() === 'navigate' && navigateConfig) {\n @if (navigateConfig.type === 'router-link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [routerLink]=\"navigateConfig.routerLink\"\n [queryParams]=\"navigateConfig.extras?.queryParams\"\n [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n [fragment]=\"navigateConfig.extras?.fragment\"\n [state]=\"navigateConfig.extras?.state\"\n [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n } @else if (navigateConfig.type === 'link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible()\"\n [href]=\"navigateConfig.href\"\n [target]=\"navigateConfig.target\"\n [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n }\n }\n @if (displayMode() === 'overlay') {\n <button\n type=\"button\"\n class=\"fullscreen-button btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [attr.aria-label]=\"\n (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n \"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleFullscreen()\"\n >\n <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"close-button btn btn-icon btn-ghost me-4\"\n [attr.aria-label]=\"closeButtonLabel() | translate\"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n <div class=\"collapse-toggle\">\n <button\n type=\"button\"\n class=\"side-panel-collapse-toggle btn btn-icon btn-ghost mx-4\"\n [attr.aria-label]=\"toggleItemLabel() | translate\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon\n class=\"flip-rtl\"\n [class.badge-dot]=\"showMobileDrawerBadge()\"\n [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n />\n </button>\n </div>\n </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n @if (statusActions().length && focusable()) {\n <div class=\"rpanel-header rpanel-statusactions px-6\">\n @for (dp of statusActions(); track $index) {\n @if (!dp.disabled) {\n <a\n class=\"rpanel-statusaction position-relative focus-inside\"\n placement=\"start\"\n [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n [siTooltip]=\"(dp.title | translate) || ''\"\n [isDisabled]=\"!isCollapsed()\"\n [siLink]=\"dp\"\n >\n <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n @if (dp.overlayIcon) {\n <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n }\n <span class=\"ms-2 auto-hide si-caption\">{{ dp.title | translate }}</span>\n </a>\n } @else {\n <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n <div class=\"dot text-muted text-center\">•</div>\n </div>\n }\n }\n </div>\n }\n <ng-content select=\"si-side-panel-actions\" />\n @if (searchable() && focusable()) {\n <div class=\"nav-search px-6 auto-hide\">\n <si-search-bar\n #searchBar\n class=\"m-0\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"searchPlaceholder() | translate\"\n [debounceTime]=\"400\"\n [showIcon]=\"true\"\n (searchChange)=\"searchEvent.emit($event)\"\n />\n </div>\n }\n @if (focusable()) {\n <div class=\"rpanel-content\">\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:32px;block-size:32px;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:40px;block-size:40px;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:24px;block-size:24px;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:32px;block-size:32px;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}:host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:12px}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:8px}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:8px;padding-inline:12px}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--element-base-1-hover)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction .icon{padding:2px}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.rpanel-wrapper{padding-block-start:12px}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{white-space:pre-wrap;color:var(--element-text-primary)}.rpanel-statusaction:hover span{color:var(--element-text-active)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:40px}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2);z-index:2}}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
680
700
|
}
|
|
681
701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelContentComponent, decorators: [{
|
|
682
702
|
type: Component,
|
|
683
703
|
args: [{ selector: 'si-side-panel-content', imports: [
|
|
684
704
|
SiContentActionBarComponent,
|
|
685
705
|
SiIconComponent,
|
|
686
|
-
SiLinkDirective,
|
|
687
706
|
RouterLink,
|
|
688
707
|
SiSearchBarComponent,
|
|
689
708
|
SiTranslatePipe,
|
|
690
|
-
SiTooltipDirective
|
|
709
|
+
SiTooltipDirective,
|
|
710
|
+
SiLinkDirective
|
|
691
711
|
], providers: [SiAccordionHCollapseService], host: {
|
|
692
712
|
'[class.collapsed]': 'isCollapsed()',
|
|
693
713
|
'[class.expanded]': 'isExpanded()',
|
|
694
714
|
'[class.enable-mobile]': 'enableMobile()',
|
|
695
715
|
'[class.rpanel-fullscreen-overlay]': 'isFullscreen()'
|
|
696
|
-
}, template: "<div class=\"rpanel-header pt-5\">\n <p class=\"si-h5 my-0 ms-6 auto-hide text-truncate\">{{ heading() | translate }}</p>\n @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n <si-content-action-bar\n class=\"auto-hide ms-auto\"\n viewType=\"expanded\"\n [primaryActions]=\"primaryActions()\"\n [secondaryActions]=\"secondaryActions()\"\n [toggleItemLabel]=\"toggleItemLabel()\"\n />\n }\n <div class=\"d-flex\">\n @let navigateConfig = this.navigateConfig();\n @if (displayMode() === 'navigate' && navigateConfig) {\n @if (navigateConfig.type === 'router-link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [routerLink]=\"navigateConfig.routerLink\"\n [queryParams]=\"navigateConfig.extras?.queryParams\"\n [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n [fragment]=\"navigateConfig.extras?.fragment\"\n [state]=\"navigateConfig.extras?.state\"\n [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n } @else if (navigateConfig.type === 'link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible()\"\n [href]=\"navigateConfig.href\"\n [target]=\"navigateConfig.target\"\n [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n }\n }\n @if (displayMode() === 'overlay') {\n <button\n type=\"button\"\n class=\"fullscreen-button btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [attr.aria-label]=\"\n (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n \"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleFullscreen()\"\n >\n <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"close-button btn btn-icon btn-ghost me-4\"\n [attr.aria-label]=\"closeButtonLabel() | translate\"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n <div class=\"collapse-toggle\">\n <button\n type=\"button\"\n class=\"side-panel-collapse-toggle btn btn-icon btn-ghost mx-4\"\n [attr.aria-label]=\"toggleItemLabel() | translate\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon\n class=\"flip-rtl\"\n [class.badge-dot]=\"showMobileDrawerBadge()\"\n [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n />\n </button>\n </div>\n </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n @if (statusActions().length && focusable()) {\n <div class=\"rpanel-header rpanel-statusactions px-6\">\n @for (dp of statusActions(); track $index) {\n @if (!dp.disabled) {\n <a\n class=\"rpanel-statusaction position-relative focus-inside\"\n placement=\"start\"\n [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n [siTooltip]=\"(dp.title | translate) || ''\"\n [isDisabled]=\"!isCollapsed()\"\n [siLink]=\"dp\"\n >\n <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n @if (dp.overlayIcon) {\n <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n }\n <span class=\"ms-2 auto-hide\">{{ dp.title | translate }}</span>\n </a>\n } @else {\n <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n <div class=\"dot text-muted text-center\">•</div>\n </div>\n }\n }\n </div>\n }\n @if (searchable() && focusable()) {\n <div class=\"nav-search px-6 auto-hide\">\n <si-search-bar\n #searchBar\n class=\"m-0\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"searchPlaceholder() | translate\"\n [debounceTime]=\"400\"\n [showIcon]=\"true\"\n (searchChange)=\"searchEvent.emit($event)\"\n />\n </div>\n }\n @if (focusable()) {\n <div class=\"rpanel-content\">\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:32px;block-size:32px;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:40px;block-size:40px;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:24px;block-size:24px;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:32px;block-size:32px;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}:host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:12px}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:8px}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:8px;padding-inline:12px}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--element-base-1-hover)}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.rpanel-wrapper{padding-block-start:12px}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{font-size:12px;white-space:pre-wrap;color:var(--element-text-primary)}.rpanel-statusaction:hover span{color:var(--element-text-active)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:40px}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2);z-index:2}}\n"] }]
|
|
716
|
+
}, template: "<div class=\"rpanel-header pt-5\">\n <p class=\"si-h5 my-0 ms-6 auto-hide text-truncate\">{{ heading() | translate }}</p>\n @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n <si-content-action-bar\n class=\"auto-hide ms-auto\"\n viewType=\"expanded\"\n [primaryActions]=\"primaryActions()\"\n [secondaryActions]=\"secondaryActions()\"\n [toggleItemLabel]=\"toggleItemLabel()\"\n />\n }\n <div class=\"d-flex\">\n @let navigateConfig = this.navigateConfig();\n @if (displayMode() === 'navigate' && navigateConfig) {\n @if (navigateConfig.type === 'router-link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [routerLink]=\"navigateConfig.routerLink\"\n [queryParams]=\"navigateConfig.extras?.queryParams\"\n [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n [fragment]=\"navigateConfig.extras?.fragment\"\n [state]=\"navigateConfig.extras?.state\"\n [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n } @else if (navigateConfig.type === 'link') {\n <a\n class=\"btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible()\"\n [href]=\"navigateConfig.href\"\n [target]=\"navigateConfig.target\"\n [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-label]=\"navigateConfig.label | translate\"\n >\n <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n <span class=\"visually-hidden\">\n {{ navigateConfig.label | translate }}\n </span></a\n >\n }\n }\n @if (displayMode() === 'overlay') {\n <button\n type=\"button\"\n class=\"fullscreen-button btn btn-icon btn-ghost auto-hide\"\n [class.ms-4]=\"collapsible()\"\n [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n [attr.aria-label]=\"\n (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n \"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleFullscreen()\"\n >\n <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"close-button btn btn-icon btn-ghost me-4\"\n [attr.aria-label]=\"closeButtonLabel() | translate\"\n [tabindex]=\"focusable() ? '0' : '-1'\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n <div class=\"collapse-toggle\">\n <button\n type=\"button\"\n class=\"side-panel-collapse-toggle btn btn-icon btn-ghost mx-4\"\n [attr.aria-label]=\"toggleItemLabel() | translate\"\n (click)=\"toggleSidePanel($event)\"\n >\n <si-icon\n class=\"flip-rtl\"\n [class.badge-dot]=\"showMobileDrawerBadge()\"\n [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n />\n </button>\n </div>\n </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n @if (statusActions().length && focusable()) {\n <div class=\"rpanel-header rpanel-statusactions px-6\">\n @for (dp of statusActions(); track $index) {\n @if (!dp.disabled) {\n <a\n class=\"rpanel-statusaction position-relative focus-inside\"\n placement=\"start\"\n [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n [siTooltip]=\"(dp.title | translate) || ''\"\n [isDisabled]=\"!isCollapsed()\"\n [siLink]=\"dp\"\n >\n <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n @if (dp.overlayIcon) {\n <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n }\n <span class=\"ms-2 auto-hide si-caption\">{{ dp.title | translate }}</span>\n </a>\n } @else {\n <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n <div class=\"dot text-muted text-center\">•</div>\n </div>\n }\n }\n </div>\n }\n <ng-content select=\"si-side-panel-actions\" />\n @if (searchable() && focusable()) {\n <div class=\"nav-search px-6 auto-hide\">\n <si-search-bar\n #searchBar\n class=\"m-0\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"searchPlaceholder() | translate\"\n [debounceTime]=\"400\"\n [showIcon]=\"true\"\n (searchChange)=\"searchEvent.emit($event)\"\n />\n </div>\n }\n @if (focusable()) {\n <div class=\"rpanel-content\">\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:32px;block-size:32px;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:40px;block-size:40px;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:24px;block-size:24px;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:32px;block-size:32px;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}:host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:12px}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:8px}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:8px;padding-inline:12px}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--element-base-1-hover)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction .icon{padding:2px}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.rpanel-wrapper{padding-block-start:12px}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{white-space:pre-wrap;color:var(--element-text-primary)}.rpanel-statusaction:hover span{color:var(--element-text-active)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:40px}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2);z-index:2}}\n"] }]
|
|
697
717
|
}], ctorParameters: () => [], propDecorators: { collapsibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], statusActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusActions", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], enterFullscreenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterFullscreenLabel", required: false }] }], exitFullscreenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exitFullscreenLabel", required: false }] }], showMobileDrawerBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMobileDrawerBadge", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], navigateConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateConfig", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }] } });
|
|
698
718
|
|
|
719
|
+
/**
|
|
720
|
+
* Copyright (c) Siemens 2016 - 2026
|
|
721
|
+
* SPDX-License-Identifier: MIT
|
|
722
|
+
*/
|
|
723
|
+
/**
|
|
724
|
+
* Creates an action for the side-panel.
|
|
725
|
+
* This action will remain visible if the side-panel is collapsed.
|
|
726
|
+
*
|
|
727
|
+
* @example
|
|
728
|
+
* ```html
|
|
729
|
+
* <si-side-panel-content>
|
|
730
|
+
* <si-side-panel-actions>
|
|
731
|
+
* <button
|
|
732
|
+
* type="button"
|
|
733
|
+
* si-side-panel-action
|
|
734
|
+
* icon="element-alarm-background-filled"
|
|
735
|
+
* iconColor="status-danger"
|
|
736
|
+
* stackedIcon="element-alarm-tick"
|
|
737
|
+
* stackedIconColor="text-body"
|
|
738
|
+
* (click)="action()"
|
|
739
|
+
* >
|
|
740
|
+
* Action
|
|
741
|
+
* </button>
|
|
742
|
+
* </si-side-panel-actions>
|
|
743
|
+
* </si-side-panel-content>
|
|
744
|
+
* ```
|
|
745
|
+
*/
|
|
746
|
+
class SiSidePanelActionComponent {
|
|
747
|
+
/** Icon name for the main icon. */
|
|
748
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
749
|
+
/** CSS color class for the main icon (e.g. `'status-warning'`). */
|
|
750
|
+
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
|
|
751
|
+
/** Optional stacked icon name displayed on top of the main icon. */
|
|
752
|
+
stackedIcon = input(...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : []));
|
|
753
|
+
/** CSS color class for the stacked icon (e.g. `'text-body'`). */
|
|
754
|
+
stackedIconColor = input(...(ngDevMode ? [undefined, { debugName: "stackedIconColor" }] : []));
|
|
755
|
+
/**
|
|
756
|
+
* When disabled, renders a dot separator instead of the icon and label.
|
|
757
|
+
*
|
|
758
|
+
* @defaultValue false
|
|
759
|
+
*/
|
|
760
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
761
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
762
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelActionComponent, isStandalone: true, selector: "button[si-side-panel-action], a[si-side-panel-action]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedIconColor: { classPropertyName: "stackedIconColor", publicName: "stackedIconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "focus-inside" }, ngImport: i0, template: `
|
|
763
|
+
@if (disabled()) {
|
|
764
|
+
<div class="icon dot text-muted text-center">•</div>
|
|
765
|
+
} @else {
|
|
766
|
+
<span class="icon icon-stack">
|
|
767
|
+
<si-icon [class]="iconColor()" [icon]="icon()" />
|
|
768
|
+
@if (stackedIcon(); as stackedIcon) {
|
|
769
|
+
<si-icon [class]="stackedIconColor()" [icon]="stackedIcon" />
|
|
770
|
+
}
|
|
771
|
+
</span>
|
|
772
|
+
<span class="ms-2 auto-hide si-caption text-start">
|
|
773
|
+
<ng-content />
|
|
774
|
+
</span>
|
|
775
|
+
}
|
|
776
|
+
`, isInline: true, styles: [":host{display:flex;align-items:center;text-decoration:none;border:0;background:transparent;padding:0}:host .dot{inline-size:1.25rem;line-height:1.25rem}:host span{color:var(--element-text-primary)}:host:hover span{color:var(--element-text-active)}:host-context(.collapsible .collapsed){padding-block:8px;padding-inline:12px}:host-context(.collapsible .collapsed):not(:disabled):hover{background:var(--element-base-1-hover)}:host-context(.collapsible .collapsed) .dot,:host-context(.collapsible .collapsed) .icon{margin:2px}:host-context(si-side-panel-content.collapsed) .auto-hide{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
777
|
+
}
|
|
778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionComponent, decorators: [{
|
|
779
|
+
type: Component,
|
|
780
|
+
args: [{ selector: 'button[si-side-panel-action], a[si-side-panel-action]', imports: [SiIconComponent], template: `
|
|
781
|
+
@if (disabled()) {
|
|
782
|
+
<div class="icon dot text-muted text-center">•</div>
|
|
783
|
+
} @else {
|
|
784
|
+
<span class="icon icon-stack">
|
|
785
|
+
<si-icon [class]="iconColor()" [icon]="icon()" />
|
|
786
|
+
@if (stackedIcon(); as stackedIcon) {
|
|
787
|
+
<si-icon [class]="stackedIconColor()" [icon]="stackedIcon" />
|
|
788
|
+
}
|
|
789
|
+
</span>
|
|
790
|
+
<span class="ms-2 auto-hide si-caption text-start">
|
|
791
|
+
<ng-content />
|
|
792
|
+
</span>
|
|
793
|
+
}
|
|
794
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
795
|
+
class: 'focus-inside'
|
|
796
|
+
}, styles: [":host{display:flex;align-items:center;text-decoration:none;border:0;background:transparent;padding:0}:host .dot{inline-size:1.25rem;line-height:1.25rem}:host span{color:var(--element-text-primary)}:host:hover span{color:var(--element-text-active)}:host-context(.collapsible .collapsed){padding-block:8px;padding-inline:12px}:host-context(.collapsible .collapsed):not(:disabled):hover{background:var(--element-base-1-hover)}:host-context(.collapsible .collapsed) .dot,:host-context(.collapsible .collapsed) .icon{margin:2px}:host-context(si-side-panel-content.collapsed) .auto-hide{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
|
|
797
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], stackedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIcon", required: false }] }], stackedIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIconColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
798
|
+
|
|
799
|
+
/**
|
|
800
|
+
* Copyright (c) Siemens 2016 - 2026
|
|
801
|
+
* SPDX-License-Identifier: MIT
|
|
802
|
+
*/
|
|
803
|
+
/**
|
|
804
|
+
* Creates an actions container for the side-panel.
|
|
805
|
+
* This action will remain visible if the side-panel is collapsed.
|
|
806
|
+
*
|
|
807
|
+
* @example
|
|
808
|
+
* ```html
|
|
809
|
+
* <si-side-panel-content>
|
|
810
|
+
* <si-side-panel-actions>
|
|
811
|
+
* <button
|
|
812
|
+
* type="button"
|
|
813
|
+
* si-side-panel-action
|
|
814
|
+
* icon="element-alarm-background-filled"
|
|
815
|
+
* iconColor="status-danger"
|
|
816
|
+
* stackedIcon="element-alarm-tick"
|
|
817
|
+
* stackedIconColor="text-body"
|
|
818
|
+
* (click)="action()"
|
|
819
|
+
* >
|
|
820
|
+
* Action
|
|
821
|
+
* </button>
|
|
822
|
+
* </si-side-panel-actions>
|
|
823
|
+
* </si-side-panel-content>
|
|
824
|
+
* ```
|
|
825
|
+
*/
|
|
826
|
+
class SiSidePanelActionsComponent {
|
|
827
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiSidePanelActionsComponent, isStandalone: true, selector: "si-side-panel-actions", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;padding-inline:16px}:host-context(.collapsible .collapsed){order:3;flex-direction:column;align-items:flex-start;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
829
|
+
}
|
|
830
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionsComponent, decorators: [{
|
|
831
|
+
type: Component,
|
|
832
|
+
args: [{ selector: 'si-side-panel-actions', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;justify-content:space-between;padding-inline:16px}:host-context(.collapsible .collapsed){order:3;flex-direction:column;align-items:flex-start;padding:0}\n"] }]
|
|
833
|
+
}] });
|
|
834
|
+
|
|
699
835
|
/**
|
|
700
836
|
* Copyright (c) Siemens 2016 - 2026
|
|
701
837
|
* SPDX-License-Identifier: MIT
|
|
702
838
|
*/
|
|
703
839
|
class SiSidePanelModule {
|
|
704
840
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
705
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
|
|
706
|
-
|
|
841
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
|
|
842
|
+
SiSidePanelContentComponent,
|
|
843
|
+
SiSidePanelActionsComponent,
|
|
844
|
+
SiSidePanelActionComponent], exports: [SiSidePanelComponent,
|
|
845
|
+
SiSidePanelContentComponent,
|
|
846
|
+
SiSidePanelActionsComponent,
|
|
847
|
+
SiSidePanelActionComponent] });
|
|
848
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
|
|
849
|
+
SiSidePanelContentComponent,
|
|
850
|
+
SiSidePanelActionComponent] });
|
|
707
851
|
}
|
|
708
852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, decorators: [{
|
|
709
853
|
type: NgModule,
|
|
710
854
|
args: [{
|
|
711
|
-
imports: [
|
|
712
|
-
|
|
855
|
+
imports: [
|
|
856
|
+
SiSidePanelComponent,
|
|
857
|
+
SiSidePanelContentComponent,
|
|
858
|
+
SiSidePanelActionsComponent,
|
|
859
|
+
SiSidePanelActionComponent
|
|
860
|
+
],
|
|
861
|
+
exports: [
|
|
862
|
+
SiSidePanelComponent,
|
|
863
|
+
SiSidePanelContentComponent,
|
|
864
|
+
SiSidePanelActionsComponent,
|
|
865
|
+
SiSidePanelActionComponent
|
|
866
|
+
]
|
|
713
867
|
}]
|
|
714
868
|
}] });
|
|
715
869
|
|
|
@@ -727,5 +881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
727
881
|
* Generated bundle index. Do not edit.
|
|
728
882
|
*/
|
|
729
883
|
|
|
730
|
-
export { SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
|
|
884
|
+
export { SiSidePanelActionComponent, SiSidePanelActionsComponent, SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
|
|
731
885
|
//# sourceMappingURL=siemens-element-ng-side-panel.mjs.map
|