@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-493e1dd

package/src/molecules/gv-code.js

@@ -1 +1,334 @@
-var e=Object.create?function(e,t,r,i){void 0===i&&(i=r),Object.defineProperty(e,i,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},r=function(r){if(r&&r.__esModule)return r;var i={};if(null!=r)for(var o in r)"default"!==o&&Object.prototype.hasOwnProperty.call(r,o)&&e(i,r,o);return t(i,r),i};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCode=void 0;const i=require("lit"),o=require("@codemirror/basic-setup"),s=require("@codemirror/state"),a=require("@codemirror/autocomplete"),n=require("@codemirror/lang-json"),d=require("@codemirror/language-data"),l=require("@codemirror/view"),c=require("../styles/shapes"),u=require("../lib/events"),p=require("../lib/utils"),h=require("lit/directives/class-map"),m=require("../atoms/gv-input"),g=require("../styles/skeleton"),v=require("../styles/empty"),f=require("../styles/input");class b extends m.GvInput{static get properties(){return{...super.properties,options:{type:Object},rows:{type:Number},_error:{type:String,attribute:!1}}}constructor(){super(),this._id=`gv-code-${(0,p.uuid)()}`,this.value="",this.readonly=!1,this.autofocus=!1,this.clipboard=!1,this._clipboardIcon=c.shapeClipboard,this.languageCompartment=new s.Compartment,this.readonlyCompartment=new s.Compartment,this.placeholderCompartment=new s.Compartment}render(){const e={box:!0,"box-invisible":this.skeleton,large:this.large,medium:this.medium||!this.large&&!this.small,small:this.small,copied:this.hasClipboard&&this._copied},t={content:!0,code:!this.hasInputStyle,input:this.hasInputStyle};return i.html`<div class="${(0,h.classMap)(e)}">${this.label?i.html`<label for="code">${this.label}</label>`:""}<div id="${this._id}" class="${(0,h.classMap)(t)}">${this.renderIcon()}</div></div>${null!=this.description?i.html`<div class="description" .innerHTML="${this.description}"></div>`:""}`}bindInputEvents(){(0,u.dispatchCustomEvent)(this,"ready",{currentTarget:this})}get hasInputStyle(){return 1===this.rows}_autocomplete(e){const{handler:t,match:r}=this.findBestAutocompleteHandler(e);return t.run.call(this,e,r)}findBestAutocompleteHandler(e){return{handler:this.defaultCompletionHandler,match:!0}}get defaultCompletionHandler(){return{run(e){const t=e.state.languageDataAt("autocomplete",e.pos);return t.length>0?t[0](e):{from:e.pos,options:[]}}}}_getExtensions(){return[o.basicSetup,b.codemirrorTheme,this.languageCompartment.of((0,n.json)()),this.placeholderCompartment.of((0,l.placeholder)(this.placeholder||"")),s.EditorState.transactionFilter.of((e=>this.hasInputStyle&&e.newDoc.lines>1?[]:e)),this.readonlyCompartment.of(o.EditorView.editable.of(!this.readonly&&!this.disabled)),o.EditorView.updateListener.of((e=>{e.docChanged&&(this.value=this._editorView.state.doc.toString(),(0,u.dispatchCustomEvent)(this,"input",this.value))})),(0,a.autocompletion)({activateOnTyping:!0,override:[this._autocomplete.bind(this)]}),...this.getExtensions()]}getExtensions(){return[]}getInputElement(){return this.shadowRoot.querySelector(`[id=${this._id}]`)}firstUpdated(){super.firstUpdated(),this._editorState=s.EditorState.create({doc:this.value,extensions:this._getExtensions()});const e=this.getInputElement();this._editorView=new o.EditorView({root:this.shadowRoot,parent:e,state:this._editorState,dispatch:e=>{try{this._editorView.update([e])}catch(e){}}}),e.appendChild(this._editorView.dom)}async updated(e){super.updated(e),e.has("placeholder")&&this._reflectPlaceholder(),e.has("value")&&this._reflectValue(),(e.has("readonly")||e.has("disabled"))&&this._reflectReadonlyDisabled(),e.has("options")&&this.options&&await this._reflectOptions()}_reflectPlaceholder(){this._editorView.dispatch({effects:this.placeholderCompartment.reconfigure((0,l.placeholder)(this.placeholder))})}_reflectValue(){const e=this._editorState.update({changes:{from:0,to:this._editorState.doc.length,insert:this.value}});this._editorState=e.state}_reflectReadonlyDisabled(){this._editorView.dispatch({effects:this.readonlyCompartment.reconfigure(o.EditorView.editable.of(!this.readonly&&!this.disabled))})}static async findLanguage(e){if(e){const t=e.split("/").pop();if("asciidoc"===t){const[{asciidoc:e},{StreamLanguage:t}]=await Promise.all([Promise.resolve().then((()=>r(require("codemirror-asciidoc/lib/asciidoc")))),Promise.resolve().then((()=>r(require("@codemirror/stream-parser"))))]);return{name:"asciidoc",support:{extension:t.define(e)}}}{const r=d.languages.find((e=>e.name.toUpperCase()===t.toUpperCase()||e.alias.includes(t)));return null==r&&console.warn(`Cannot find language ${e}, please use language supported by CodeMirror 6`,d.languages.map((e=>e.name))),r}}return null}async _reflectOptions(){const e=await b.findLanguage(this.options.mode);null!=e&&(null==e.support&&await e.load(),this._editorView.dispatch({effects:this.languageCompartment.reconfigure(e.support.extension)}))}static get codemirrorTheme(){return o.EditorView.theme({"&.cm-editor.cm-focused":{outline:"none"},".cm-gutters":{backgroundColor:"var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5))",color:"var(--gv-theme-font-color-dark, #262626)",borderLeft:"5px solid",borderColor:"var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9))"}})}static get styles(){return[...super.styles,g.skeleton,v.empty,f.input,i.css`:host{box-sizing:border-box;display:block;margin:0 .2rem .2rem .2rem}.content{position:relative;border:var(--gv-input--bdw,1px) var(--gv-input--bds,solid) var(--gv-input--bdc,var(--gv-theme-neutral-color-dark,#d9d9d9));box-sizing:border-box;border-radius:4px}.box-icon{bottom:-1px;right:-1px;z-index:1}.code .box-icon{border-radius:3px}.code .cm-content,.code .cm-gutters{height:var(--input-medium--h)}.large .code .cm-content,.large .code .cm-gutters{height:var(--input-large--h)}.small .code .cm-content,.small .code .cm-gutters{height:var(--input-small--h)}.input .cm-gutters{display:none}.input .cm-scroller{overflow:hidden}.input .cm-activeLine,:host([readonly]) .cm-activeLine{background-color:transparent}.input .cm-content{padding:0}:host([invalid]) .cm-gutters{border-color:var(--gv-theme-color-error,#da1a1b)}`]}}exports.GvCode=b,window.customElements.define("gv-code",b);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { css, html } from 'lit';
+import { EditorView, basicSetup } from '@codemirror/basic-setup';
+import { EditorState, Compartment } from '@codemirror/state';
+import { autocompletion } from '@codemirror/autocomplete';
+import { json } from '@codemirror/lang-json';
+import { languages } from '@codemirror/language-data';
+import { placeholder } from '@codemirror/view';
+import { shapeClipboard } from '../styles/shapes';
+import { dispatchCustomEvent } from '../lib/events';
+import { uuid } from '../lib/utils';
+import { classMap } from 'lit/directives/class-map';
+import { GvInput } from '../atoms/gv-input';
+import { skeleton } from '../styles/skeleton';
+import { empty } from '../styles/empty';
+import { input } from '../styles/input';
+/**
+ * Code component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-code:input - input events with the `value` on `detail`
+ * @fires gv-code:ready - event dispatch when component is ready
+ * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvCode extends GvInput {
+    static get properties() {
+        return {
+            ...super.properties,
+            options: { type: Object },
+            rows: { type: Number },
+            _error: { type: String, attribute: false },
+        };
+    }
+    constructor() {
+        super();
+        this._id = `gv-code-${uuid()}`;
+        this.value = '';
+        this.readonly = false;
+        this.autofocus = false;
+        this.clipboard = false;
+        this._clipboardIcon = shapeClipboard;
+        this.languageCompartment = new Compartment();
+        this.readonlyCompartment = new Compartment();
+        this.placeholderCompartment = new Compartment();
+    }
+    render() {
+        const classes = {
+            box: true,
+            'box-invisible': this.skeleton,
+            large: this.large,
+            medium: this.medium || (!this.large && !this.small),
+            small: this.small,
+            copied: this.hasClipboard && this._copied,
+        };
+        const inputClasses = {
+            content: true,
+            code: !this.hasInputStyle,
+            input: this.hasInputStyle,
+        };
+        return html `
+      <div class="${classMap(classes)}">
+        ${this.label ? html `<label for="code">${this.label}</label>` : ''}
+        <div id="${this._id}" class="${classMap(inputClasses)}">
+          <!-- No format please -->
+          ${this.renderIcon()}
+        </div>
+      </div>
+      ${this.description != null ? html `<div class="description" .innerHTML="${this.description}"></div>` : ''}
+    `;
+    }
+    bindInputEvents() {
+        dispatchCustomEvent(this, 'ready', { currentTarget: this });
+    }
+    get hasInputStyle() {
+        return this.rows === 1;
+    }
+    _autocomplete(completionContext) {
+        const { handler, match } = this.findBestAutocompleteHandler(completionContext);
+        return handler.run.call(this, completionContext, match);
+    }
+    findBestAutocompleteHandler(completionContext) {
+        return { handler: this.defaultCompletionHandler, match: true };
+    }
+    get defaultCompletionHandler() {
+        return {
+            run(completionContext) {
+                const language = completionContext.state.languageDataAt('autocomplete', completionContext.pos);
+                if (language.length > 0) {
+                    return language[0](completionContext);
+                }
+                return { from: completionContext.pos, options: [] };
+            },
+        };
+    }
+    _getExtensions() {
+        return [
+            basicSetup,
+            GvCode.codemirrorTheme,
+            this.languageCompartment.of(json()),
+            this.placeholderCompartment.of(placeholder(this.placeholder || '')),
+            EditorState.transactionFilter.of((tr) => (this.hasInputStyle && tr.newDoc.lines > 1 ? [] : tr)),
+            this.readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
+            EditorView.updateListener.of((viewUpdate) => {
+                if (viewUpdate.docChanged) {
+                    this.value = this._editorView.state.doc.toString();
+                    dispatchCustomEvent(this, 'input', this.value);
+                }
+            }),
+            autocompletion({
+                activateOnTyping: true,
+                override: [this._autocomplete.bind(this)],
+            }),
+            ...this.getExtensions(),
+        ];
+    }
+    getExtensions() {
+        return [];
+    }
+    getInputElement() {
+        return this.shadowRoot.querySelector(`[id=${this._id}]`);
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        this._editorState = EditorState.create({
+            doc: this.value,
+            extensions: this._getExtensions(),
+        });
+        const parent = this.getInputElement();
+        this._editorView = new EditorView({
+            root: this.shadowRoot,
+            parent,
+            state: this._editorState,
+            dispatch: (transaction) => {
+                try {
+                    this._editorView.update([transaction]);
+                }
+                catch (e) {
+                    // Sometimes the default dispatch fn throws an NS_ERROR_FAILURE at runtime.
+                    // It's so strange but with this catch everything is okay
+                }
+            },
+        });
+        parent.appendChild(this._editorView.dom);
+    }
+    async updated(properties) {
+        super.updated(properties);
+        if (properties.has('placeholder')) {
+            this._reflectPlaceholder();
+        }
+        if (properties.has('value')) {
+            this._reflectValue();
+        }
+        if (properties.has('readonly') || properties.has('disabled')) {
+            this._reflectReadonlyDisabled();
+        }
+        if (properties.has('options') && this.options) {
+            await this._reflectOptions();
+        }
+    }
+    _reflectPlaceholder() {
+        this._editorView.dispatch({
+            effects: this.placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+        });
+    }
+    _reflectValue() {
+        const transaction = this._editorState.update({
+            changes: {
+                from: 0,
+                to: this._editorState.doc.length,
+                insert: this.value,
+            },
+        });
+        this._editorState = transaction.state;
+    }
+    _reflectReadonlyDisabled() {
+        this._editorView.dispatch({
+            effects: this.readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly && !this.disabled)),
+        });
+    }
+    static async findLanguage(mode) {
+        if (mode) {
+            const modeOnly = mode.split('/').pop();
+            if (modeOnly === 'asciidoc') {
+                const [{ asciidoc }, { StreamLanguage }] = await Promise.all([
+                    import('codemirror-asciidoc/lib/asciidoc'),
+                    import('@codemirror/stream-parser'),
+                ]);
+                return {
+                    name: 'asciidoc',
+                    support: {
+                        extension: StreamLanguage.define(asciidoc),
+                    },
+                };
+            }
+            else {
+                const language = languages.find((languageDescription) => {
+                    return languageDescription.name.toUpperCase() === modeOnly.toUpperCase() || languageDescription.alias.includes(modeOnly);
+                });
+                if (language == null) {
+                    console.warn(`Cannot find language ${mode}, please use language supported by CodeMirror 6`, languages.map((l) => l.name));
+                }
+                return language;
+            }
+        }
+        return null;
+    }
+    async _reflectOptions() {
+        const language = await GvCode.findLanguage(this.options.mode);
+        if (language != null) {
+            if (language.support == null) {
+                await language.load();
+            }
+            this._editorView.dispatch({
+                effects: this.languageCompartment.reconfigure(language.support.extension),
+            });
+        }
+    }
+    static get codemirrorTheme() {
+        return EditorView.theme({
+            '&.cm-editor.cm-focused': {
+                outline: 'none',
+            },
+            '.cm-gutters': {
+                backgroundColor: 'var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5))',
+                color: 'var(--gv-theme-font-color-dark, #262626)',
+                borderLeft: '5px solid',
+                borderColor: 'var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9))',
+            },
+        });
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            skeleton,
+            empty,
+            input,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: block;
+          margin: 0 0.2rem 0.2rem 0.2rem;
+        }
+
+        .content {
+          position: relative;
+          border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          box-sizing: border-box;
+          border-radius: 4px;
+        }
+
+        .btn_copy {
+        }
+
+        .box-icon {
+          bottom: -1px;
+          right: -1px;
+          z-index: 1;
+        }
+
+        .code .box-icon {
+          border-radius: 3px;
+        }
+
+        .code .cm-content,
+        .code .cm-gutters {
+          height: var(--input-medium--h);
+        }
+
+        .large .code .cm-content,
+        .large .code .cm-gutters {
+          height: var(--input-large--h);
+        }
+
+        .small .code .cm-content,
+        .small .code .cm-gutters {
+          height: var(--input-small--h);
+        }
+
+        /**  Override Codemirror theme */
+        .input .cm-gutters {
+          display: none;
+        }
+
+        .input .cm-scroller {
+          overflow: hidden;
+        }
+
+        .input .cm-activeLine,
+        :host([readonly]) .cm-activeLine {
+          background-color: transparent;
+        }
+
+        .input .cm-content {
+          padding: 0;
+        }
+
+        :host([invalid]) .cm-gutters {
+          border-color: var(--gv-theme-color-error, #da1a1b);
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-code', GvCode);

package/src/molecules/gv-confirm.js

@@ -1 +1,175 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvConfirm=void 0;const e=require("lit");require("../atoms/gv-button"),require("../atoms/gv-icon");const t=require("../lib/i18n"),s=require("./gv-popover"),i=require("../lib/events");class o extends s.GvPopover{static get properties(){return{cancelLabel:{type:String},okLabel:{type:String},message:{type:String},icon:{type:String},danger:{type:Boolean,reflect:!0},disabled:{type:Boolean},_disabled:{type:Boolean}}}static get styles(){return[s.GvPopover.styles,e.css`:host{--gv-icon--s:24px;margin:.2rem;box-sizing:border-box}:host([danger]) .message gv-icon{--gv-icon--c:var(--gv-theme-color-danger, #ff5722)}.popover{--bgc:var(--gv-confirm--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));--maw:var(--gv-confirm--maw, 350px)}.message{display:flex;align-items:center;margin:1rem .5rem}.message gv-icon{margin-right:.5rem}.text{text-align:center;line-height:24px;width:100%}.actions{text-align:right}::slotted(*){margin:0;width:100%}`]}constructor(){super(),this.event="click",this.arrow=!0,this.auto=!0,this.icon="code:info",this.cancelLabel=(0,t.i18n)("gv-confirm.cancel"),this.okLabel=(0,t.i18n)("gv-confirm.ok")}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._closeHandler),window.addEventListener("scroll",this._closeHandler)}disconnectedCallback(){window.removeEventListener("resize",this._closeHandler),window.removeEventListener("scroll",this._closeHandler),super.disconnectedCallback()}_onCancel(){this.close(),(0,i.dispatchCustomEvent)(this,"cancel")}_onOk(){this.close(),(0,i.dispatchCustomEvent)(this,"ok")}_open(e){this._disabled||super._open(e)}renderContent(){return e.html`<div class="message">${this.icon?e.html`<gv-icon shape="${this.icon}"></gv-icon>`:""}<div class="text" .innerHTML="${this.message}"></div></div><div class="actions"><gv-button primary small outlined @click="${this._onCancel}">${this.cancelLabel}</gv-button><gv-button primary small @click="${this._onOk}">${this.okLabel}</gv-button></div>`}firstUpdated(e){super.firstUpdated(e),this.danger&&this.shadowRoot.querySelectorAll("gv-button").forEach((e=>e.setAttribute("danger",""))),this._disabled=this._calculateIsDisabled(),this.disabled&&this._reflectDisabledOnSlot()}_reflectDisabledOnSlot(){this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0}).forEach((e=>{e.disabled=!0}))}_calculateIsDisabled(){const e=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0}).filter((e=>e.nodeType===Node.ELEMENT_NODE)).some((e=>!0===Boolean(e.getAttribute("disabled"))));return this.disabled||e}}exports.GvConfirm=o,window.customElements.define("gv-confirm",o);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { css, html } from 'lit';
+import '../atoms/gv-button';
+import '../atoms/gv-icon';
+import { i18n } from '../lib/i18n';
+import { GvPopover } from './gv-popover';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Confirm component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @extends GvPopover
+ *
+ * @attr {String} event - the event that triggers the opening
+ * @attr {String} okLabel - the label of ok btn
+ * @attr {String} cancelLabel - the label of cancel btn
+ * @attr {String} icon - the icon before message
+ * @attr {String} message - the message
+ * @attr {Boolean} disabled - same as native button element `disabled` attribute
+ *
+ * @cssprop {Color} [--gv-confirm--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Length} [--gv-confirm--maw=350px] - Max width
+ */
+export class GvConfirm extends GvPopover {
+    static get properties() {
+        return {
+            /**
+             * @default i18n: gv-confirm.cancel
+             */
+            cancelLabel: { type: String },
+            /**
+             * @default i18n: gv-confirm.ok
+             */
+            okLabel: { type: String },
+            message: { type: String },
+            icon: { type: String },
+            danger: { type: Boolean, reflect: true },
+            disabled: { type: Boolean },
+            _disabled: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            GvPopover.styles,
+            // language=CSS
+            css `
+        :host {
+          --gv-icon--s: 24px;
+          margin: 0.2rem;
+          box-sizing: border-box;
+        }
+
+        :host([danger]) .message gv-icon {
+          --gv-icon--c: var(--gv-theme-color-danger, #ff5722);
+        }
+
+        .popover {
+          --bgc: var(--gv-confirm--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+          --maw: var(--gv-confirm--maw, 350px);
+        }
+
+        .message {
+          display: flex;
+          align-items: center;
+          margin: 1rem 0.5rem;
+        }
+
+        .message gv-icon {
+          margin-right: 0.5rem;
+        }
+
+        .text {
+          text-align: center;
+          line-height: 24px;
+          width: 100%;
+        }
+
+        .actions {
+          text-align: right;
+        }
+
+        ::slotted(*) {
+          margin: 0;
+          width: 100%;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.event = 'click';
+        this.arrow = true;
+        this.auto = true;
+        this.icon = 'code:info';
+        this.cancelLabel = i18n('gv-confirm.cancel');
+        this.okLabel = i18n('gv-confirm.ok');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this._closeHandler);
+        window.addEventListener('scroll', this._closeHandler);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this._closeHandler);
+        window.removeEventListener('scroll', this._closeHandler);
+        super.disconnectedCallback();
+    }
+    _onCancel() {
+        this.close();
+        dispatchCustomEvent(this, 'cancel');
+    }
+    _onOk() {
+        this.close();
+        dispatchCustomEvent(this, 'ok');
+    }
+    _open(e) {
+        if (!this._disabled) {
+            super._open(e);
+        }
+    }
+    renderContent() {
+        return html `
+      <div class="message">
+        ${this.icon ? html `<gv-icon shape="${this.icon}"></gv-icon>` : ''}
+        <div class="text" .innerHTML="${this.message}"></div>
+      </div>
+      <div class="actions">
+        <gv-button primary small outlined @click="${this._onCancel}">${this.cancelLabel}</gv-button>
+        <gv-button primary small @click="${this._onOk}">${this.okLabel}</gv-button>
+      </div>
+    `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.danger) {
+            this.shadowRoot.querySelectorAll('gv-button').forEach((btn) => btn.setAttribute('danger', ''));
+        }
+        this._disabled = this._calculateIsDisabled();
+        if (this.disabled) {
+            this._reflectDisabledOnSlot();
+        }
+    }
+    _reflectDisabledOnSlot() {
+        const slot = this.shadowRoot.querySelector('slot');
+        const childNodes = slot.assignedNodes({ flatten: true });
+        childNodes.forEach((node) => {
+            node.disabled = true;
+        });
+    }
+    _calculateIsDisabled() {
+        const slot = this.shadowRoot.querySelector('slot');
+        const childNodes = slot.assignedNodes({ flatten: true });
+        const isSlotButtonDisabled = childNodes
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+            .some((node) => Boolean(node.getAttribute('disabled')) === true);
+        return this.disabled || isSlotButtonDisabled;
+    }
+}
+window.customElements.define('gv-confirm', GvConfirm);