import{LitElement as e,html as t,css as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{iconRemixArrowDownSLine as i}from"./assets/cc-remix.icons.js";import{hasSlottedChildren as r}from"./directives/has-slotted-children.js";import{isStringEmpty as s}from"./lib/utils.js";import"./cc-button.js";import"./cc-expand.js";import"./cc-icon.js";import"./cc-img.js";import{CcToggleEvent as a}from"./components/common.events.js";class l extends e{static get properties(){return{icon:{type:Object},image:{type:String},ribbon:{type:String,reflect:!0},toggle:{type:String,reflect:!0}}}constructor(){super(),this.icon=null,this.image=null,this.ribbon=null,this.toggle="off"}_onClickToggle(){"close"===this.toggle?this.toggle="open":"open"===this.toggle&&(this.toggle="close"),this.dispatchEvent(new a({isOpen:"open"===this.toggle}))}render(){const e="open"===this.toggle||"close"===this.toggle,o="open"===this.toggle,a=e&&!o;return t`
      <div class="container" ${r()}>
        <div class="ribbon">
          <slot name="ribbon">
            ${s(this.ribbon)?"":t` <div class="info-ribbon">${this.ribbon}</div> `}
          </slot>
        </div>

        ${e?t`
              <button
                class="toggle-button"
                aria-expanded=${o}
                aria-controls="content-and-footer"
                @click=${this._onClickToggle}
              >
                ${this._renderHeader()}
                <cc-icon class="toggle-icon" .icon=${i} size="xl"></cc-icon>
              </button>
            `:this._renderHeader()}
        <div id="content-and-footer" class="${n({hidden:a})}">
          <slot name="content">
            <div class="content">
              <div class="content-header">
                <slot name="content-header"></slot>
              </div>
              <cc-expand class="content-body">
                <slot name="content-body"></slot>
              </cc-expand>
              <div class="content-footer">
                <slot name="content-footer"></slot>
              </div>
            </div>
          </slot>

          <slot name="footer">
            <div class="footer">
              <div class="footer-left">
                <slot name="footer-left"></slot>
              </div>
              <div class="footer-right">
                <slot name="footer-right"></slot>
              </div>
            </div>
          </slot>
        </div>
      </div>
    `}_renderHeader(){const e=null!=this.image||null!=this.icon;return t`
      <slot name="header">
        <div class="header">
          <div class="header-icon ${n({"has-image-or-icon":e})}">
            ${null==this.image&&null==this.icon?t` <slot name="header-icon"></slot> `:""}
            ${null!=this.image&&null==this.icon?t` <cc-img class="header-img" src="${this.image}"></cc-img> `:""}
            ${null!=this.icon?t` <cc-icon size="lg" .icon="${this.icon}"></cc-icon> `:""}
          </div>
          <div class="header-title">
            <slot name="header-title"></slot>
          </div>
          <div class="header-right">
            <slot name="header-right"></slot>
          </div>
        </div>
      </slot>
    `}static get styles(){return[o`
        :host {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          display: block;
          overflow: hidden;
          position: relative;
        }

        .container {
          display: grid;
          gap: 0.5em;
          padding-block: 1em;

          --left-space: 1em;
        }

        .container[ribbon-is-slotted],
        :host([ribbon]:not([ribbon=''])) .container {
          --left-space: 3.5em;
        }

        .ribbon {
          display: none;
        }

        .container[ribbon-is-slotted] .ribbon,
        :host([ribbon]:not([ribbon=''])) .ribbon {
          background: var(--cc-color-bg-strong);
          color: white;
          display: inherit;
          font-size: 0.9em;
          font-weight: bold;
          height: var(--height);
          left: calc(var(--width) / -2);
          line-height: var(--height);
          position: absolute;
          text-align: center;
          top: calc(var(--height) / -2);
          transform: rotate(var(--r)) translateY(var(--translate));
          width: var(--width);
          z-index: 2;

          --height: 1.5em;
          --width: 8em;
          --r: -45deg;
          --translate: 1.6em;
        }

        /* region header */

        .header {
          align-items: center;
          color: var(--cc-color-text-primary-strongest);
          display: none;
          padding: 1em 1em 1em var(--left-space);
        }

        .container[header-is-slotted] .header,
        .container[header-title-is-slotted] .header,
        .container[header-right-is-slotted] .header,
        .container[header-icon-is-slotted] .header {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        .container[header-is-slotted],
        .container[header-title-is-slotted],
        .container[header-right-is-slotted] {
          padding-top: 0;
        }

        ::slotted([slot='header']) {
          padding: 1em 1em 1em var(--left-space);
        }

        .header-icon {
          display: none;
        }

        .container[header-icon-is-slotted] .header-icon,
        .has-image-or-icon.header-icon {
          display: flex;
        }

        .header-img,
        ::slotted([slot='header-icon']) {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 1.5em;
          width: 1.5em;
        }

        .header-title {
          flex: 1 1 0;
        }

        ::slotted([slot='header-title']) {
          color: var(--cc-color-text-primary-strongest);
          font-size: 1.2em;
          font-weight: bold;
        }

        .container[header-right-is-slotted] .header-right {
          display: inline-block;
        }

        .toggle-button {
          --cc-icon-color: var(--cc-color-text-primary-strongest);

          align-items: center;
          background-color: transparent;
          border: 0;
          display: flex;
          font-family: inherit;
          font-size: 1em;
          justify-content: space-between;
          padding: 0 1em 0 0;
          text-align: start;
        }

        .toggle-icon {
          transition: transform 0.3s ease-out;
        }

        .toggle-button[aria-expanded='true'] .toggle-icon {
          transform: rotate(0.5turn);
        }

        .toggle-button:hover {
          background-color: var(--cc-color-bg-neutral-hovered);
        }

        .toggle-button:hover .toggle-icon {
          transform: rotate(0.25turn);
        }

        /* endregion */

        /* region content */

        .content {
          display: none;
          gap: 1em;
        }

        ::slotted([slot='content']) {
          padding-left: var(--left-space);
          padding-right: 1em;
        }

        .container[content-is-slotted] .content,
        .container[content-header-is-slotted] .content,
        .container[content-body-is-slotted] .content,
        .container[content-footer-is-slotted] .content {
          display: grid;
          gap: 1em;
        }

        .content-header,
        .content-body,
        .content-footer {
          display: none;
          padding: 0 1em 0 var(--left-space);
        }

        .container[content-header-is-slotted] .content-header,
        .container[content-body-is-slotted] .content-body,
        .container[content-footer-is-slotted] .content-footer {
          display: block;
        }

        .content-body {
          margin-block: -0.5em;
          padding-block: 0.5em;
        }

        slot[name='content-body'] {
          display: grid;
          gap: 1em;
        }

        #content-and-footer {
          display: grid;
          gap: 1em;
        }

        #content-and-footer.hidden {
          display: none;
        }

        /* endregion */

        /* region footer */

        .footer {
          align-items: center;
          background-color: var(--cc-color-bg-neutral);
          box-shadow: inset 0 6px 6px -6px rgb(0 0 0 / 40%);
          display: none;
          flex-wrap: wrap;
          gap: 1em;
          /* TODO doc */
          justify-content: flex-end;
          padding: 0.5em 1em;
        }

        .footer-left {
          flex: 1 1 0;
        }

        .footer-left,
        .footer-right {
          display: none;
        }

        .container[footer-is-slotted],
        .container[footer-left-is-slotted],
        .container[footer-right-is-slotted],
        :host([toggle='close']) .container {
          padding-bottom: 0;
        }

        .container[footer-is-slotted] .footer,
        .container[footer-left-is-slotted] .footer,
        .container[footer-right-is-slotted] .footer {
          display: flex;
        }

        .container[footer-left-is-slotted] .footer-left,
        .container[footer-right-is-slotted] .footer-right {
          display: block;
        }

        ::slotted([slot='footer']) {
          padding: 0.5em 1em;
        }

        /* endregion */
      `]}}window.customElements.define("cc-block",l);export{l as CcBlock};
//# sourceMappingURL=cc-block.js.map
