@gravitee/ui-particles-angular 15.8.0 → 15.8.1-click-tag-35d619f

package/fesm2022/gravitee-ui-particles-angular.mjs

@@ -1,6 +1,6 @@
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, ChangeDetectionStrategy, Optional, Self, ViewChild, Directive, Injector, Inject, forwardRef, ContentChildren, Injectable, Host, ContentChild, InjectionToken, inject, ViewContainerRef, signal, computed, Pipe, ViewEncapsulation } from '@angular/core';
+import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, ChangeDetectionStrategy, Optional, Self, ViewChild, Directive, Injector, Inject, forwardRef, ContentChildren, Injectable, Host, ContentChild, InjectionToken, inject, signal, effect, ViewContainerRef, computed, Pipe, ViewEncapsulation } from '@angular/core';
 import { of, Subject, fromEvent, ReplaySubject, merge, Observable, BehaviorSubject, timer } from 'rxjs';
 import { delay, tap, startWith, switchMap, map, distinctUntilChanged, takeUntil, filter, take, debounceTime, shareReplay, catchError, debounce } from 'rxjs/operators';
 import * as i1 from '@angular/common';
@@ -407,6 +407,7 @@ class GioFormTagsInputComponent {
          * called with `true` it will add the tag, otherwise it will just ignore it
          */
         this.tagValidationHook = undefined;
+        this.clickOnTag = new EventEmitter();
         /**
          * Set to true to force the chip to be part of the autocomplete options.
          */
@@ -537,12 +538,12 @@ class GioFormTagsInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioFormTagsInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i1$3.FocusMonitor }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioFormTagsInputComponent, isStandalone: false, selector: "gio-form-tags-input", inputs: { ariaLabel: ["aria-label", "ariaLabel"], addOnBlur: "addOnBlur", tagValidationHook: "tagValidationHook", autocompleteOptions: "autocompleteOptions", displayValueWith: "displayValueWith", useAutocompleteOptionValueOnly: "useAutocompleteOptionValueOnly", placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioFormTagsInputComponent, isStandalone: false, selector: "gio-form-tags-input", inputs: { ariaLabel: ["aria-label", "ariaLabel"], addOnBlur: "addOnBlur", tagValidationHook: "tagValidationHook", autocompleteOptions: "autocompleteOptions", displayValueWith: "displayValueWith", useAutocompleteOptionValueOnly: "useAutocompleteOptionValueOnly", placeholder: "placeholder", required: "required", disabled: "disabled" }, outputs: { clickOnTag: "clickOnTag" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
             {
                 provide: MatFormFieldControl,
                 useExisting: GioFormTagsInputComponent,
             },
-        ], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip-row *ngFor=\"let tag of value\" [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\" [disabled]=\"disabled\">\n    {{ _displayValueWith ? (_displayValueWith(tag) | async) : tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip-row>\n  <input\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n    [matAutocomplete]=\"auto\"\n    [placeholder]=\"placeholder\"\n    [matChipInputFor]=\"tagChipList\"\n    [matChipInputAddOnBlur]=\"addOnBlur\"\n    (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n  />\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n    <mat-option *ngIf=\"loading\" disabled id=\"loader\">\n      <div class=\"loader-option\"><gio-loader></gio-loader></div>\n    </mat-option>\n    <mat-option *ngFor=\"let option of autocompleteFilteredOptions$ | async\" [value]=\"option.value\">\n      {{ option.label }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-grid>\n", styles: ["::ng-deep gio-form-tags-input .mat-mdc-standard-chip{height:unset!important;min-height:var(--mdc-chip-container-height)}::ng-deep gio-form-tags-input .mat-mdc-standard-chip .mdc-evolution-chip__text-label{white-space:normal}.loader-option{display:flex}.loader-option gio-loader{width:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: GioLoaderComponent, selector: "gio-loader" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip-row\n    *ngFor=\"let tag of value\"\n    [removable]=\"!disabled\"\n    (removed)=\"removeChipToFormControl(tag)\"\n    [disabled]=\"disabled\"\n    (click)=\"clickOnTag.emit(tag)\"\n  >\n    {{ _displayValueWith ? (_displayValueWith(tag) | async) : tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip-row>\n  <input\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n    [matAutocomplete]=\"auto\"\n    [placeholder]=\"placeholder\"\n    [matChipInputFor]=\"tagChipList\"\n    [matChipInputAddOnBlur]=\"addOnBlur\"\n    (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n  />\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n    <mat-option *ngIf=\"loading\" disabled id=\"loader\">\n      <div class=\"loader-option\"><gio-loader></gio-loader></div>\n    </mat-option>\n    <mat-option *ngFor=\"let option of autocompleteFilteredOptions$ | async\" [value]=\"option.value\">\n      {{ option.label }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-grid>\n", styles: ["::ng-deep gio-form-tags-input .mat-mdc-standard-chip{height:unset!important;min-height:var(--mdc-chip-container-height)}::ng-deep gio-form-tags-input .mat-mdc-standard-chip .mdc-evolution-chip__text-label{white-space:normal}.loader-option{display:flex}.loader-option gio-loader{width:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: GioLoaderComponent, selector: "gio-loader" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioFormTagsInputComponent, decorators: [{
             type: Component,
@@ -551,7 +552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: GioFormTagsInputComponent,
                         },
-                    ], standalone: false, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip-row *ngFor=\"let tag of value\" [removable]=\"!disabled\" (removed)=\"removeChipToFormControl(tag)\" [disabled]=\"disabled\">\n    {{ _displayValueWith ? (_displayValueWith(tag) | async) : tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip-row>\n  <input\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n    [matAutocomplete]=\"auto\"\n    [placeholder]=\"placeholder\"\n    [matChipInputFor]=\"tagChipList\"\n    [matChipInputAddOnBlur]=\"addOnBlur\"\n    (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n  />\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n    <mat-option *ngIf=\"loading\" disabled id=\"loader\">\n      <div class=\"loader-option\"><gio-loader></gio-loader></div>\n    </mat-option>\n    <mat-option *ngFor=\"let option of autocompleteFilteredOptions$ | async\" [value]=\"option.value\">\n      {{ option.label }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-grid>\n", styles: ["::ng-deep gio-form-tags-input .mat-mdc-standard-chip{height:unset!important;min-height:var(--mdc-chip-container-height)}::ng-deep gio-form-tags-input .mat-mdc-standard-chip .mdc-evolution-chip__text-label{white-space:normal}.loader-option{display:flex}.loader-option gio-loader{width:24px}\n"] }]
+                    ], standalone: false, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<mat-chip-grid #tagChipList [attr.aria-label]=\"ariaLabel\" multiple [disabled]=\"disabled\">\n  <mat-chip-row\n    *ngFor=\"let tag of value\"\n    [removable]=\"!disabled\"\n    (removed)=\"removeChipToFormControl(tag)\"\n    [disabled]=\"disabled\"\n    (click)=\"clickOnTag.emit(tag)\"\n  >\n    {{ _displayValueWith ? (_displayValueWith(tag) | async) : tag }}\n    <mat-icon matChipRemove>cancel</mat-icon>\n  </mat-chip-row>\n  <input\n    #tagInput\n    [matAutocompleteDisabled]=\"!_autocompleteOptions || disabled\"\n    [matAutocomplete]=\"auto\"\n    [placeholder]=\"placeholder\"\n    [matChipInputFor]=\"tagChipList\"\n    [matChipInputAddOnBlur]=\"addOnBlur\"\n    (matChipInputTokenEnd)=\"onMatChipTokenEnd()\"\n  />\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteSelect($event)\">\n    <mat-option *ngIf=\"loading\" disabled id=\"loader\">\n      <div class=\"loader-option\"><gio-loader></gio-loader></div>\n    </mat-option>\n    <mat-option *ngFor=\"let option of autocompleteFilteredOptions$ | async\" [value]=\"option.value\">\n      {{ option.label }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-chip-grid>\n", styles: ["::ng-deep gio-form-tags-input .mat-mdc-standard-chip{height:unset!important;min-height:var(--mdc-chip-container-height)}::ng-deep gio-form-tags-input .mat-mdc-standard-chip .mdc-evolution-chip__text-label{white-space:normal}.loader-option{display:flex}.loader-option gio-loader{width:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -565,6 +566,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }], autocompleteOptions: [{
                 type: Input
