@smartbit4all/ng-client 4.5.6 → 4.5.8
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/esm2022/lib/smart-component-layout/smart-component-layout-utility.mjs +6 -1
- package/esm2022/lib/smart-component-layout/smart-component-layout.component.mjs +5 -4
- package/esm2022/lib/smart-expandable-section/expandable-section.component.mjs +11 -6
- package/esm2022/lib/smart-expandable-section/expandable-section.model.mjs +1 -1
- package/esm2022/lib/smart-expandable-section/smart-expandable-section.module.mjs +7 -3
- package/esm2022/lib/smart-form/smartform.component.mjs +2 -2
- package/esm2022/lib/smart-form/widgets/components/smart-voice-recorder/smart-voice-recorder.component.mjs +1 -4
- package/esm2022/lib/view-context/smart-ui-action/components/upload-widget/voice-record-widget/voice-record-widget.component.mjs +7 -4
- package/fesm2022/smartbit4all-ng-client.mjs +26 -14
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/smart-component-layout/smart-component-layout.component.d.ts +2 -1
- package/lib/smart-expandable-section/expandable-section.component.d.ts +3 -1
- package/lib/smart-expandable-section/expandable-section.model.d.ts +1 -0
- package/lib/smart-expandable-section/smart-expandable-section.module.d.ts +2 -1
- package/lib/view-context/smart-ui-action/components/upload-widget/voice-record-widget/voice-record-widget.component.d.ts +1 -0
- package/package.json +1 -1
- package/smartbit4all-ng-client-4.5.8.tgz +0 -0
- package/smartbit4all-ng-client-4.5.6.tgz +0 -0
|
@@ -7427,12 +7427,15 @@ class VoiceRecordWidgetComponent {
|
|
|
7427
7427
|
return;
|
|
7428
7428
|
}
|
|
7429
7429
|
await new Promise((resolve) => requestAnimationFrame(() => resolve()));
|
|
7430
|
+
this.waveformRef.nativeElement.style.padding = '0.1rem';
|
|
7431
|
+
this.initWaveSurfer();
|
|
7432
|
+
}
|
|
7433
|
+
initWaveSurfer() {
|
|
7430
7434
|
let body = document.querySelector('body');
|
|
7431
7435
|
let primaryColor = getComputedStyle(body).getPropertyValue('--primary-color').trim();
|
|
7432
7436
|
let el = this.mainButton.nativeElement.querySelector('.sb4-primary');
|
|
7433
7437
|
let remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
7434
7438
|
let height = (el?.getBoundingClientRect().height ?? 0) - remInPx * 0.1;
|
|
7435
|
-
this.waveformRef.nativeElement.style.padding = '0.1rem';
|
|
7436
7439
|
this.wavesurfer = WaveSurfer.create({
|
|
7437
7440
|
container: this.waveformRef.nativeElement,
|
|
7438
7441
|
waveColor: primaryColor,
|
|
@@ -7578,11 +7581,11 @@ class VoiceRecordWidgetComponent {
|
|
|
7578
7581
|
});
|
|
7579
7582
|
}
|
|
7580
7583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: VoiceRecordWidgetComponent, deps: [{ token: COMPONENT_LIBRARY, optional: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: { openDirection: "openDirection" }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\r\n class=\"recorderContainer\"\r\n [class.direction-left]=\"isLeftDirection\"\r\n [class.direction-right]=\"!isLeftDirection\"\r\n [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\r\n [class.isRecording]=\"isRecording\"\r\n [class.hasRecording]=\"recordedBlob\"\r\n>\r\n <div class=\"recorderMain\">\r\n <div class=\"recorderToolbar\">\r\n <!-- Start Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"!isRecording\"\r\n [descriptor]=\"micButton\"\r\n (actionClick)=\"startRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Stop Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"isRecording\"\r\n [descriptor]=\"stopButton\"\r\n (actionClick)=\"stopRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Save Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob\"\r\n [descriptor]=\"saveButton\"\r\n (actionClick)=\"saveRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Start Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && !isPlaying\"\r\n [descriptor]=\"playButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n <!-- Stop Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && isPlaying\"\r\n [descriptor]=\"stopPlaybackButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n @if (isRecording) {\r\n <div class=\"progress\">{{ time }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\r\n <div class=\"waveformGrid\"></div>\r\n <div class=\"waveform\" #waveform></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{background:#fff;display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:max-width,opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: { openDirection: "openDirection" }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\r\n class=\"recorderContainer\"\r\n [class.direction-left]=\"isLeftDirection\"\r\n [class.direction-right]=\"!isLeftDirection\"\r\n [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\r\n [class.isRecording]=\"isRecording\"\r\n [class.hasRecording]=\"recordedBlob\"\r\n>\r\n <div class=\"recorderMain\">\r\n <div class=\"recorderToolbar\">\r\n <!-- Start Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"!isRecording\"\r\n [descriptor]=\"micButton\"\r\n (actionClick)=\"startRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Stop Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"isRecording\"\r\n [descriptor]=\"stopButton\"\r\n (actionClick)=\"stopRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Save Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob\"\r\n [descriptor]=\"saveButton\"\r\n (actionClick)=\"saveRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Start Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && !isPlaying\"\r\n [descriptor]=\"playButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n <!-- Stop Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && isPlaying\"\r\n [descriptor]=\"stopPlaybackButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n @if (isRecording) {\r\n <div class=\"progress\">{{ time }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\r\n <div class=\"waveformGrid\"></div>\r\n <div class=\"waveform\" #waveform></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{background:#fff;display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:max-width,opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7582
7585
|
}
|
|
7583
7586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: VoiceRecordWidgetComponent, decorators: [{
|
|
7584
7587
|
type: Component,
|
|
7585
|
-
args: [{ selector: 'voice-record-widget', template: "<div\r\n class=\"recorderContainer\"\r\n [class.direction-left]=\"isLeftDirection\"\r\n [class.direction-right]=\"!isLeftDirection\"\r\n [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\r\n [class.isRecording]=\"isRecording\"\r\n [class.hasRecording]=\"recordedBlob\"\r\n>\r\n <div class=\"recorderMain\">\r\n <div class=\"recorderToolbar\">\r\n <!-- Start Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"!isRecording\"\r\n [descriptor]=\"micButton\"\r\n (actionClick)=\"startRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Stop Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"isRecording\"\r\n [descriptor]=\"stopButton\"\r\n (actionClick)=\"stopRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Save Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob\"\r\n [descriptor]=\"saveButton\"\r\n (actionClick)=\"saveRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Start Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && !isPlaying\"\r\n [descriptor]=\"playButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n <!-- Stop Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && isPlaying\"\r\n [descriptor]=\"stopPlaybackButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n @if (isRecording) {\r\n <div class=\"progress\">{{ time }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\r\n <div class=\"waveformGrid\"></div>\r\n <div class=\"waveform\" #waveform></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{background:#fff;display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:max-width,opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"] }]
|
|
7588
|
+
args: [{ selector: 'voice-record-widget', template: "<div\r\n class=\"recorderContainer\"\r\n [class.direction-left]=\"isLeftDirection\"\r\n [class.direction-right]=\"!isLeftDirection\"\r\n [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\r\n [class.isRecording]=\"isRecording\"\r\n [class.hasRecording]=\"recordedBlob\"\r\n>\r\n <div class=\"recorderMain\">\r\n <div class=\"recorderToolbar\">\r\n <!-- Start Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"!isRecording\"\r\n [descriptor]=\"micButton\"\r\n (actionClick)=\"startRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Stop Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n #mainButton\r\n *ngIf=\"isRecording\"\r\n [descriptor]=\"stopButton\"\r\n (actionClick)=\"stopRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Save Recording -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob\"\r\n [descriptor]=\"saveButton\"\r\n (actionClick)=\"saveRecording()\"\r\n >\r\n </ui-action-button>\r\n\r\n <!-- Start Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && !isPlaying\"\r\n [descriptor]=\"playButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n <!-- Stop Play -->\r\n <ui-action-button\r\n class=\"mainButton\"\r\n *ngIf=\"recordedBlob && isPlaying\"\r\n [descriptor]=\"stopPlaybackButton\"\r\n (actionClick)=\"replayRecording()\"\r\n ></ui-action-button>\r\n\r\n @if (isRecording) {\r\n <div class=\"progress\">{{ time }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\r\n <div class=\"waveformGrid\"></div>\r\n <div class=\"waveform\" #waveform></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{background:#fff;display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:max-width,opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"] }]
|
|
7586
7589
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7587
7590
|
type: Inject,
|
|
7588
7591
|
args: [COMPONENT_LIBRARY]
|
|
@@ -8690,9 +8693,6 @@ class SmartVoiceRecorderComponent {
|
|
|
8690
8693
|
style: {},
|
|
8691
8694
|
};
|
|
8692
8695
|
}
|
|
8693
|
-
if (!('width' in this._widgetInstance.style.style) && 'minWidth' in this._widgetInstance) {
|
|
8694
|
-
this._widgetInstance.style.style['width'] = `${this._widgetInstance.minWidth}px`;
|
|
8695
|
-
}
|
|
8696
8696
|
return SmartStyleUtility.getNgStyles(this._widgetInstance.style);
|
|
8697
8697
|
}
|
|
8698
8698
|
writeValue(value) {
|
|
@@ -9942,11 +9942,11 @@ class SmartformComponent {
|
|
|
9942
9942
|
return [];
|
|
9943
9943
|
}
|
|
9944
9944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartformComponent, deps: [{ token: SmartFormService }, { token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartformComponent, selector: "smartform", inputs: { smartForm: "smartForm" }, providers: [SmartFormService], viewQueries: [{ propertyName: "smartWidgetsQL", predicate: SmartformwidgetComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"smartForm\" (keydown)=\"keyDownFunction($event)\" [formGroup]=\"form\" class=\"flex form\">\r\n <h2 *ngIf=\"smartForm.name\">\r\n {{ smartForm.name }}\r\n </h2>\r\n <div [ngClass]=\"smartForm.direction === direction.ROW ? 'row' : 'col'\">\r\n <div *ngFor=\"let widget of smartForm.widgets\" class=\"item\">\r\n <smartformwidget\r\n *ngIf=\"widget.isVisible === undefined ? true : widget.isVisible\"\r\n [widgetInstance]=\"widget\"\r\n [form]=\"form\"\r\n class=\"grid-item\"\r\n [onBlur]=\"onBlurSubject\"\r\n [onValueChange]=\"onValueChangeSubject\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"smartForm.labelTheme\"\r\n (valueCleared)=\"submitForm(true)\"\r\n ></smartformwidget>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [".col{display:flex;flex-direction:column;gap:.25em}.row{display:flex;flex-wrap:wrap;gap:.25em}.grid-item{text-align:left}.item{flex:1}.item ::ng-deep .p-inputtext{width:100%!important;min-height:45px}.item ::ng-deep p-inputnumber,.item ::ng-deep .p-inputnumber{width:100%!important;height:45px!important}.item ::ng-deep .p-dropdown,.item ::ng-deep .p-multiselect{width:100%!important}.item ::ng-deep p-overlay{z-index:1002}.item ::ng-deep .p-chips{width:100%!important;height:45px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }] }); }
|
|
9945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartformComponent, selector: "smartform", inputs: { smartForm: "smartForm" }, providers: [SmartFormService], viewQueries: [{ propertyName: "smartWidgetsQL", predicate: SmartformwidgetComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"smartForm\" (keydown)=\"keyDownFunction($event)\" [formGroup]=\"form\" class=\"flex form\">\r\n <h2 *ngIf=\"smartForm.name\">\r\n {{ smartForm.name }}\r\n </h2>\r\n <div [ngClass]=\"smartForm.direction === direction.ROW ? 'row' : 'col'\">\r\n <div *ngFor=\"let widget of smartForm.widgets\" class=\"item\">\r\n <smartformwidget\r\n *ngIf=\"widget.isVisible === undefined ? true : widget.isVisible\"\r\n [widgetInstance]=\"widget\"\r\n [form]=\"form\"\r\n class=\"grid-item\"\r\n [onBlur]=\"onBlurSubject\"\r\n [onValueChange]=\"onValueChangeSubject\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"smartForm.labelTheme\"\r\n (valueCleared)=\"submitForm(true)\"\r\n ></smartformwidget>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [":host{display:flex}form{display:flex;flex:1}.col{flex:1;display:flex;flex-direction:column;gap:.25em}.row{flex:1;display:flex;flex-wrap:wrap;gap:.25em}.grid-item{text-align:left}.item{flex:1}.item ::ng-deep .p-inputtext{width:100%!important;min-height:45px}.item ::ng-deep p-inputnumber,.item ::ng-deep .p-inputnumber{width:100%!important;height:45px!important}.item ::ng-deep .p-dropdown,.item ::ng-deep .p-multiselect{width:100%!important}.item ::ng-deep p-overlay{z-index:1002}.item ::ng-deep .p-chips{width:100%!important;height:45px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }] }); }
|
|
9946
9946
|
}
|
|
9947
9947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartformComponent, decorators: [{
|
|
9948
9948
|
type: Component,
|
|
9949
|
-
args: [{ selector: 'smartform', providers: [SmartFormService], template: "<form *ngIf=\"smartForm\" (keydown)=\"keyDownFunction($event)\" [formGroup]=\"form\" class=\"flex form\">\r\n <h2 *ngIf=\"smartForm.name\">\r\n {{ smartForm.name }}\r\n </h2>\r\n <div [ngClass]=\"smartForm.direction === direction.ROW ? 'row' : 'col'\">\r\n <div *ngFor=\"let widget of smartForm.widgets\" class=\"item\">\r\n <smartformwidget\r\n *ngIf=\"widget.isVisible === undefined ? true : widget.isVisible\"\r\n [widgetInstance]=\"widget\"\r\n [form]=\"form\"\r\n class=\"grid-item\"\r\n [onBlur]=\"onBlurSubject\"\r\n [onValueChange]=\"onValueChangeSubject\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"smartForm.labelTheme\"\r\n (valueCleared)=\"submitForm(true)\"\r\n ></smartformwidget>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [".col{display:flex;flex-direction:column;gap:.25em}.row{display:flex;flex-wrap:wrap;gap:.25em}.grid-item{text-align:left}.item{flex:1}.item ::ng-deep .p-inputtext{width:100%!important;min-height:45px}.item ::ng-deep p-inputnumber,.item ::ng-deep .p-inputnumber{width:100%!important;height:45px!important}.item ::ng-deep .p-dropdown,.item ::ng-deep .p-multiselect{width:100%!important}.item ::ng-deep p-overlay{z-index:1002}.item ::ng-deep .p-chips{width:100%!important;height:45px!important}\n"] }]
|
|
9949
|
+
args: [{ selector: 'smartform', providers: [SmartFormService], template: "<form *ngIf=\"smartForm\" (keydown)=\"keyDownFunction($event)\" [formGroup]=\"form\" class=\"flex form\">\r\n <h2 *ngIf=\"smartForm.name\">\r\n {{ smartForm.name }}\r\n </h2>\r\n <div [ngClass]=\"smartForm.direction === direction.ROW ? 'row' : 'col'\">\r\n <div *ngFor=\"let widget of smartForm.widgets\" class=\"item\">\r\n <smartformwidget\r\n *ngIf=\"widget.isVisible === undefined ? true : widget.isVisible\"\r\n [widgetInstance]=\"widget\"\r\n [form]=\"form\"\r\n class=\"grid-item\"\r\n [onBlur]=\"onBlurSubject\"\r\n [onValueChange]=\"onValueChangeSubject\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"smartForm.labelTheme\"\r\n (valueCleared)=\"submitForm(true)\"\r\n ></smartformwidget>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [":host{display:flex}form{display:flex;flex:1}.col{flex:1;display:flex;flex-direction:column;gap:.25em}.row{flex:1;display:flex;flex-wrap:wrap;gap:.25em}.grid-item{text-align:left}.item{flex:1}.item ::ng-deep .p-inputtext{width:100%!important;min-height:45px}.item ::ng-deep p-inputnumber,.item ::ng-deep .p-inputnumber{width:100%!important;height:45px!important}.item ::ng-deep .p-dropdown,.item ::ng-deep .p-multiselect{width:100%!important}.item ::ng-deep p-overlay{z-index:1002}.item ::ng-deep .p-chips{width:100%!important;height:45px!important}\n"] }]
|
|
9950
9950
|
}], ctorParameters: () => [{ type: SmartFormService }, { type: ComponentLibrary, decorators: [{
|
|
9951
9951
|
type: Inject,
|
|
9952
9952
|
args: [COMPONENT_LIBRARY]
|
|
@@ -15211,11 +15211,11 @@ class ExpandableSectionComponent {
|
|
|
15211
15211
|
button.callback(button.args, element);
|
|
15212
15212
|
}
|
|
15213
15213
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandableSectionComponent, deps: [{ token: ComponentFactoryService }, { token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n @if(compLib === componentLibrary.PRIMENG) {\r\n
|
|
15214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <p-accordion *ngIf=\"!data.headerComponent\">\r\n <p-accordionTab>\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"headerBar\">\r\n <span>{{ data.title }}</span>\r\n <smart-ui-action-toolbar #toolbar [id]=\"data.headerToolbarId\"></smart-ui-action-toolbar>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #renderComponent></ng-template>\r\n </p-accordionTab>\r\n </p-accordion>\r\n } @else {\r\n <mat-expansion-panel\r\n [expanded]=\"data.isExpanded\"\r\n (opened)=\"onStateChange(true)\"\r\n (closed)=\"onStateChange(false)\"\r\n [disabled]=\"!!data.isDisabled\"\r\n >\r\n <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n <ng-template #headerComponent></ng-template>\r\n </mat-expansion-panel-header>\r\n <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n <mat-panel-title>\r\n <div class=\"headerBar\">\r\n <span>{{ data.title }}</span>\r\n <smart-ui-action-toolbar #toolbar [id]=\"data.headerToolbarId\"></smart-ui-action-toolbar>\r\n </div>\r\n </mat-panel-title>\r\n <div class=\"btn-container\" *ngIf=\"data.button\">\r\n <button\r\n *ngIf=\"data.button.type === type().BUTTON\"\r\n class=\"btn\"\r\n (click)=\"action(data.button, $event)\"\r\n mat-stroked-button\r\n >\r\n <smart-icon\r\n *ngIf=\"\r\n data.button.icon &&\r\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n \"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon>\r\n {{ data.button.label }}\r\n <smart-icon\r\n *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon>\r\n </button>\r\n <button\r\n *ngIf=\"data.button.type === type().MENU\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n color=\"{{ data.button.color }}\"\r\n >\r\n <smart-icon\r\n *ngIf=\"\r\n data.button.icon &&\r\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n \"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon\r\n >{{ data.button.label }}\r\n <smart-icon\r\n *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let button of data.button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, button, data.index)\"\r\n mat-menu-item\r\n >\r\n <smart-icon\r\n *ngIf=\"\r\n button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\r\n \"\r\n [icon]=\"button.icon\"\r\n ></smart-icon\r\n >{{ button.label }}\r\n <smart-icon\r\n *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n [icon]=\"button.icon\"\r\n ></smart-icon>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </mat-expansion-panel-header>\r\n <ng-template #renderComponent></ng-template>\r\n </mat-expansion-panel>\r\n }\r\n</div>\r\n", styles: [":host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}:host ::ng-deep .headerBar{flex:1;display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i7.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i7.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }] }); }
|
|
15215
15215
|
}
|
|
15216
15216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
|
|
15217
15217
|
type: Component,
|
|
15218
|
-
args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n @if(compLib === componentLibrary.PRIMENG) {\r\n
|
|
15218
|
+
args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <p-accordion *ngIf=\"!data.headerComponent\">\r\n <p-accordionTab>\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"headerBar\">\r\n <span>{{ data.title }}</span>\r\n <smart-ui-action-toolbar #toolbar [id]=\"data.headerToolbarId\"></smart-ui-action-toolbar>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #renderComponent></ng-template>\r\n </p-accordionTab>\r\n </p-accordion>\r\n } @else {\r\n <mat-expansion-panel\r\n [expanded]=\"data.isExpanded\"\r\n (opened)=\"onStateChange(true)\"\r\n (closed)=\"onStateChange(false)\"\r\n [disabled]=\"!!data.isDisabled\"\r\n >\r\n <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n <ng-template #headerComponent></ng-template>\r\n </mat-expansion-panel-header>\r\n <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n <mat-panel-title>\r\n <div class=\"headerBar\">\r\n <span>{{ data.title }}</span>\r\n <smart-ui-action-toolbar #toolbar [id]=\"data.headerToolbarId\"></smart-ui-action-toolbar>\r\n </div>\r\n </mat-panel-title>\r\n <div class=\"btn-container\" *ngIf=\"data.button\">\r\n <button\r\n *ngIf=\"data.button.type === type().BUTTON\"\r\n class=\"btn\"\r\n (click)=\"action(data.button, $event)\"\r\n mat-stroked-button\r\n >\r\n <smart-icon\r\n *ngIf=\"\r\n data.button.icon &&\r\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n \"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon>\r\n {{ data.button.label }}\r\n <smart-icon\r\n *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon>\r\n </button>\r\n <button\r\n *ngIf=\"data.button.type === type().MENU\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n color=\"{{ data.button.color }}\"\r\n >\r\n <smart-icon\r\n *ngIf=\"\r\n data.button.icon &&\r\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n \"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon\r\n >{{ data.button.label }}\r\n <smart-icon\r\n *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n [icon]=\"data.button.icon\"\r\n ></smart-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let button of data.button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, button, data.index)\"\r\n mat-menu-item\r\n >\r\n <smart-icon\r\n *ngIf=\"\r\n button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\r\n \"\r\n [icon]=\"button.icon\"\r\n ></smart-icon\r\n >{{ button.label }}\r\n <smart-icon\r\n *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n [icon]=\"button.icon\"\r\n ></smart-icon>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </mat-expansion-panel-header>\r\n <ng-template #renderComponent></ng-template>\r\n </mat-expansion-panel>\r\n }\r\n</div>\r\n", styles: [":host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}:host ::ng-deep .headerBar{flex:1;display:flex;justify-content:space-between;align-items:center}\n"] }]
|
|
15219
15219
|
}], ctorParameters: () => [{ type: ComponentFactoryService }, { type: ComponentLibrary, decorators: [{
|
|
15220
15220
|
type: Inject,
|
|
15221
15221
|
args: [COMPONENT_LIBRARY]
|
|
@@ -15229,6 +15229,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
15229
15229
|
}], vcRefheader: [{
|
|
15230
15230
|
type: ViewChild,
|
|
15231
15231
|
args: ['headerComponent', { read: ViewContainerRef }]
|
|
15232
|
+
}], toolbar: [{
|
|
15233
|
+
type: ViewChild,
|
|
15234
|
+
args: ['toolbar']
|
|
15232
15235
|
}] } });
|
|
15233
15236
|
|
|
15234
15237
|
class SmartGridComponent {
|
|
@@ -16245,7 +16248,8 @@ class SmartExpandableSectionModule {
|
|
|
16245
16248
|
MatButtonModule,
|
|
16246
16249
|
MatMenuModule,
|
|
16247
16250
|
SmartIconModule,
|
|
16248
|
-
AccordionModule
|
|
16251
|
+
AccordionModule,
|
|
16252
|
+
SmartViewContextModule], exports: [ExpandableSectionComponent] }); }
|
|
16249
16253
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartExpandableSectionModule, imports: [BrowserModule,
|
|
16250
16254
|
MatCommonModule,
|
|
16251
16255
|
MatExpansionModule,
|
|
@@ -16254,7 +16258,8 @@ class SmartExpandableSectionModule {
|
|
|
16254
16258
|
MatButtonModule,
|
|
16255
16259
|
MatMenuModule,
|
|
16256
16260
|
SmartIconModule,
|
|
16257
|
-
AccordionModule
|
|
16261
|
+
AccordionModule,
|
|
16262
|
+
SmartViewContextModule] }); }
|
|
16258
16263
|
}
|
|
16259
16264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartExpandableSectionModule, decorators: [{
|
|
16260
16265
|
type: NgModule,
|
|
@@ -16270,6 +16275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
16270
16275
|
MatMenuModule,
|
|
16271
16276
|
SmartIconModule,
|
|
16272
16277
|
AccordionModule,
|
|
16278
|
+
SmartViewContextModule,
|
|
16273
16279
|
],
|
|
16274
16280
|
exports: [ExpandableSectionComponent],
|
|
16275
16281
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
@@ -20940,6 +20946,7 @@ class SmartComponentLayoutComponent {
|
|
|
20940
20946
|
['parentSmartComponent', this.parentSmartComponent],
|
|
20941
20947
|
['parentLayoutComponent', this.parentLayoutComponent],
|
|
20942
20948
|
]),
|
|
20949
|
+
headerToolbarId: this.smartComponentLayout?.expandableSectionHeaderToolbarId,
|
|
20943
20950
|
customComponent: SmartComponentLayoutComponent,
|
|
20944
20951
|
};
|
|
20945
20952
|
}
|
|
@@ -21114,11 +21121,11 @@ class SmartComponentLayoutComponent {
|
|
|
21114
21121
|
}
|
|
21115
21122
|
}
|
|
21116
21123
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: SmartViewContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n <smart-expandable-section\r\n *ngIf=\"expandableSection\"\r\n [data]=\"expandableSection\"\r\n ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n @if (smartComponentLayout?.type === type().CONTAINER) {\r\n <smart-component-layout\r\n *ngFor=\"let layout of smartComponentLayout?.components\"\r\n [parentSmartComponent]=\"parentSmartComponent\"\r\n [parentLayoutComponent]=\"this\"\r\n [smartComponentLayout]=\"layout\"\r\n [gridRow]=\"gridRow\"\r\n ></smart-component-layout>\r\n }\r\n <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n <smart-map\r\n *ngIf=\"!!uuid && !!mapId\"\r\n #map\r\n [uuid]=\"uuid\"\r\n [identifier]=\"mapId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-map>\r\n <smart-diagram\r\n *ngIf=\"!!uuid && !!smartDiagramId\"\r\n #diagram\r\n [uuid]=\"uuid\"\r\n [identifier]=\"smartDiagramId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-diagram>\r\n <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n <smart-ui-action-toolbar\r\n *ngIf=\"!!toolbarId\"\r\n #toolbar\r\n [id]=\"toolbarId\"\r\n [toolbarPropertes]=\"toolbarPropertes\"\r\n ></smart-ui-action-toolbar>\r\n <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
|
|
21124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n <smart-expandable-section\r\n *ngIf=\"expandableSection\"\r\n [data]=\"expandableSection\"\r\n ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n @if (smartComponentLayout?.type === type().CONTAINER) {\r\n <smart-component-layout\r\n *ngFor=\"let layout of smartComponentLayout?.components\"\r\n [parentSmartComponent]=\"parentSmartComponent\"\r\n [parentLayoutComponent]=\"this\"\r\n [smartComponentLayout]=\"layout\"\r\n [gridRow]=\"gridRow\"\r\n ></smart-component-layout>\r\n }\r\n <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n <smart-map\r\n *ngIf=\"!!uuid && !!mapId\"\r\n #map\r\n [uuid]=\"uuid\"\r\n [identifier]=\"mapId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-map>\r\n <smart-diagram\r\n *ngIf=\"!!uuid && !!smartDiagramId\"\r\n #diagram\r\n [uuid]=\"uuid\"\r\n [identifier]=\"smartDiagramId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-diagram>\r\n <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n <smart-ui-action-toolbar\r\n *ngIf=\"!!toolbarId\"\r\n #toolbar\r\n [id]=\"toolbarId\"\r\n [toolbarPropertes]=\"toolbarPropertes\"\r\n ></smart-ui-action-toolbar>\r\n <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
|
|
21118
21125
|
}
|
|
21119
21126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
|
|
21120
21127
|
type: Component,
|
|
21121
|
-
args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n <smart-expandable-section\r\n *ngIf=\"expandableSection\"\r\n [data]=\"expandableSection\"\r\n ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n @if (smartComponentLayout?.type === type().CONTAINER) {\r\n <smart-component-layout\r\n *ngFor=\"let layout of smartComponentLayout?.components\"\r\n [parentSmartComponent]=\"parentSmartComponent\"\r\n [parentLayoutComponent]=\"this\"\r\n [smartComponentLayout]=\"layout\"\r\n [gridRow]=\"gridRow\"\r\n ></smart-component-layout>\r\n }\r\n <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n <smart-map\r\n *ngIf=\"!!uuid && !!mapId\"\r\n #map\r\n [uuid]=\"uuid\"\r\n [identifier]=\"mapId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-map>\r\n <smart-diagram\r\n *ngIf=\"!!uuid && !!smartDiagramId\"\r\n #diagram\r\n [uuid]=\"uuid\"\r\n [identifier]=\"smartDiagramId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-diagram>\r\n <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n <smart-ui-action-toolbar\r\n *ngIf=\"!!toolbarId\"\r\n #toolbar\r\n [id]=\"toolbarId\"\r\n [toolbarPropertes]=\"toolbarPropertes\"\r\n ></smart-ui-action-toolbar>\r\n <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}\n"] }]
|
|
21128
|
+
args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n <smart-expandable-section\r\n *ngIf=\"expandableSection\"\r\n [data]=\"expandableSection\"\r\n ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n @if (smartComponentLayout?.type === type().CONTAINER) {\r\n <smart-component-layout\r\n *ngFor=\"let layout of smartComponentLayout?.components\"\r\n [parentSmartComponent]=\"parentSmartComponent\"\r\n [parentLayoutComponent]=\"this\"\r\n [smartComponentLayout]=\"layout\"\r\n [gridRow]=\"gridRow\"\r\n ></smart-component-layout>\r\n }\r\n <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n <smart-map\r\n *ngIf=\"!!uuid && !!mapId\"\r\n #map\r\n [uuid]=\"uuid\"\r\n [identifier]=\"mapId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-map>\r\n <smart-diagram\r\n *ngIf=\"!!uuid && !!smartDiagramId\"\r\n #diagram\r\n [uuid]=\"uuid\"\r\n [identifier]=\"smartDiagramId\"\r\n [parent]=\"parentSmartComponent\"\r\n ></smart-diagram>\r\n <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n <smart-ui-action-toolbar\r\n *ngIf=\"!!toolbarId\"\r\n #toolbar\r\n [id]=\"toolbarId\"\r\n [toolbarPropertes]=\"toolbarPropertes\"\r\n ></smart-ui-action-toolbar>\r\n <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"] }]
|
|
21122
21129
|
}], ctorParameters: () => [{ type: SmartformLayoutDefinitionService }, { type: SmartViewContextService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { smartComponentLayout: [{
|
|
21123
21130
|
type: Input
|
|
21124
21131
|
}], parentLayoutComponent: [{
|
|
@@ -22235,6 +22242,11 @@ class SmartComponentLayoutUtility {
|
|
|
22235
22242
|
if (expandable) {
|
|
22236
22243
|
result.push(...this.getToolbars(expandable));
|
|
22237
22244
|
}
|
|
22245
|
+
let expandeableHeaderToolbar = comp.expandableComponents?.first?.toolbar;
|
|
22246
|
+
console.log(expandeableHeaderToolbar);
|
|
22247
|
+
if (expandeableHeaderToolbar) {
|
|
22248
|
+
result.push(expandeableHeaderToolbar);
|
|
22249
|
+
}
|
|
22238
22250
|
if (comp.toolbar) {
|
|
22239
22251
|
result.push(comp.toolbar);
|
|
22240
22252
|
}
|