@patternfly/elements 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/pf-panel/pf-panel.css +12 -4
- package/pf-panel/pf-panel.js +1 -1
- package/pfe.min.js +1 -1
- package/pfe.min.js.map +1 -1
package/package.json
CHANGED
package/pf-panel/pf-panel.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--pf-c-panel--before--BorderWidth: 0;
|
|
10
10
|
--pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
|
|
11
11
|
--pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
|
|
12
|
-
--pf-c-panel--m-raised--BoxShadow:
|
|
12
|
+
--pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
|
|
13
13
|
--pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);
|
|
14
14
|
--pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);
|
|
15
15
|
--pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
max-width: var(--pf-c-panel--MaxWidth);
|
|
37
37
|
background-color: var(--pf-c-panel--BackgroundColor);
|
|
38
38
|
box-shadow: var(--pf-c-panel--BoxShadow);
|
|
39
|
+
display: block;
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
:host([variant="bordered"])::before {
|
|
@@ -44,14 +45,21 @@
|
|
|
44
45
|
pointer-events: none;
|
|
45
46
|
content: "";
|
|
46
47
|
border:
|
|
47
|
-
|
|
48
|
-
var(--pf-c-panel--m-bordered--before--BorderWidth,
|
|
49
|
-
var(--pf-global--BorderWidth--sm, 1px)))
|
|
48
|
+
var(--pf-c-panel--m-bordered--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
|
|
50
49
|
solid
|
|
51
50
|
var(--pf-c-panel--before--BorderColor,
|
|
52
51
|
var(--pf-global--BorderColor--100, #d2d2d2));
|
|
53
52
|
}
|
|
54
53
|
|
|
54
|
+
:host([variant="raised"])::before {
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
content: "";
|
|
59
|
+
box-shadow: var(--pf-c-panel--m-raised--BoxShadow, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
|
|
60
|
+
z-index: var(--pf-c-panel--m-raised--ZIndex, var(--pf-global--ZIndex--sm, 200));
|
|
61
|
+
}
|
|
62
|
+
|
|
55
63
|
:host([variant="raised"]) {
|
|
56
64
|
--pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,
|
|
57
65
|
var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
|
package/pf-panel/pf-panel.js
CHANGED
|
@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
|
|
|
5
5
|
import { property } from 'lit/decorators/property.js';
|
|
6
6
|
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
|
|
7
7
|
import { css } from "lit";
|
|
8
|
-
const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:
|
|
8
|
+
const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));--pf-c-panel--m-raised--ZIndex:var(--pf-global--ZIndex--sm, 200);--pf-c-panel__header--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main--MaxHeight:none;--pf-c-panel__main--Overflow:visible;--pf-c-panel__main-body--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--BoxShadow:none;--pf-c-panel--m-scrollable__main--MaxHeight:18.75rem;--pf-c-panel--m-scrollable__main--Overflow:auto;--pf-c-panel--m-scrollable__footer--BoxShadow:0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);position:relative;z-index:var(--pf-c-panel--ZIndex);width:var(--pf-c-panel--Width);min-width:var(--pf-c-panel--MinWidth);max-width:var(--pf-c-panel--MaxWidth);background-color:var(--pf-c-panel--BackgroundColor);box-shadow:var(--pf-c-panel--BoxShadow);display:block}:host([variant=bordered])::before{position:absolute;inset:0;pointer-events:none;content:"";border:var(--pf-c-panel--m-bordered--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-panel--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([variant=raised])::before{position:absolute;inset:0;pointer-events:none;content:"";box-shadow:var(--pf-c-panel--m-raised--BoxShadow,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06));z-index:var(--pf-c-panel--m-raised--ZIndex,var(--pf-global--ZIndex--sm,200))}:host([variant=raised]){--pf-c-panel--BoxShadow:var(--pf-c-panel--m-raised--BoxShadow,\n var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));--pf-c-panel--ZIndex:var(--pf-c-panel--m-raised--ZIndex,\n var(--pf-global--ZIndex--sm, 200))}:host([scrollable]){--pf-c-panel__main--MaxHeight:var(--pf-c-panel--m-scrollable__main--MaxHeight);--pf-c-panel__main--Overflow:var(--pf-c-panel--m-scrollable__main--Overflow);--pf-c-panel__footer--BoxShadow:var(--pf-c-panel--m-scrollable__footer--BoxShadow)}[hidden]{display:none!important}slot{display:block}slot:not([name]){max-height:var(--pf-c-panel__main--MaxHeight);overflow:var(--pf-c-panel__main--Overflow);padding:var(--pf-c-panel__main-body--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}slot[name=header]{padding:var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft)}slot[name=footer]{padding:var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);box-shadow:var(--pf-c-panel__footer--BoxShadow)}hr{--pf-c-divider--BorderWidth--base:var(--pf-global--BorderWidth--sm, 1px);--pf-c-divider--BorderColor--base:var(--pf-c-divider--BackgroundColor);--pf-c-divider--Height:var(--pf-c-divider--BorderWidth--base);--pf-c-divider--BackgroundColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-divider--after--BackgroundColor:var(--pf-c-divider--BorderColor--base);--pf-c-divider--after--FlexBasis:100%;--pf-c-divider--after--Inset:0%;--pf-c-divider--m-vertical--after--FlexBasis:100%;--pf-c-divider--m-horizontal--Display:flex;--pf-c-divider--m-horizontal--FlexDirection:row;--pf-c-divider--m-horizontal--after--Height:var(--pf-c-divider--Height);--pf-c-divider--m-horizontal--after--Width:auto;--pf-c-divider--m-vertical--Display:inline-flex;--pf-c-divider--m-vertical--FlexDirection:column;--pf-c-divider--m-vertical--after--Height:auto;--pf-c-divider--m-vertical--after--Width:var(--pf-c-divider--BorderWidth--base);--pf-hidden-visible--visible--Display:var(--pf-c-divider--Display);--pf-c-divider--Display:var(--pf-c-divider--m-horizontal--Display);--pf-c-divider--FlexDirection:var(--pf-c-divider--m-horizontal--FlexDirection);--pf-c-divider--after--Width:var(--pf-c-divider--m-horizontal--after--Width);--pf-c-divider--after--Height:var(--pf-c-divider--m-horizontal--after--Height);width:100%;height:auto;display:var(--pf-c-divider--Display);flex-direction:var(--pf-c-divider--FlexDirection);align-items:center;align-self:stretch;flex-shrink:0;justify-content:center;border:0}hr::after{align-self:stretch;width:var(--pf-c-divider--after--Width);height:var(--pf-c-divider--after--Height);content:"";background-color:var(--pf-c-divider--after--BackgroundColor);justify-self:center;padding:0;margin:0;flex-basis:calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2)}::slotted(:is(p,h1,h2,h3,h4,h5,h6):first-of-type){margin-block-start:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):last-of-type){margin-block-end:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):is(:last-of-type,:first-of-type)){margin-block:0}`;
|
|
9
9
|
/**
|
|
10
10
|
* The panel component is a container that supports flexible content layouts. It can
|
|
11
11
|
* be used to house other components such as fields, forms, videos, buttons, and more.
|
package/pfe.min.js
CHANGED
|
@@ -400,7 +400,7 @@ var ql=Object.defineProperty;var Vl=Object.getOwnPropertyDescriptor;var o=(l,e,t
|
|
|
400
400
|
</div>
|
|
401
401
|
</div>
|
|
402
402
|
</section>
|
|
403
|
-
`}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),i(this,W)?.removeEventListener("click",this.onTriggerClick)}async _init(){await this.updateComplete,m(this,jt,this.querySelector('[slot$="header"]')),m(this,ar,[...this.querySelectorAll("*:not([slot])")]),m(this,Ot,i(this,ar).filter(t=>t.tagName.slice(0,1)==="H")),i(this,W)&&(i(this,W).addEventListener("click",this.onTriggerClick),this.removeAttribute("hidden")),i(this,jt)?i(this,jt).id=i(this,ge):i(this,Ot).length>0&&(i(this,Ot)[0].id=i(this,ge))}async _openChanged(t,r){t==null||r==null||t==r||(this.open?(document.body.style.overflow="hidden",await this.updateComplete,this.dialog?.focus(),this.dispatchEvent(new Wa(i(this,W)))):(document.body.style.overflow="auto",await this.updateComplete,i(this,W)&&i(this,W).focus(),this.dispatchEvent(i(this,he)?new wa:new Ta)))}_triggerChanged(){this.trigger&&(m(this,W,this.getRootNode().getElementById(this.trigger)),i(this,W)?.addEventListener("click",this.onTriggerClick))}onTriggerClick(t){t.preventDefault(),this.showModal()}onClick(t){let{open:r,overlay:a,dialog:s}=this;if(r){let c=t.composedPath(),{closeOnOutsideClick:b}=this.constructor;b&&c.includes(a)&&!c.includes(s)&&(t.preventDefault(),this.cancel())}}onKeydown(t){switch(t.key){case"Tab":t.target===this.closeButton&&(t.preventDefault(),this.dialog?.focus());return;case"Escape":case"Esc":t.preventDefault(),this.cancel();return;case"Enter":t.target===i(this,W)&&(t.preventDefault(),this.showModal());return}}async cancel(){m(this,he,!0),this.open=!1,await this.updateComplete,m(this,he,!1)}setTrigger(t){m(this,W,t),i(this,W).addEventListener("click",this.onTriggerClick)}toggle(){this.open=!this.open}show(){this.open=!0}showModal(){this.show()}close(t){typeof t=="string"&&(this.returnValue=t),this.open=!1}};ge=new WeakMap,W=new WeakMap,jt=new WeakMap,ar=new WeakMap,Ot=new WeakMap,he=new WeakMap,be=new WeakMap,_.shadowRootOptions={...el.shadowRootOptions,delegatesFocus:!0},_.styles=[tl],_.closeOnOutsideClick=!1,o([so({reflect:!0})],_.prototype,"variant",2),o([Da({alias:"variant",attribute:"width"})],_.prototype,"width",2),o([so({reflect:!0})],_.prototype,"position",2),o([R,so({type:Boolean,reflect:!0})],_.prototype,"open",2),o([R,so()],_.prototype,"trigger",2),o([Ba("#overlay")],_.prototype,"overlay",2),o([Ba("#dialog")],_.prototype,"dialog",2),o([Ba("#close-button")],_.prototype,"closeButton",2),o([ja()],_.prototype,"_init",1),o([z],_.prototype,"onTriggerClick",1),o([z],_.prototype,"onClick",1),o([z],_.prototype,"onKeydown",1),o([z],_.prototype,"toggle",1),o([z],_.prototype,"show",1),o([z],_.prototype,"showModal",1),o([z],_.prototype,"close",1),_=o([yp("pf-modal")],_);import{LitElement as wp,html as Tp}from"lit";import{customElement as Wp}from"lit/decorators/custom-element.js";import{property as al}from"lit/decorators/property.js";import{css as kp}from"lit";var Bp=kp`:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:
|
|
403
|
+
`}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),i(this,W)?.removeEventListener("click",this.onTriggerClick)}async _init(){await this.updateComplete,m(this,jt,this.querySelector('[slot$="header"]')),m(this,ar,[...this.querySelectorAll("*:not([slot])")]),m(this,Ot,i(this,ar).filter(t=>t.tagName.slice(0,1)==="H")),i(this,W)&&(i(this,W).addEventListener("click",this.onTriggerClick),this.removeAttribute("hidden")),i(this,jt)?i(this,jt).id=i(this,ge):i(this,Ot).length>0&&(i(this,Ot)[0].id=i(this,ge))}async _openChanged(t,r){t==null||r==null||t==r||(this.open?(document.body.style.overflow="hidden",await this.updateComplete,this.dialog?.focus(),this.dispatchEvent(new Wa(i(this,W)))):(document.body.style.overflow="auto",await this.updateComplete,i(this,W)&&i(this,W).focus(),this.dispatchEvent(i(this,he)?new wa:new Ta)))}_triggerChanged(){this.trigger&&(m(this,W,this.getRootNode().getElementById(this.trigger)),i(this,W)?.addEventListener("click",this.onTriggerClick))}onTriggerClick(t){t.preventDefault(),this.showModal()}onClick(t){let{open:r,overlay:a,dialog:s}=this;if(r){let c=t.composedPath(),{closeOnOutsideClick:b}=this.constructor;b&&c.includes(a)&&!c.includes(s)&&(t.preventDefault(),this.cancel())}}onKeydown(t){switch(t.key){case"Tab":t.target===this.closeButton&&(t.preventDefault(),this.dialog?.focus());return;case"Escape":case"Esc":t.preventDefault(),this.cancel();return;case"Enter":t.target===i(this,W)&&(t.preventDefault(),this.showModal());return}}async cancel(){m(this,he,!0),this.open=!1,await this.updateComplete,m(this,he,!1)}setTrigger(t){m(this,W,t),i(this,W).addEventListener("click",this.onTriggerClick)}toggle(){this.open=!this.open}show(){this.open=!0}showModal(){this.show()}close(t){typeof t=="string"&&(this.returnValue=t),this.open=!1}};ge=new WeakMap,W=new WeakMap,jt=new WeakMap,ar=new WeakMap,Ot=new WeakMap,he=new WeakMap,be=new WeakMap,_.shadowRootOptions={...el.shadowRootOptions,delegatesFocus:!0},_.styles=[tl],_.closeOnOutsideClick=!1,o([so({reflect:!0})],_.prototype,"variant",2),o([Da({alias:"variant",attribute:"width"})],_.prototype,"width",2),o([so({reflect:!0})],_.prototype,"position",2),o([R,so({type:Boolean,reflect:!0})],_.prototype,"open",2),o([R,so()],_.prototype,"trigger",2),o([Ba("#overlay")],_.prototype,"overlay",2),o([Ba("#dialog")],_.prototype,"dialog",2),o([Ba("#close-button")],_.prototype,"closeButton",2),o([ja()],_.prototype,"_init",1),o([z],_.prototype,"onTriggerClick",1),o([z],_.prototype,"onClick",1),o([z],_.prototype,"onKeydown",1),o([z],_.prototype,"toggle",1),o([z],_.prototype,"show",1),o([z],_.prototype,"showModal",1),o([z],_.prototype,"close",1),_=o([yp("pf-modal")],_);import{LitElement as wp,html as Tp}from"lit";import{customElement as Wp}from"lit/decorators/custom-element.js";import{property as al}from"lit/decorators/property.js";import{css as kp}from"lit";var Bp=kp`:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));--pf-c-panel--m-raised--ZIndex:var(--pf-global--ZIndex--sm, 200);--pf-c-panel__header--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main--MaxHeight:none;--pf-c-panel__main--Overflow:visible;--pf-c-panel__main-body--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--BoxShadow:none;--pf-c-panel--m-scrollable__main--MaxHeight:18.75rem;--pf-c-panel--m-scrollable__main--Overflow:auto;--pf-c-panel--m-scrollable__footer--BoxShadow:0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);position:relative;z-index:var(--pf-c-panel--ZIndex);width:var(--pf-c-panel--Width);min-width:var(--pf-c-panel--MinWidth);max-width:var(--pf-c-panel--MaxWidth);background-color:var(--pf-c-panel--BackgroundColor);box-shadow:var(--pf-c-panel--BoxShadow);display:block}:host([variant=bordered])::before{position:absolute;inset:0;pointer-events:none;content:"";border:var(--pf-c-panel--m-bordered--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-panel--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([variant=raised])::before{position:absolute;inset:0;pointer-events:none;content:"";box-shadow:var(--pf-c-panel--m-raised--BoxShadow,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06));z-index:var(--pf-c-panel--m-raised--ZIndex,var(--pf-global--ZIndex--sm,200))}:host([variant=raised]){--pf-c-panel--BoxShadow:var(--pf-c-panel--m-raised--BoxShadow,
|
|
404
404
|
var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));--pf-c-panel--ZIndex:var(--pf-c-panel--m-raised--ZIndex,
|
|
405
405
|
var(--pf-global--ZIndex--sm, 200))}:host([scrollable]){--pf-c-panel__main--MaxHeight:var(--pf-c-panel--m-scrollable__main--MaxHeight);--pf-c-panel__main--Overflow:var(--pf-c-panel--m-scrollable__main--Overflow);--pf-c-panel__footer--BoxShadow:var(--pf-c-panel--m-scrollable__footer--BoxShadow)}[hidden]{display:none!important}slot{display:block}slot:not([name]){max-height:var(--pf-c-panel__main--MaxHeight);overflow:var(--pf-c-panel__main--Overflow);padding:var(--pf-c-panel__main-body--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}slot[name=header]{padding:var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft)}slot[name=footer]{padding:var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);box-shadow:var(--pf-c-panel__footer--BoxShadow)}hr{--pf-c-divider--BorderWidth--base:var(--pf-global--BorderWidth--sm, 1px);--pf-c-divider--BorderColor--base:var(--pf-c-divider--BackgroundColor);--pf-c-divider--Height:var(--pf-c-divider--BorderWidth--base);--pf-c-divider--BackgroundColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-divider--after--BackgroundColor:var(--pf-c-divider--BorderColor--base);--pf-c-divider--after--FlexBasis:100%;--pf-c-divider--after--Inset:0%;--pf-c-divider--m-vertical--after--FlexBasis:100%;--pf-c-divider--m-horizontal--Display:flex;--pf-c-divider--m-horizontal--FlexDirection:row;--pf-c-divider--m-horizontal--after--Height:var(--pf-c-divider--Height);--pf-c-divider--m-horizontal--after--Width:auto;--pf-c-divider--m-vertical--Display:inline-flex;--pf-c-divider--m-vertical--FlexDirection:column;--pf-c-divider--m-vertical--after--Height:auto;--pf-c-divider--m-vertical--after--Width:var(--pf-c-divider--BorderWidth--base);--pf-hidden-visible--visible--Display:var(--pf-c-divider--Display);--pf-c-divider--Display:var(--pf-c-divider--m-horizontal--Display);--pf-c-divider--FlexDirection:var(--pf-c-divider--m-horizontal--FlexDirection);--pf-c-divider--after--Width:var(--pf-c-divider--m-horizontal--after--Width);--pf-c-divider--after--Height:var(--pf-c-divider--m-horizontal--after--Height);width:100%;height:auto;display:var(--pf-c-divider--Display);flex-direction:var(--pf-c-divider--FlexDirection);align-items:center;align-self:stretch;flex-shrink:0;justify-content:center;border:0}hr::after{align-self:stretch;width:var(--pf-c-divider--after--Width);height:var(--pf-c-divider--after--Height);content:"";background-color:var(--pf-c-divider--after--BackgroundColor);justify-self:center;padding:0;margin:0;flex-basis:calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2)}::slotted(:is(p,h1,h2,h3,h4,h5,h6):first-of-type){margin-block-start:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):last-of-type){margin-block-end:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):is(:last-of-type,:first-of-type)){margin-block:0}`,ol=Bp;var ir,Pt=class extends wp{constructor(){super(...arguments);this.scrollable=!1;n(this,ir,new u(this,"header",null,"footer"))}render(){let t=i(this,ir).hasSlotted("header"),r=i(this,ir).hasSlotted("footer");return Tp`
|
|
406
406
|
<slot name="header" role="region" ?hidden="${!t}"></slot>
|