+            }], clickOnTag: [{
+                type: Output
             }], displayValueWith: [{
                 type: Input
             }], useAutocompleteOptionValueOnly: [{
@@ -3622,6 +3625,10 @@ class GioMonacoEditorComponent {
         this.value = '';
         this.readOnly = false;
         this.toDisposes = [];
+        this.isMonacoEditorReady = signal({
+            isSetup: false,
+            hasFirstValue: false,
+        });
         this._onChange = () => ({});
         this._onTouched = () => ({});
         this.unsubscribe$ = new Subject();
@@ -3631,11 +3638,22 @@ class GioMonacoEditorComponent {
             this.ngControl.valueAccessor = this;
         }
         this.monacoEditorService.loadEditor();
+        effect(() => {
+            const { isSetup, hasFirstValue } = this.isMonacoEditorReady();
+            if (isSetup && hasFirstValue) {
+                if (this.textModel) {
+                    this.textModel.setValue(this.value);
+                }
+                this.updateModelLanguage();
+                this.autoformatValue();
+            }
+        });
     }
     ngAfterViewInit() {
         // Wait until monaco editor is available
         this.monacoEditorService.loaded$.pipe(takeUntil(this.unsubscribe$)).subscribe(({ monaco }) => {
             this.setupEditor(monaco);
+            this.isMonacoEditorReady.update(({ hasFirstValue }) => ({ isSetup: true, hasFirstValue }));
             this.loaded$.next(false);
             this.changeDetectorRef.detectChanges();
         });
@@ -3657,9 +3675,7 @@ class GioMonacoEditorComponent {
     writeValue(_value) {
         if (_value) {
             this.value = isString(_value) ? _value : JSON.stringify(_value);
-        }
-        if (this.textModel) {
-            this.textModel.setValue(this.value);
+            this.isMonacoEditorReady.update(({ isSetup }) => ({ isSetup, hasFirstValue: true }));
         }
     }
     // From ControlValueAccessor interface
@@ -3703,11 +3719,6 @@ class GioMonacoEditorComponent {
         this.standaloneCodeEditor = monaco.editor.create(domElement, {
             ...options,
         });
-        if (!this.disableAutoFormat) {
-            setTimeout(() => {
-                this.standaloneCodeEditor?.getAction('editor.action.formatDocument')?.run();
-            }, 80);
-        }
         if (this.singleLineMode) {
             this.standaloneCodeEditor?.addAction({
                 id: 'custom.action',
@@ -3818,6 +3829,27 @@ class GioMonacoEditorComponent {
                 break;
         }
     }
+    updateModelLanguage() {
+        const languageId = this.languageConfig?.language ?? (isJsonString(this.value) ? 'json' : 'plaintext');
+        if (this.textModel && window.monaco) {
+            window.monaco.editor.setModelLanguage(this.textModel, languageId);
+        }
+    }
+    autoformatValue() {
+        if (!this.disableAutoFormat) {
+            setTimeout(() => {
+                const previousReadOnlyState = this.options.readOnly || this.readOnly;
+                this.standaloneCodeEditor?.updateOptions({ readOnly: false });
+                this.standaloneCodeEditor
+                    ?.getAction('editor.action.formatDocument')
+                    ?.run()
+                    .finally(() => {
+                    this.standaloneCodeEditor?.updateOptions({ readOnly: previousReadOnlyState });
+                    this.changeDetectorRef.detectChanges();
+                });
+            }, 80);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioMonacoEditorComponent, deps: [{ token: i0.ElementRef }, { token: GIO_MONACO_EDITOR_CONFIG }, { token: GioMonacoEditorService }, { token: GioLanguageJsonService }, { token: GioLanguageElService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioMonacoEditorComponent, isStandalone: false, selector: "gio-monaco-editor", inputs: { languageConfig: "languageConfig", options: "options", disableMiniMap: "disableMiniMap", disableAutoFormat: "disableAutoFormat", singleLineMode: "singleLineMode" }, host: { properties: { "class.single-line": "this.singleLineMode" } }, ngImport: i0, template: ` <div *ngIf="loaded$ | async">Loading...</div>`, isInline: true, styles: [":host{display:block;height:100%;min-height:150px;pointer-events:auto;transition:opacity .2s ease-out}:host.single-line{display:flex;height:24px;min-height:24px;align-items:center}:host-context(.hidden){opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4013,23 +4045,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * limitations under the License.
  */
 class GioMonacoClipboardCopyComponent {
+    constructor() {
+        this.monacoEditor = null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioMonacoClipboardCopyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioMonacoClipboardCopyComponent, isStandalone: false, selector: "[gioMonacoClipboardCopy]", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioMonacoClipboardCopyComponent, isStandalone: false, selector: "[gioMonacoClipboardCopy]", queries: [{ propertyName: "monacoEditor", first: true, predicate: GioMonacoEditorComponent, descendants: true }], ngImport: i0, template: `
     <div class="editor-wrapper">
       <ng-content></ng-content>
-      <gio-clipboard-copy-icon class="copy-btn"></gio-clipboard-copy-icon>
+      <gio-clipboard-copy-icon class="copy-btn" [contentToCopy]="monacoEditor?.value ?? ''"></gio-clipboard-copy-icon>
     </div>
-  `, isInline: true, styles: [".editor-wrapper{position:relative;overflow:auto;min-height:420px;flex:1 1 50%}.copy-btn{position:absolute;top:8px;right:8px}\n"], dependencies: [{ kind: "component", type: GioClipboardCopyIconComponent, selector: "gio-clipboard-copy-icon" }] }); }
+  `, isInline: true, styles: [".editor-wrapper{position:relative;overflow:auto;flex:1 1 50%}.copy-btn{position:absolute;z-index:10;top:8px;right:8px}\n"], dependencies: [{ kind: "component", type: GioClipboardCopyIconComponent, selector: "gio-clipboard-copy-icon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioMonacoClipboardCopyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[gioMonacoClipboardCopy]', template: `
     <div class="editor-wrapper">
       <ng-content></ng-content>
-      <gio-clipboard-copy-icon class="copy-btn"></gio-clipboard-copy-icon>
+      <gio-clipboard-copy-icon class="copy-btn" [contentToCopy]="monacoEditor?.value ?? ''"></gio-clipboard-copy-icon>
     </div>
-  `, standalone: false, styles: [".editor-wrapper{position:relative;overflow:auto;min-height:420px;flex:1 1 50%}.copy-btn{position:absolute;top:8px;right:8px}\n"] }]
-        }] });
+  `, standalone: false, styles: [".editor-wrapper{position:relative;overflow:auto;flex:1 1 50%}.copy-btn{position:absolute;z-index:10;top:8px;right:8px}\n"] }]
+        }], propDecorators: { monacoEditor: [{
+                type: ContentChild,
+                args: [GioMonacoEditorComponent, { static: false }]
+            }] } });
 
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)