@hashicorp/design-system-components
Version:
Helios Design System Components
142 lines (139 loc) • 6.17 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { hash } from '@ember/helper';
import { modifier } from 'ember-modifier';
import { or } from 'ember-truth-helpers';
import { tracked } from '@glimmer/tracking';
import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
import HdsCodeEditorModifier from '../../../modifiers/hds-code-editor.js';
import HdsCodeEditorDescription from './description.js';
import HdsCodeEditorFullScreenButton from './full-screen-button.js';
import HdsCodeEditorGeneric from './generic.js';
import HdsCodeEditorTitle from './title.js';
import HdsCopyButton from '../copy/button/index.js';
import HdsIcon from '../icon/index.js';
import HdsTHelper from '../../../helpers/hds-t.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
class HdsCodeEditor extends Component {
static {
g(this.prototype, "_isFullScreen", [tracked], function () {
return false;
});
}
#_isFullScreen = (i(this, "_isFullScreen"), void 0);
static {
g(this.prototype, "_isSetupComplete", [tracked], function () {
return false;
});
}
#_isSetupComplete = (i(this, "_isSetupComplete"), void 0);
static {
g(this.prototype, "_value", [tracked]);
}
#_value = (i(this, "_value"), void 0);
static {
g(this.prototype, "_titleId", [tracked]);
}
#_titleId = (i(this, "_titleId"), void 0);
static {
g(this.prototype, "_descriptionId", [tracked]);
}
#_descriptionId = (i(this, "_descriptionId"), void 0);
_id = guidFor(this);
_handleEscape = modifier(() => {
const handleKeyDown = event => {
if (event.key !== 'Escape' || !this._isFullScreen) {
return;
}
this.toggleFullScreen();
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
});
constructor(owner, args) {
super(owner, args);
if (args.value) {
this._value = args.value;
}
}
get ariaLabelledBy() {
if (this.args.ariaLabel !== undefined) {
return;
}
return this.args.ariaLabelledBy ?? this._titleId;
}
get ariaDescribedBy() {
return this.args.ariaDescribedBy ?? this._descriptionId;
}
get hasActions() {
return (this.args.hasCopyButton || this.args.hasFullScreenButton) ?? false;
}
get isStandalone() {
return this.args.isStandalone ?? true;
}
get classNames() {
// Currently there is only one theme so the class name is hard-coded.
// In the future, additional themes such as a "light" theme could be added.
const classes = ['hds-code-editor', 'hds-code-editor--theme-dark'];
if (this._isFullScreen) {
classes.push('hds-code-editor--is-full-screen');
}
if (this.isStandalone) {
classes.push('hds-code-editor--is-standalone');
}
return classes.join(' ');
}
get copyButtonText() {
return this.args.copyButtonText ? this.args.copyButtonText : 'Copy';
}
registerTitleElement = element => {
this._titleId = element.id;
};
registerDescriptionElement = element => {
this._descriptionId = element.id;
};
toggleFullScreen = () => {
this._isFullScreen = !this._isFullScreen;
};
onInput = (newValue, editorView) => {
this._value = newValue;
this.args.onInput?.(newValue, editorView);
};
onKeyDown = event => {
if (event.key === 'Escape' && this._isFullScreen) {
this.toggleFullScreen();
}
};
onSetup = editorView => {
this._isSetupComplete = true;
this.args.onSetup?.(editorView);
};
static {
setComponentTemplate(precompileTemplate("<div id={{this._id}} class={{this.classNames}} {{focusTrap isActive=this._isFullScreen}} {{this._handleEscape}} ...attributes>\n {{!-- header --}}\n {{#if (or this.hasActions (has-block))}}\n <div class=\"hds-code-editor__header\">\n <div class=\"hds-code-editor__header-content\">\n {{yield (hash Title=(component HdsCodeEditorTitle editorId=this._id onInsert=this.registerTitleElement) Description=(component HdsCodeEditorDescription editorId=this._id onInsert=this.registerDescriptionElement) Generic=HdsCodeEditorGeneric)}}\n </div>\n\n {{#if this.hasActions}}\n <div class=\"hds-code-editor__header-actions\">\n {{#if @hasCopyButton}}\n <HdsCopyButton class=\"hds-code-editor__button hds-code-editor__copy-button\" @isIconOnly={{true}} @size=\"small\" @text={{this.copyButtonText}} @textToCopy={{this._value}} />\n {{/if}}\n {{#if @hasFullScreenButton}}\n <HdsCodeEditorFullScreenButton @isFullScreen={{this._isFullScreen}} @onToggleFullScreen={{this.toggleFullScreen}} />\n {{/if}}\n </div>\n {{/if}}\n </div>\n {{/if}}\n\n {{!-- editor --}}\n <div class=\"hds-code-editor__editor\" {{hdsCodeEditorModifier ariaDescribedBy=this.ariaDescribedBy ariaLabel=@ariaLabel ariaLabelledBy=this.ariaLabelledBy customExtensions=@customExtensions cspNonce=@cspNonce extraKeys=@extraKeys hasLineWrapping=@hasLineWrapping isLintingEnabled=@isLintingEnabled language=@language value=@value onBlur=@onBlur onInput=this.onInput onSetup=this.onSetup onLint=@onLint}} />\n\n {{!-- loader --}}\n {{#unless this._isSetupComplete}}\n <div class=\"hds-code-editor__loader\" aria-live=\"polite\" role=\"status\">\n <HdsIcon @name=\"loading\" @size=\"24\" />\n <span class=\"sr-only\">{{hdsT \"hds.components.common.loading\" default=\"Loading\"}}</span>\n </div>\n {{/unless}}\n</div>", {
strictMode: true,
scope: () => ({
focusTrap,
or,
hash,
HdsCodeEditorTitle,
HdsCodeEditorDescription,
HdsCodeEditorGeneric,
HdsCopyButton,
HdsCodeEditorFullScreenButton,
hdsCodeEditorModifier: HdsCodeEditorModifier,
HdsIcon,
hdsT: HdsTHelper
})
}), this);
}
}
export { HdsCodeEditor as default };
//# sourceMappingURL=index.js.map