open-consul/ui/packages/consul-ui/app/components/disclosure-card/index.hbs

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>