dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
55 lines (54 loc) • 3.52 kB
TypeScript
import { AccordionBaseElement } from '../accordion/accordion-base-element';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSStack } from '../stack/stack.component';
/**
* `dap-ds-official-website-banner`
* @element dap-ds-official-website-banner
* @summary An official website banner is a banner that displays that the website is an official website.
* @title - Official website-banner
*
* @property { 'sm' | 'lg' } size - The size of the official website banner. Default is `sm`.
* @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided
* @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.
* @property {boolean} opened - Whether the accordion is opened. Default is `false`.
* @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.
* @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.
* @property {boolean} lastItem - Whether the accordion is the last item.
*
* @event {{ void }} dds-opened - Event fired when the accordion is opened.
* @event {{ void }} dds-closed - Event fired when the accordion is closed.
*
* @slot default - The content of the accordion.
* @slot heading - The heading of the accordion.
* @slot icon-opened - The icon when the accordion is opened.
* @slot icon-closed - The icon when the accordion is closed.
*
* @csspart base - The main accordion container.
* @csspart heading - The heading of the accordion.
* @csspart button - The button of the accordion.
* @csspart content - The content of the accordion.
* @csspart content-container - The container of the accordion content.
* @csspart icon-wrapper - The icon wrapper of the accordion.
* @csspart open-icon - The icon when the accordion is opened.
* @csspart open-icon-base - The base of the icon when the accordion is opened.
* @csspart close-icon - The icon when the accordion is closed.
* @csspart close-icon-base - The base of the icon when the accordion is closed.
*
* @cssproperty --dds-official-banner-background-color - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted))
* @cssproperty --dds-official-banner-text-color - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted))
* @cssproperty --dds-official-banner-heading-hover-color - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted))
* @cssproperty --dds-official-banner-border-radius - The border radius of the official website banner (default: 0)
* @cssproperty --dds-official-banner-icon-color - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted))
* @cssproperty --dds-official-banner-icon-color-hover - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted))
*/
export default class DapDSOfficialWebsiteBanner extends AccordionBaseElement {
static tagName: string;
static dependencies: {
'dap-ds-stack': typeof DapDSStack;
'dap-ds-icon': typeof DapDSIcon;
};
static readonly styles: import('lit').CSSResult;
headingRender(): import('lit-html').TemplateResult<1>;
contentRender(): import('lit-html').TemplateResult<1>;
render(): import('lit-html').TemplateResult<1>;
}