import { __decorate } from "tslib";
import { computeLabel, isDescriptionHidden } from '@jsonforms/core';
import { html, css, when, observable, customElement, FASTElement, volatile, } from '@microsoft/fast-element';
export const ControlWrapperRendererTemplate = html `
  <template>
    ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, html `
        <div class="wrapperRoot" id=${(x) => x.control.id + x.control.uischema.scope}>
          <div for="${(x) => x.control.id + '-input'}" class="label">${(x) => x.computedLabel}</div>
          <div class="wrapper">
            <slot></slot>
          </div>
          <div class="${(x) => (x.control.errors && x.touched ? 'error' : 'description')}">
            ${(x) => x.control.errors && x.touched
    ? x.control.errors
    : x.showDescription
        ? x.control.description
        : ''}
          </div>
        </div>
      `)}
  </template>
`;
const styles = css `
  .wrapperRoot {
    margin-bottom: 20px;
  }

  .label {
    color: rgb(135, 155, 166);
    font-family: Roboto-Medium, sans-serif;
    font-style: normal;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
  }

  .error {
    font-size: 12px;
    color: #f9644d;
    margin-left: 10px;
  }

  .wrapper {
    display: flex;
    width: 100%;
  }
`;
let ControlWrapper = class ControlWrapper extends FASTElement {
    get showDescription() {
        return !isDescriptionHidden(this.control.visible, this.control.description, this.control.isFocused, !!this.control.config.showUnfocusedDescription);
    }
    get computedLabel() {
        return computeLabel(this.control.label, this.control.required, !!this.control.config.hideRequiredAsterisk);
    }
};
__decorate([
    observable
], ControlWrapper.prototype, "control", void 0);
__decorate([
    observable
], ControlWrapper.prototype, "touched", void 0);
__decorate([
    volatile
], ControlWrapper.prototype, "showDescription", null);
__decorate([
    volatile
], ControlWrapper.prototype, "computedLabel", null);
ControlWrapper = __decorate([
    customElement({
        name: 'control-wrapper',
        styles,
        template: ControlWrapperRendererTemplate,
    })
], ControlWrapper);
export { ControlWrapper };
//# sourceMappingURL=ControlWrapperRenderer.js.map