import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import './es.object.to-string-5a59fbfc.js';
import './es.regexp.to-string-784af81c.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import './classof-b10e7604.js';
import './export-ecf4b1cb.js';
import './regexp-flags-b5fc4ddb.js';
import './es.array.includes-1f433385.js';
import './object-keys-a5d351f7.js';
import './es.array.concat-9f3136dc.js';
import './array-species-create-afb281e6.js';
import './create-property-c00b5c27.js';
import './array-method-has-species-support-d96108b0.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';

//
var script = {
  name: 'BaseExpandRow',
  components: {
    BaseIcon: BaseIcon
  },
  props: {
    /**
     * specify if box is expandable
     */
    expandable: {
      type: Boolean,
      default: true
    },

    /**
     * Title of the row.
     */
    title: {
      type: String,
      default: ''
    },

    /**
     * Optional subtitle of the row.
     */
    subtitle: {
      type: String,
      default: ''
    },

    /**
     * Lets you optionally specify an icon that is displayed before the title.
     * For valid values, see [BaseIcon](#baseicon).
     */
    icon: {
      type: String,
      default: ''
    },

    /**
     * set the background of collapsed expand-row-body
     */
    bodyHasBackground: {
      type: Boolean,
      default: true
    },

    /**
     * Set this to **true** if the row should be in expanded state.
     */
    isExpanded: {
      type: Boolean,
      default: false
    },

    /**
     * Lets you specify if the row is selectable. If **true**, a check box appears
     * on the left side. The *isSelected* prop determines whether the check box is
     * actually selected or not.
     */
    isSelectable: {
      type: Boolean,
      default: false
    },

    /**
     * Lets you specify if the row is currently selected.
     */
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      id: null,
      isExpandedInternal: false,
      isSelectedInternal: false
    };
  },
  computed: {
    hasIconSlot: function hasIconSlot() {
      return !!this.$slots.icon;
    }
  },
  watch: {
    /**
     * watch for expanded/collapsed state changes from outside
     * @param {boolean} val - the prop value set from outside
     */
    isExpanded: function isExpanded(val) {
      this.isExpandedInternal = val;
    },

    /**
     * watch for select state changes from outside
     * @param {boolean} val - the prop value set from outside
     */
    isSelected: function isSelected(val) {
      this.isSelectedInternal = val;
    }
  },
  created: function created() {
    // eslint-disable-next-line
    this.id = this._uid;
    this.isSelectedInternal = this.isSelected;
    this.isExpandedInternal = this.isExpanded;
  },
  methods: {
    clicked: function clicked() {
      this.isExpandedInternal = !this.isExpandedInternal;
      /**
       * Event triggered when the row is expanded or collapsed.
       * The payload value `true` indicates expanded state, `false` indicates collapsed state.
       *
       * @event expanded
       * @type {Boolean}
       */

      this.$emit('expanded', this.isExpandedInternal);
    },
    checkboxClicked: function checkboxClicked() {
      this.isSelectedInternal = !this.isSelectedInternal;
      /**
       * Event triggered when the *check box* is clicked; this is applicable
       * only if the row is selectable and thus has a check box.
       * The payload indicates the selected state (true or false).
       *
       * @event selected
       * @type {Boolean}
       */

      this.$emit('selected', this.isSelectedInternal);
    }
  }
};

var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    class: ['base-expand-row', {
      'base-expand-row--expandable': _vm.expandable
    }, {
      'base-expand-row--expanded': _vm.isExpandedInternal
    }]
  }, [_c('div', {
    staticClass: "base-expand-row-header",
    attrs: {
      "id": 'base-expand-row-' + _vm.id,
      "aria-expanded": _vm.expandable ? _vm.isExpandedInternal.toString() : null
    }
  }, [_vm.isSelectable ? _c('base-checkmark', {
    key: _vm.id + 'checkmark',
    staticClass: "base-expand-row-checkbox",
    attrs: {
      "title": "checkbox",
      "mark-style": "checkbox",
      "checked": _vm.isSelected
    },
    on: {
      "clicked": _vm.checkboxClicked
    }
  }) : _vm._e(), _vm._v(" "), _c(_vm.expandable ? 'button' : 'div', {
    tag: "component",
    class: ['base-expand-row-button', {
      'selectable': _vm.isSelectable
    }],
    attrs: {
      "type": _vm.expandable ? 'button' : null
    },
    on: {
      "click": function click($event) {
        _vm.expandable ? _vm.clicked() : null;
      }
    }
  }, [_vm.icon || _vm.hasIconSlot ? _c('div', {
    staticClass: "base-expand-row-icon"
  }, [_vm._t("icon", function () {
    return [_c('base-icon', {
      attrs: {
        "name": _vm.icon,
        "title": "open"
      }
    })];
  })], 2) : _vm._e(), _vm._v(" "), _c('div', {
    staticClass: "base-expand-row-title-subtitle-wrapper"
  }, [_c('div', {
    staticClass: "base-expand-row-title base-text-fade-out"
  }, [_vm._v("\n          " + _vm._s(_vm.title) + "\n        ")]), _vm._v(" "), _vm.subtitle ? _c('div', {
    staticClass: "base-expand-row-subtitle base-text-fade-out"
  }, [_vm._v("\n          " + _vm._s(_vm.subtitle) + "\n        ")]) : _vm._e()]), _vm._v(" "), _vm.expandable ? _c('base-icon', {
    staticClass: "base-expand-row-collapse-icon",
    attrs: {
      "name": "drop-down",
      "title": "open"
    }
  }) : _vm._e()], 1)], 1), _vm._v(" "), _c('div', {
    class: ['base-expand-row-body', {
      'base-expand-row-body-bg': _vm.bodyHasBackground
    }],
    attrs: {
      "role": "region",
      "aria-labelledby": 'base-expand-row-' + _vm.id,
      "aria-hidden": !_vm.isExpandedInternal ? 'true' : 'false'
    }
  }, [_vm._t("default")], 2)]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-210b44d2";
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseExpandRow = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseExpandRow);
  }
};
use(Plugin);

export { BaseExpandRow, Plugin as default };
