91 lines
2.5 KiB
Handlebars
91 lines
2.5 KiB
Handlebars
|
<CustomElement
|
||
|
|
@element="disclosure-card"
|
||
|
|
@description="Block level component with extra disclosable content"
|
||
|
|
@attrs={{array
|
||
|
|
}}
|
||
|
|
as |custom element|>
|
||
|
|
<Disclosure as |disclosure|>
|
||
|
|
<disclosure-card
|
||
|
|
{{did-insert custom.connect}}
|
||
|
|
{{will-destroy custom.disconnect}}
|
||
|
|
expanded={{disclosure.expanded}}
|
||
|
|
>
|
||
|
|
|
||
|
|
<custom.Template
|
||
|
|
@styles={{css-map
|
||
|
|
(require '/styles/base/icons/base-keyframes.css' from='/components/disclosure-card')
|
||
|
|
(require '/styles/base/icons/icons/chevron-down/index.css' from='/components/disclosure-card')
|
||
|
|
(require '/components/panel/index.css' from='/components/disclosure-card')
|
||
|
|
(css "
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
slot[name='action']::slotted(button) {
|
||
|
|
display: block;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
background-color: rgb(var(--tone-gray-050));
|
||
|
|
color: rgb(var(--tone-gray-800));
|
||
|
|
padding-top: var(--padding-y);
|
||
|
|
padding-bottom: var(--padding-y);
|
||
|
|
}
|
||
|
|
slot[name='action']::slotted(button)::after {
|
||
|
|
transition-timing-function: linear;
|
||
|
|
transition-duration: 300ms;
|
||
|
|
transition-property: transform;
|
||
|
|
--icon-name: icon-chevron-down;
|
||
|
|
--icon-size: icon-000;
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
|
||
|
|
:host([expanded]) slot[name='action']::slotted(button)::after {
|
||
|
|
transform: scaleY(-100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
:host([expanded]) [style*='max-height'] {
|
||
|
|
transition-duration: 50ms;
|
||
|
|
}
|
||
|
|
[style*='max-height'] {
|
||
|
|
transition-timing-function: ease-out;
|
||
|
|
transition-property: max-height;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
padding: var(--padding-y) var(--padding-x);
|
||
|
|
}
|
||
|
|
")
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div part="base"
|
||
|
|
class={{class-map
|
||
|
|
"panel"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
{{on-resize (dom-position (array
|
||
|
|
(array 'height' 'max-height')
|
||
|
|
))}}
|
||
|
|
class={{class-map
|
||
|
|
'content'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<slot>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
<hr
|
||
|
|
class={{class-map
|
||
|
|
'panel-separator'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<slot name="action">
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</custom.Template>
|
||
|
|
|
||
|
|
{{yield disclosure}}
|
||
|
|
|
||
|
|
</disclosure-card>
|
||
|
|
</Disclosure>
|
||
|
|
</CustomElement>
|