{"version":3,"names":["IDS","content","toggle","header","CSS","actionsEnd","button","container","contentStart","controlContainer","description","headerContainer","headerHasText","heading","icon","iconStart","iconEnd","iconEndContainer","invalid","statusIcon","summary","title","toggleIcon","valid","SLOTS","control","headerMenuActions","ICONS","opened","closed","blockCss","CalciteBlockStyle0","Block","this","openTransitionProp","onHeaderClick","open","calciteBlockToggle","emit","actionsEndSlotChangeHandler","event","hasEndActions","slotChangeHasAssignedElement","handleContentStartSlotChange","hasContentStart","defaultEndMenuPlacement","openHandler","onToggleOpenCloseComponent","onMessagesChange","setFocus","componentFocusable","focusFirstTabbable","el","onBeforeOpen","calciteBlockBeforeOpen","onOpen","calciteBlockOpen","onBeforeClose","calciteBlockBeforeClose","onClose","calciteBlockClose","effectiveLocaleChange","updateMessages","effectiveLocale","connectedCallback","connectConditionalSlotComponent","connectLocalized","connectMessages","transitionEl","disconnectedCallback","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","componentWillLoad","setUpMessages","setUpLoadableComponent","componentDidLoad","setComponentLoaded","componentDidRender","updateHostInteraction","renderScrim","loading","defaultSlot","h","renderLoaderStatusIcon","messages","status","hasSlottedIcon","getSlotted","class","key","inline","label","scale","name","renderActionsEnd","onSlotchange","renderContentStart","hidden","renderTitle","headingLevel","Heading","level","renderIcon","position","iconFlipRtl","flipRtl","iconValue","iconClass","undefined","render","collapsible","menuFlipPlacements","menuPlacement","toggleLabel","collapse","expand","headerContent","id","hasControl","hasMenuActions","collapseIcon","headerNode","dragHandle","toAriaBoolean","onClick","flipPlacements","options","overlayPositioning","placement","Host","InteractiveContainer","disabled","chevronIcon","sectionHeader","sectionHeaderText","switch","toggleSwitch","toggleContainer","toggleSwitchContent","toggleSwitchText","menuOpen","menuClosed","blockSectionCss","CalciteBlockSectionStyle0","BlockSection","handleHeaderKeyDown","isActivationKey","toggleSection","preventDefault","stopPropagation","calciteBlockSectionToggle","renderStatusIcon","statusIconClasses","flipRtlStart","flipRtlEnd","isIconStart","text","toggleDisplay","arrowIcon","onKeyDown","role","tabIndex","checked","inert"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n content: \"content\",\n toggle: \"toggle\",\n header: \"header\",\n};\n\nexport const CSS = {\n actionsEnd: \"actions-end\",\n button: \"button\",\n container: \"container\",\n content: \"content\",\n contentStart: \"content-start\",\n controlContainer: \"control-container\",\n description: \"description\",\n header: \"header\",\n headerContainer: \"header-container\",\n headerHasText: \"header--has-text\",\n heading: \"heading\",\n icon: \"icon\",\n iconStart: \"icon--start\",\n iconEnd: \"icon--end\",\n iconEndContainer: \"icon-end-container\",\n invalid: \"invalid\",\n statusIcon: \"status-icon\",\n summary: \"summary\",\n title: \"title\",\n toggle: \"toggle\",\n toggleIcon: \"toggle-icon\",\n valid: \"valid\",\n};\n\nexport const SLOTS = {\n actionsEnd: \"actions-end\",\n contentStart: \"content-start\",\n control: \"control\",\n headerMenuActions: \"header-menu-actions\",\n icon: \"icon\",\n};\n\nexport const ICONS = {\n opened: \"chevron-up\",\n closed: \"chevron-down\",\n valid: \"check-circle\",\n invalid: \"exclamation-mark-triangle\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n @extend %component-host;\n @extend %component-spacing;\n @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n flex-col border-0 border-b border-solid p-0;\n flex-basis: auto;\n transition-duration: var(--calcite-animation-timing);\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n @apply justify-start;\n}\n\n.header--has-text {\n padding: var(--calcite-spacing-md);\n}\n\n.header,\n.toggle {\n grid-area: header;\n}\n\n.header-container {\n @apply grid items-stretch;\n grid-template: auto / auto 1fr auto auto;\n grid-template-areas: \"handle header control menu actions-end\";\n grid-column: header-start / actions-end;\n grid-row: 1 / 2;\n}\n\n.content-start,\n.icon,\n.icon--start,\n.icon--end {\n margin-inline-end: var(--calcite-spacing-md);\n}\n\n.icon {\n & calcite-loader {\n margin-inline-end: var(--calcite-spacing-xxxs);\n }\n}\n\n.icon--start,\n.icon--end {\n @apply text-color-3;\n}\n\n.actions-end {\n grid-area: actions-end;\n}\n\n.toggle {\n @apply font-sans\n focus-base\n m-0\n flex\n cursor-pointer\n flex-nowrap\n items-center\n justify-between\n border-none\n p-0;\n\n text-align: initial;\n background-color: transparent;\n\n &:hover {\n @apply bg-foreground-2;\n }\n &:focus {\n @apply focus-inset;\n }\n}\n\ncalcite-loader[inline] {\n grid-area: control;\n @apply self-center;\n}\n\ncalcite-handle {\n grid-area: handle;\n}\n\n.title {\n @apply m-0;\n}\n\n.header .title .heading {\n @apply text-n1\n text-color-2\n word-break\n transition-color\n p-0\n font-medium\n leading-tight\n duration-150\n ease-in-out;\n}\n\n.description {\n @apply text-n2-wrap\n text-color-3\n word-break\n mt-0.5\n p-0;\n}\n\n.icon {\n @apply flex;\n}\n\n.status-icon.valid {\n color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.icon-end-container {\n @apply flex items-center;\n\n margin-inline-start: auto;\n}\n\n.toggle-icon {\n @apply text-color-3\n transition-color\n self-center\n justify-self-end\n duration-150\n ease-in-out;\n\n margin-inline-end: var(--calcite-spacing-md);\n}\n\n.toggle:hover .toggle-icon {\n @apply text-color-1;\n}\n\n.container {\n @apply flex flex-col h-full relative;\n}\n\n.content {\n @apply animate-in flex-1 relative min-h-0;\n padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));\n padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));\n}\n\n.content-start {\n @apply text-color-3 flex items-center;\n}\n\n.control-container {\n @apply m-0 flex;\n grid-area: control;\n}\n\ncalcite-action-menu {\n grid-area: menu;\n}\n\n.actions-end {\n @apply flex items-stretch;\n}\n\n:host([open]) {\n @apply my-2;\n\n .header .title .heading {\n @apply text-color-1;\n }\n}\n\n@include base-component();\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n VNode,\n Watch,\n} from \"@stencil/core\";\nimport {\n ConditionalSlotComponent,\n connectConditionalSlotComponent,\n disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n focusFirstTabbable,\n getSlotted,\n toAriaBoolean,\n slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n InteractiveComponent,\n InteractiveContainer,\n updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n connectMessages,\n disconnectMessages,\n setUpMessages,\n T9nComponent,\n updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status, Position } from \"../interfaces\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport {\n defaultEndMenuPlacement,\n FlipPlacement,\n LogicalPlacement,\n OverlayPositioning,\n} from \"../../utils/floating-ui\";\nimport { FlipContext } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n * @slot icon - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n * @slot content-start - A slot for adding non-actionable elements before content of the component.\n * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n tag: \"calcite-block\",\n styleUrl: \"block.scss\",\n shadow: true,\n assetsDirs: [\"assets\"],\n})\nexport class Block\n implements\n ConditionalSlotComponent,\n InteractiveComponent,\n LocalizedComponent,\n T9nComponent,\n LoadableComponent,\n OpenCloseComponent\n{\n // --------------------------------------------------------------------------\n //\n // Public Properties\n //\n // --------------------------------------------------------------------------\n\n /**\n * When `true`, the component is collapsible.\n */\n @Prop({ reflect: true }) collapsible = false;\n\n /**\n * When `true`, interaction is prevented and the component is displayed with lower opacity.\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * When `true`, displays a drag handle in the header.\n */\n @Prop({ reflect: true }) dragHandle = false;\n\n /**\n * The component header text.\n */\n @Prop() heading!: string;\n\n /**\n * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n */\n @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n /** Specifies an icon to display at the end of the component. */\n @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n /** Specifies an icon to display at the start of the component. */\n @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n /**\n * When `true`, a busy indicator is displayed.\n */\n @Prop({ reflect: true }) loading = false;\n\n /**\n * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.\n */\n @Prop() menuFlipPlacements: FlipPlacement[];\n\n /**\n * Determines where the action menu will be positioned.\n */\n @Prop({ reflect: true }) menuPlacement: LogicalPlacement = defaultEndMenuPlacement;\n\n /**\n * When `true`, expands the component and its contents.\n */\n @Prop({ reflect: true, mutable: true }) open = false;\n\n @Watch(\"open\")\n openHandler(): void {\n onToggleOpenCloseComponent(this);\n }\n\n /**\n * Displays a status-related indicator icon.\n *\n * @deprecated Use `icon-start` instead.\n */\n @Prop({ reflect: true }) status: Status;\n\n /**\n * A description for the component, which displays below the heading.\n */\n @Prop() description: string;\n\n /**\n * Made into a prop for testing purposes only\n *\n * @internal\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messages: BlockMessages;\n\n /**\n * Use this property to override individual strings used by the component.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messageOverrides: Partial;\n\n @Watch(\"messageOverrides\")\n onMessagesChange(): void {\n /* wired up by t9n util */\n }\n\n /**\n * Determines the type of positioning to use for the overlaid content.\n *\n * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n *\n * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n *\n */\n @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n //--------------------------------------------------------------------------\n //\n // Public Methods\n //\n //--------------------------------------------------------------------------\n\n /**\n * Sets focus on the component's first tabbable element.\n *\n */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n focusFirstTabbable(this.el);\n }\n\n onBeforeOpen(): void {\n this.calciteBlockBeforeOpen.emit();\n }\n\n onOpen(): void {\n this.calciteBlockOpen.emit();\n }\n\n onBeforeClose(): void {\n this.calciteBlockBeforeClose.emit();\n }\n\n onClose(): void {\n this.calciteBlockClose.emit();\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Properties\n //\n // --------------------------------------------------------------------------\n\n @Element() el: HTMLCalciteBlockElement;\n\n @State() defaultMessages: BlockMessages;\n\n @State() effectiveLocale: string;\n\n @Watch(\"effectiveLocale\")\n effectiveLocaleChange(): void {\n updateMessages(this, this.effectiveLocale);\n }\n\n @State() hasContentStart = false;\n\n @State() hasEndActions = false;\n\n openTransitionProp = \"margin-top\";\n\n transitionEl: HTMLElement;\n\n // --------------------------------------------------------------------------\n //\n // Lifecycle\n //\n // --------------------------------------------------------------------------\n\n connectedCallback(): void {\n connectConditionalSlotComponent(this);\n connectLocalized(this);\n connectMessages(this);\n\n this.transitionEl = this.el;\n }\n\n disconnectedCallback(): void {\n disconnectLocalized(this);\n disconnectMessages(this);\n disconnectConditionalSlotComponent(this);\n }\n\n async componentWillLoad(): Promise {\n await setUpMessages(this);\n setUpLoadableComponent(this);\n\n if (this.open) {\n onToggleOpenCloseComponent(this);\n }\n }\n\n componentDidLoad(): void {\n setComponentLoaded(this);\n }\n\n componentDidRender(): void {\n updateHostInteraction(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Events\n //\n // --------------------------------------------------------------------------\n\n /** Fires when the component is requested to be closed and before the closing transition begins. */\n @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter;\n\n /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter;\n\n /** Fires when the component is closed and animation is complete. */\n @Event({ cancelable: false }) calciteBlockClose: EventEmitter;\n\n /** Fires when the component is open and animation is complete. */\n @Event({ cancelable: false }) calciteBlockOpen: EventEmitter;\n\n /**\n * Fires when the component's header is clicked.\n *\n * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n */\n @Event({ cancelable: false }) calciteBlockToggle: EventEmitter;\n\n // --------------------------------------------------------------------------\n //\n // Private Methods\n //\n // --------------------------------------------------------------------------\n\n onHeaderClick = (): void => {\n this.open = !this.open;\n this.calciteBlockToggle.emit();\n };\n\n private actionsEndSlotChangeHandler = (event: Event): void => {\n this.hasEndActions = slotChangeHasAssignedElement(event);\n };\n\n private handleContentStartSlotChange = (event: Event): void => {\n this.hasContentStart = slotChangeHasAssignedElement(event);\n };\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n\n renderScrim(): VNode[] {\n const { loading } = this;\n const defaultSlot = ;\n\n return [loading ? : null, defaultSlot];\n }\n\n private renderLoaderStatusIcon(): VNode[] {\n const { loading, messages, status } = this;\n\n const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n return loading ? (\n
\n \n
\n ) : status ? (\n
\n \n
\n ) : hasSlottedIcon ? (\n
\n \n
\n ) : null;\n }\n\n private renderActionsEnd(): VNode {\n return (\n
\n \n
\n );\n }\n\n private renderContentStart(): VNode {\n const { hasContentStart } = this;\n return (\n \n );\n }\n\n renderTitle(): VNode {\n const { heading, headingLevel, description } = this;\n return heading || description ? (\n
\n \n {heading}\n \n {description ?
{description}
: null}\n
\n ) : null;\n }\n\n private renderIcon(position: Extract<\"start\" | \"end\", Position>): VNode {\n const { iconFlipRtl } = this;\n\n const flipRtl =\n iconFlipRtl === \"both\" || position === \"start\"\n ? iconFlipRtl === \"start\"\n : iconFlipRtl === \"end\";\n\n const iconValue = position === \"start\" ? this.iconStart : this.iconEnd;\n const iconClass = position === \"start\" ? CSS.iconStart : CSS.iconEnd;\n\n if (!iconValue) {\n return undefined;\n }\n\n /** Icon scale is not variable as the component does not have a scale property */\n return (\n \n );\n }\n\n render(): VNode {\n const {\n collapsible,\n el,\n loading,\n open,\n heading,\n messages,\n description,\n menuFlipPlacements,\n menuPlacement,\n } = this;\n\n const toggleLabel = open ? messages.collapse : messages.expand;\n\n const headerContent = (\n \n {this.renderIcon(\"start\")}\n {this.renderContentStart()}\n {this.renderLoaderStatusIcon()}\n {this.renderTitle()}\n \n );\n\n const hasControl = !!getSlotted(el, SLOTS.control);\n const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n const headerNode = (\n
\n {this.dragHandle ? : null}\n {collapsible ? (\n \n {headerContent}\n
\n {this.renderIcon(\"end\")}\n \n
\n \n ) : this.iconEnd ? (\n
\n {headerContent}\n
{this.renderIcon(\"end\")}
\n
\n ) : (\n headerContent\n )}\n {hasControl ? (\n
\n \n
\n ) : null}\n {hasMenuActions ? (\n \n \n \n ) : null}\n {this.renderActionsEnd()}\n
\n );\n\n return (\n \n \n \n {headerNode}\n \n \n );\n }\n}\n","export const IDS = {\n content: \"content\",\n toggle: \"toggle\",\n};\n\nexport const CSS = {\n chevronIcon: \"chevron-icon\",\n content: \"content\",\n iconStart: \"icon--start\",\n iconEnd: \"icon--end\",\n invalid: \"invalid\",\n sectionHeader: \"section-header\",\n sectionHeaderText: \"section-header__text\",\n statusIcon: \"status-icon\",\n switch: \"switch\",\n toggle: \"toggle\",\n toggleSwitch: \"toggle--switch\",\n toggleContainer: \"toggle-container\",\n toggleSwitchContent: \"toggle--switch__content\",\n toggleSwitchText: \"toggle--switch__text\",\n valid: \"valid\",\n};\n\nexport const ICONS = {\n menuOpen: \"chevron-up\",\n menuClosed: \"chevron-down\",\n valid: \"check-circle\",\n invalid: \"exclamation-mark-triangle\",\n} as const;\n",":host {\n @apply bg-foreground-1 text-n1 box-border block;\n\n color: var(--calcite-color-text-2);\n}\n\n:host([open]) {\n @apply border-b-color-3\n border-0\n border-b\n border-solid;\n\n .toggle {\n color: var(--calcite-color-text-1);\n\n &:hover {\n color: var(--calcite-color-text-1);\n }\n }\n\n .chevron-icon {\n color: var(--calcite-color-text-3);\n\n &:hover {\n color: var(--calcite-color-text-1);\n }\n }\n}\n\n:host(:last-child) {\n @apply border-b-0;\n}\n\n.toggle {\n @apply font-sans w-full border-0 bg-transparent;\n\n gap: var(--calcite-spacing-md);\n color: var(--calcite-color-text-2);\n font-weight: var(--calcite-font-weight-normal);\n\n &:hover {\n color: var(--calcite-color-text-1);\n }\n}\n\n.toggle--switch,\n.section-header {\n @apply text-n1\n focus-base\n mx-0\n my-1\n flex\n cursor-pointer\n select-none\n items-center\n px-0\n py-2;\n\n &:focus {\n @apply focus-outset;\n }\n &:hover {\n color: var(--calcite-color-text-1);\n }\n}\n\n.section-header__text {\n @apply my-0\n flex-auto;\n\n text-align: initial;\n word-wrap: anywhere;\n}\n\n.toggle-container {\n @apply flex items-center relative bg-transparent;\n word-break: break-word;\n\n .toggle--switch__content {\n @apply flex flex-auto items-center;\n }\n\n .icon--end,\n .icon--start,\n .chevron-icon {\n @apply flex items-center;\n\n color: var(--calcite-color-text-3);\n\n &:hover {\n color: var(--calcite-color-text-1);\n }\n }\n}\n\n.status-icon {\n @apply flex items-center;\n}\n\n.status-icon.valid {\n color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n color: theme(\"colors.danger\");\n}\n\n@include base-component();\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n VNode,\n Watch,\n} from \"@stencil/core\";\nimport { focusFirstTabbable, toAriaBoolean } from \"../../utils/dom\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n connectMessages,\n disconnectMessages,\n setUpMessages,\n T9nComponent,\n updateMessages,\n} from \"../../utils/t9n\";\nimport { FlipContext, Status } from \"../interfaces\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n tag: \"calcite-block-section\",\n styleUrl: \"block-section.scss\",\n shadow: true,\n assetsDirs: [\"assets\"],\n})\nexport class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent {\n // --------------------------------------------------------------------------\n //\n // Properties\n //\n // --------------------------------------------------------------------------\n\n /** Specifies an icon to display at the end of the component. */\n @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n /** Specifies an icon to display at the start of the component. */\n @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n /**\n * When `true`, expands the component and its contents.\n */\n @Prop({ reflect: true, mutable: true }) open = false;\n\n /**\n * Displays a status-related indicator icon.\n *\n * @deprecated Use `icon-start` instead.\n */\n @Prop({ reflect: true }) status: Status;\n\n /**\n * The component header text.\n */\n @Prop() text: string;\n\n /**\n * Specifies how the component's toggle is displayed, where:\n *\n * `\"button\"` sets the toggle to a selectable header, and\n *\n * `\"switch\"` sets the toggle to a switch.\n */\n @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = \"button\";\n\n /**\n * Made into a prop for testing purposes only\n *\n * @internal\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messages: BlockSectionMessages;\n\n /**\n * Use this property to override individual strings used by the component.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messageOverrides: Partial;\n\n @Watch(\"messageOverrides\")\n onMessagesChange(): void {\n /* wired up by t9n util */\n }\n\n //--------------------------------------------------------------------------\n //\n // Public Methods\n //\n //--------------------------------------------------------------------------\n\n /**\n * Sets focus on the component's first tabbable element.\n *\n */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n focusFirstTabbable(this.el);\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Properties\n //\n // --------------------------------------------------------------------------\n\n @Element() el: HTMLCalciteBlockSectionElement;\n\n @State() effectiveLocale: string;\n\n @Watch(\"effectiveLocale\")\n effectiveLocaleChange(): void {\n updateMessages(this, this.effectiveLocale);\n }\n\n @State() defaultMessages: BlockSectionMessages;\n\n // --------------------------------------------------------------------------\n //\n // Events\n //\n // --------------------------------------------------------------------------\n\n /**\n * Fires when the header has been clicked.\n */\n @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter;\n\n // --------------------------------------------------------------------------\n //\n // Private Methods\n //\n // --------------------------------------------------------------------------\n\n handleHeaderKeyDown = (event: KeyboardEvent): void => {\n if (isActivationKey(event.key)) {\n this.toggleSection();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n toggleSection = (): void => {\n this.open = !this.open;\n this.calciteBlockSectionToggle.emit();\n };\n\n // --------------------------------------------------------------------------\n //\n // Lifecycle\n //\n // --------------------------------------------------------------------------\n\n connectedCallback(): void {\n connectLocalized(this);\n connectMessages(this);\n }\n\n async componentWillLoad(): Promise {\n await setUpMessages(this);\n setUpLoadableComponent(this);\n }\n\n componentDidLoad(): void {\n setComponentLoaded(this);\n }\n\n disconnectedCallback(): void {\n disconnectLocalized(this);\n disconnectMessages(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n renderStatusIcon(): VNode[] {\n const { status } = this;\n const statusIcon = ICONS[status] ?? false;\n const statusIconClasses = {\n [CSS.statusIcon]: true,\n [CSS.valid]: status == \"valid\",\n [CSS.invalid]: status == \"invalid\",\n };\n\n return statusIcon ? (\n \n ) : null;\n }\n\n renderIcon(icon: string): VNode {\n const { iconFlipRtl } = this;\n\n if (icon === undefined) {\n return null;\n }\n\n const flipRtlStart = iconFlipRtl === \"both\" || iconFlipRtl === \"start\";\n const flipRtlEnd = iconFlipRtl === \"both\" || iconFlipRtl === \"end\";\n\n const isIconStart = icon === this.iconStart;\n\n /** Icon scale is not variable as the component does not have a scale property */\n return (\n \n );\n }\n\n render(): VNode {\n const { messages, open, text, toggleDisplay } = this;\n const arrowIcon = open ? ICONS.menuOpen : ICONS.menuClosed;\n\n const toggleLabel = open ? messages.collapse : messages.expand;\n\n const headerNode =\n toggleDisplay === \"switch\" ? (\n \n \n {this.renderIcon(this.iconStart)}\n
\n {text}\n
\n\n {this.renderIcon(this.iconEnd)}\n {this.renderStatusIcon()}\n \n \n \n ) : (\n \n \n {this.renderIcon(this.iconStart)}\n {text}\n {this.renderIcon(this.iconEnd)}\n {this.renderStatusIcon()}\n \n \n \n );\n\n return (\n \n {headerNode}\n \n \n );\n }\n}\n"],"mappings":"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","ignoreList":[]}