@patternfly/elements/pf-accordion/pf-accordion-panel.js

PatternFly Elements

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
import { css } from "lit";
const style = css `:host {
  display: none;
  position: relative;
  overflow: hidden;
  will-change: height;
  color: var(--pf-global--Color--100, #151515);
  /** Background color for accordion panel */
  background-color:
    var(
      --pf-c-accordion--BackgroundColor,
      var(--pf-global--BackgroundColor--light-100, #ffffff)
    );
}

.body {
  /** Padding for accordion panel body */
  padding:
    /** Top padding for panel content */
    var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
    /** Right padding for panel content */
    var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
    /** Bottom padding for panel content */
    var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
    /** Left padding for panel content */
    var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
}

.body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /** Before width for panel content */
  width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
  /** Background color for panel content before element */
  background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
}

:host([large]) {
  --pf-c-accordion__panel-body--PaddingTop:
    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);
  --pf-c-accordion__panel-body--PaddingRight:
    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);
  --pf-c-accordion__panel-body--PaddingBottom:
    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);
  --pf-c-accordion__panel-body--PaddingLeft:
    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);
  --pf-c-accordion__panel--FontSize:
    var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);
  --pf-c-accordion__panel--Color:
    var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515);
}

:host([large]) .body:last-child {
  --pf-c-accordion__panel-body--PaddingBottom:
    var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem);
}

.content {
  /** Font color for panel content */
  color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
  /** Font size for panel content */
  font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
}

:host([fixed]) {
  overflow-y: auto;
  /** Maximum height for panel content when fixed */
  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
}

:host([expanded]) {
  display: block;
  position: relative;
}

.content[expanded],
:host([expanded]) .content {
  /** Sidebar color for panel when expanded */
  --pf-c-accordion__panel-body--before--BackgroundColor:
    var(
      --pf-c-accordion__panel--content-body--before--BackgroundColor,
      var(--pf-global--primary-color--100, #0066cc));
}
`;
let PfAccordionPanel = class PfAccordionPanel extends LitElement {
    constructor() {
        super(...arguments);
        this.expanded = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.id || (this.id = getRandomId(this.localName));
        this.setAttribute('role', 'region');
    }
    render() {
        return html `
      <div tabindex="-1">
        <div id="container" class="content" part="container">
          <div class="body">
            <slot></slot>
          </div>
        </div>
      </div>
    `;
    }
};
PfAccordionPanel.styles = [style];
PfAccordionPanel.version = "4.2.0";
__decorate([
    property({ type: Boolean, reflect: true })
], PfAccordionPanel.prototype, "expanded", void 0);
__decorate([
    property({ reflect: true })
], PfAccordionPanel.prototype, "bordered", void 0);
PfAccordionPanel = __decorate([
    customElement('pf-accordion-panel')
], PfAccordionPanel);
export { PfAccordionPanel };
//# sourceMappingURL=pf-accordion-panel.js.map