ud-components 0.5.20 → 0.5.21
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.
|
@@ -3978,18 +3978,25 @@ class UdPreviewContainerComponent {
|
|
|
3978
3978
|
title = '';
|
|
3979
3979
|
icon;
|
|
3980
3980
|
padding = '24px';
|
|
3981
|
+
/** Whether the panel starts collapsed. */
|
|
3982
|
+
collapsed = false;
|
|
3983
|
+
toggle() {
|
|
3984
|
+
this.collapsed = !this.collapsed;
|
|
3985
|
+
}
|
|
3981
3986
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdPreviewContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdPreviewContainerComponent, isStandalone: true, selector: "ud-preview-container", inputs: { title: "title", icon: "icon", padding: "padding" }, ngImport: i0, template: "<div class=\"preview-container\">\n <
|
|
3987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdPreviewContainerComponent, isStandalone: true, selector: "ud-preview-container", inputs: { title: "title", icon: "icon", padding: "padding", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"preview-container\" [class.preview-container--collapsed]=\"collapsed\">\n <button class=\"section-title\" type=\"button\" (click)=\"toggle()\" [attr.aria-expanded]=\"!collapsed\">\n @if (icon) {\n <span class=\"material-icons\">{{ icon }}</span>\n }\n <span class=\"section-title__text\">{{ title }}</span>\n <span class=\"material-icons section-title__chevron\">expand_more</span>\n </button>\n @if (!collapsed) {\n <div class=\"section-content\" [style.padding]=\"padding\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{width:100%;padding:14px 20px;background:#f6f8fa;border:none;border-bottom:1px solid #e1e4e8;font-family:inherit;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;transition:background .15s}.preview-container .section-title:hover{background:#eef1f5}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}.preview-container .section-title .section-title__text{flex:1}.preview-container .section-title .section-title__chevron{transition:transform .2s ease}.preview-container--collapsed .section-title{border-bottom:none}.preview-container--collapsed .section-title__chevron{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3983
3988
|
}
|
|
3984
3989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdPreviewContainerComponent, decorators: [{
|
|
3985
3990
|
type: Component,
|
|
3986
|
-
args: [{ selector: 'ud-preview-container', standalone: true, imports: [CommonModule], template: "<div class=\"preview-container\">\n <
|
|
3991
|
+
args: [{ selector: 'ud-preview-container', standalone: true, imports: [CommonModule], template: "<div class=\"preview-container\" [class.preview-container--collapsed]=\"collapsed\">\n <button class=\"section-title\" type=\"button\" (click)=\"toggle()\" [attr.aria-expanded]=\"!collapsed\">\n @if (icon) {\n <span class=\"material-icons\">{{ icon }}</span>\n }\n <span class=\"section-title__text\">{{ title }}</span>\n <span class=\"material-icons section-title__chevron\">expand_more</span>\n </button>\n @if (!collapsed) {\n <div class=\"section-content\" [style.padding]=\"padding\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{width:100%;padding:14px 20px;background:#f6f8fa;border:none;border-bottom:1px solid #e1e4e8;font-family:inherit;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;transition:background .15s}.preview-container .section-title:hover{background:#eef1f5}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}.preview-container .section-title .section-title__text{flex:1}.preview-container .section-title .section-title__chevron{transition:transform .2s ease}.preview-container--collapsed .section-title{border-bottom:none}.preview-container--collapsed .section-title__chevron{transform:rotate(-90deg)}\n"] }]
|
|
3987
3992
|
}], propDecorators: { title: [{
|
|
3988
3993
|
type: Input
|
|
3989
3994
|
}], icon: [{
|
|
3990
3995
|
type: Input
|
|
3991
3996
|
}], padding: [{
|
|
3992
3997
|
type: Input
|
|
3998
|
+
}], collapsed: [{
|
|
3999
|
+
type: Input
|
|
3993
4000
|
}] } });
|
|
3994
4001
|
|
|
3995
4002
|
class ToggleOptionComponent {
|