import { r as t, c as e, h as i, H as s, a as o } from "./p-9b9ccd0c.js";

import { L as r } from "./p-311eedf3.js";

import { c as l } from "./p-c5196b3b.js";

const a = ":host{display:grid;block-size:100%}.opacity-0{opacity:0}.gxi-hidden{display:none !important}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-style-regular);font-size:var(--font-size-body-m);font-family:var(--font-family-body);height:100%;display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.buttons-container{display:flex;gap:var(--spacing-gap-m)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));padding-inline:var(--spacing-padding-m);color:var(--color-text-neutral-default);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-weight:var(--font-style-regular);border-radius:4px;min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none;inline-size:max-content}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-m)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}.tree-view::part(item__header){--icon__system_warning_warning--disabled:var(\n    --icon__system_warning_warning--enabled\n  )}.tabular-grid{--focus-outline-width:1px}:host{display:block}.roles__container{display:grid;block-size:100%;box-sizing:border-box;grid-template-columns:1fr 1fr;gap:var(--spacing-gap-l)}.roles__role{display:grid;grid-template-rows:auto 1fr;overflow:auto}.roles__list{display:flex;flex-direction:column;block-size:100%;overflow:auto}.roles__list-header{display:grid;grid-template-rows:auto 1fr;gap:var(--spacing-gap-m)}.roles__list-title{background-color:var(--color-accent-surface-elevation-1);display:flex;align-items:center;justify-content:center}.add-remove-buttons{display:flex;justify-content:space-between}";

const n = class {
  constructor(s) {
    t(this, s);
    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
    this.renderedFirstTime = false;
    // 7.LISTENERS //
    // 8.PUBLIC METHODS API //
    // 9.LOCAL METHODS //
        this.confirmCallbackHandler = () => {
      this.confirmCallback(this.assignedRolesState);
    };
    this.cancelCallbackHandler = () => {
      this.cancelCallback();
    };
    this.handleAssignedCheckedChange = t => {
      this.assignedSelected = t.detail[0] && t.detail[0].checked === true;
    };
    this.handleUnassignedCheckedChange = t => {
      this.unassignedSelected = t.detail[0] && t.detail[0].checked === true;
    };
    this.handleUnassignedInput = t => {
      this.filterUnassignedInput = t.detail;
    };
    this.handleAssignedInput = t => {
      this.filterAssignedInput = t.detail;
    };
    this.getCheckedItems = t => {
      const e = [];
      const i = t.querySelectorAll("gxg-list-box-item");
      i.forEach((t => {
        if (t.checked) {
          e.push(t.value);
        }
      }));
      return e;
    };
    this.addAll = () => {
      this.assignedRolesState = [ ...this.assignedRolesState, ...this.unassignedRolesState ];
      this.unassignedRolesState = [];
    };
    this.addSelectedRoles = () => {
      const t = this.getCheckedItems(this.unassignedRolesEL);
      if (t.length) {
        this.unassignedRolesState = this.unassignedRolesState.filter((e => !t.includes(e)));
        this.assignedRolesState = [ ...this.assignedRolesState, ...t ];
        this.unassignedSelected = false;
      }
    };
    this.removeAll = () => {
      this.unassignedRolesState = [ ...this.unassignedRolesState, ...this.assignedRolesState ];
      this.assignedRolesState = [];
    };
    this.removeSelectedRoles = () => {
      const t = this.getCheckedItems(this.assignedRolesEl);
      if (t.length) {
        this.assignedRolesState = this.assignedRolesState.filter((e => !t.includes(e)));
        this.unassignedRolesState = [ ...this.unassignedRolesState, ...t ];
        this.assignedSelected = false;
      }
    };
    this.renderRolesToAdd = () => i("div", {
      class: "roles__list"
    }, i("gxg-list-box", {
      checkboxes: true,
      disabled: false,
      part: "add-roles-selection",
      onCheckedChanged: this.handleUnassignedCheckedChange,
      ref: t => this.unassignedRolesEL = t,
      noBorder: true,
      borderBottom: true,
      borderStart: true,
      borderEnd: true
    }, this.unassignedRolesState.filter((t => this.filterUnassignedInput.toLowerCase() === "" || t.toLowerCase().includes(this.filterUnassignedInput.toLowerCase()))).map((t => i("gxg-list-box-item", {
      value: t,
      checkbox: true,
      key: `${t}-${this.assignedRolesState.includes(t) ? "assigned" : "unassigned"}`
    }, t)))));
    this.renderRolesToRemove = () => i("div", {
      class: "roles__list"
    }, i("gxg-list-box", {
      checkboxes: true,
      disabled: false,
      part: "remove-roles-selection",
      onCheckedChanged: this.handleAssignedCheckedChange,
      ref: t => this.assignedRolesEl = t,
      noBorder: true,
      borderBottom: true,
      borderStart: true,
      borderEnd: true
    }, this.assignedRolesState.filter((t => this.filterAssignedInput.toLowerCase() === "" || t.toLowerCase().includes(this.filterAssignedInput.toLowerCase()))).map((t => i("gxg-list-box-item", {
      value: t,
      checkbox: true,
      key: `${t}-${this.assignedRolesState.includes(t) ? "assigned" : "unassigned"}`
    }, t)))));
    this.unassignedRolesState = [];
    this.assignedRolesState = [];
    this.filterUnassignedInput = "";
    this.filterAssignedInput = "";
    this.unassignedSelected = false;
    this.assignedSelected = false;
    this.displayTitle = false;
    this.roles = undefined;
    this.assignedRoles = undefined;
    this.confirmCallback = undefined;
    this.cancelCallback = undefined;
  }
  // 6.COMPONENT LIFECYCLE METHODS //
  async componentWillLoad() {
    this._componentLocale = await r.getComponentStrings(this.el);
    this.unassignedRolesState = this.roles.filter((t => !this.assignedRoles.includes(t)));
    this.assignedRolesState = this.assignedRoles;
  }
  componentDidRender() {
    if (!this.renderedFirstTime) {
      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
      this.renderedFirstTime = true;
    }
  }
  // 10.RENDER() FUNCTION //
  render() {
    return i(s, {
      class: "gx-ide-component"
    }, i("div", {
      class: "gx-ide-main-wrapper"
    }, i("gx-ide-container", {
      noAboveFooterPadding: true,
      slimmerFooter: l.gxIdeContainer.slimmerFooter
    }, i("div", {
      class: "roles__container"
    }, i("section", {
      class: "roles__role"
    }, i("header", {
      class: "roles__list-header"
    }, i("gxg-form-text", {
      label: this._componentLocale.main.assignRoles.searchRoles,
      placeholder: this._componentLocale.main.assignRoles.placeholder,
      labelPosition: "above",
      clearButton: true,
      part: "add-roles-filter",
      class: {
        "add-roles-filter": true
      },
      onInput: this.handleUnassignedInput
    }), i("div", {
      class: "roles__list-title"
    }, i("gxg-title", {
      type: "title-04"
    }, this._componentLocale.main.assignRoles.title), i("gxg-icon", {
      type: "navigation/chevron-right",
      color: "mercury-neutral"
    }))), this.renderRolesToAdd()), i("section", {
      class: "roles__role"
    }, i("header", {
      class: "roles__list-header"
    }, i("gxg-form-text", {
      label: this._componentLocale.main.removeRoles.searchRoles,
      placeholder: this._componentLocale.main.removeRoles.placeholder,
      labelPosition: "above",
      clearButton: true,
      part: "remove-roles-filter",
      class: {
        "remove-roles-filter": true
      },
      onInput: this.handleAssignedInput
    }), i("div", {
      class: "roles__list-title"
    }, i("gxg-icon", {
      type: "navigation/chevron-left",
      color: "mercury-neutral"
    }), i("gxg-title", {
      type: "title-04"
    }, this._componentLocale.main.removeRoles.title))), this.renderRolesToRemove())), i("footer", {
      class: "add-remove-buttons",
      slot: "footer-above"
    }, i("footer", {
      class: "add-remove-buttons__add"
    }, i("gxg-button", {
      id: "add-all",
      part: "add-all-roles-btn",
      onClick: this.addAll,
      disabled: this.unassignedRolesState.length === 0,
      type: "secondary-text-only"
    }, this._componentLocale.main.assignRoles.addAllButton), i("gxg-button", {
      id: "add-selected",
      part: "add-selected-roles-btn",
      onClick: this.addSelectedRoles,
      disabled: !this.unassignedSelected || !this.unassignedRolesState.length,
      type: "secondary-text-only"
    }, this._componentLocale.main.assignRoles.addSelectedButton)), i("footer", {
      class: "add-remove-buttons__remove"
    }, i("gxg-button", {
      id: "add-all",
      part: "remove-all-roles-btn",
      onClick: this.removeAll,
      disabled: this.assignedRolesState.length === 0,
      type: "secondary-text-only"
    }, this._componentLocale.main.removeRoles.removeAllButton), i("gxg-button", {
      id: "add-selected",
      part: "remove-selected-roles-btn",
      onClick: this.removeSelectedRoles,
      disabled: !this.assignedSelected || !this.assignedRolesState.length,
      type: "secondary-text-only"
    }, this._componentLocale.main.removeRoles.removeSelectedButton))), i("gxg-button", {
      type: "outlined",
      slot: "footer-end",
      onClick: this.cancelCallbackHandler
    }, this._componentLocale.footer.cancelButton), i("gxg-button", {
      slot: "footer-end",
      onClick: this.confirmCallbackHandler
    }, this._componentLocale.footer.confirmButton))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/bpm-assign-roles" ];
  }
  get el() {
    return o(this);
  }
};

n.style = a;

export { n as gx_ide_bpm_assign_roles };
//# sourceMappingURL=p-886dc9c1.entry.js.map