https://www.geico.com/_next/static/chunks/dotcom-gds-dotcom-highlight-paragraph-js.7025b4e0e789d48a.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[44597],{67315:(t,a,e)=>{e.r(a),e.d(a,{GdsDotcomHighlightParagraph:()=>d}),e(82936),e(23670),e(16104),e(59553),e(93432);var r=e(743),o=e(19962),i=e(80821),h=e(7771),s=(0,o.b)`
2  :host {
3    display: block;
4  }
5
6  .gds-dotcom-highlight-paragraph {
7    background-color: var(--highlight-paragraph-background-color);
8    border: 1px solid var(--highlight-paragraph-outline-divider-color);
9    border-radius: var(--radius-sm);
10    padding: var(--spacing-ml);
11    display: flex;
12    flex-direction: column;
13    gap: var(--spacing-ml);
14    max-width: var(--max-width-content);
15  }
16
17  gds-stroke-separator {
18    --stroke-separator-background-color: var(
19      --highlight-paragraph-outline-divider-color
20    );
21    --stroke-separator-horizontal-margin: 0;
22  }
23
24  .gds-dotcom-highlight-paragraph > slot[name="headline"] {
25    color: var(--highlight-paragraph-headline-color);
26    font-weight: var(--font-weight-semibold);
27  }
28
29  .gds-dotcom-highlight-paragraph > slot[name="headline"]::slotted(*) {
30    font-size: var(--text-hd-xxs) !important;
31    margin: 0;
32  }
33
34  .gds-dotcom-highlight-paragraph > slot[name="content"] {
35    color: var(--highlight-paragraph-content-color);
36    /* override the rich textbody text size for the content slot */
37    --text-body-regular: var(--text-body-sm);
38  }
39
40  /* Tabbed variant */
41  :host([variant="tabbed"]) .gds-dotcom-highlight-paragraph {
42    gap: var(--spacing-m);
43  }
44
45  :host([variant="tabbed"]) .gds-dotcom-highlight-paragraph__headline {
46    display: flex;
47    align-items: center;
48    gap: var(--spacing-xs);
49  }
50
51  :is(:host([variant="tabbed"]) .gds-dotcom-highlight-paragraph__headline) slot[name="headline"] {
52      font-weight: var(--font-weight-semibold);
53    }
54
55  :host([variant="tabbed"]) .gds-dotcom-highlight-paragraph__headline {
56
57    font-weight: var(--font-weight-semibold);
58  }
59
60  :is(:host([variant="tabbed"]) .gds-dotcom-highlight-paragraph__headline) ::slotted(*) {
61      color: var(--highlight-paragraph-headline-color);
62    }
63
64  :is(:host([variant="tabbed"]) .gds-dotcom-highlight-paragraph__headline) gds-dotcom-icon {
65      color: var(--highlight-paragraph-icon-color);
66    }
67`,d=class extends o.f{constructor(){super(...arguments),this.variant="default",this._hasHeadlineSlot=!1}connectedCallback(){super.connectedCallback();let t=new CSSStyleSheet;t.replaceSync(s.cssText),this.shadowRoot.adoptedStyleSheets=[t]}firstUpdated(t){super.firstUpdated(t),this._syncHeadlineSlotFromDom()}updated(t){super.updated(t),t.has("variant")&&"tabbed"===t.get("variant")&&"default"===this.variant&&this._syncHeadlineSlotFromDom()}_syncHeadlineSlotFromDom(){let t=this.shadowRoot?.querySelector('slot[name="headline"]');t&&this._updateHasHeadlineSlot(t)}_updateHasHeadlineSlot(t){let a=t.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&""!==t.data.trim());this._hasHeadlineSlot!==a&&(this._hasHeadlineSlot=a)}_handleHeadlineSlotChange(t){this._updateHasHeadlineSlot(t.target)}_renderDefault(){return(0,o.c)`
68      <slot
69        name="headline"
70        @slotchange=${this._handleHeadlineSlotChange}
71      ></slot>
72      ${this._hasHeadlineSlot?(0,o.c)` <gds-stroke-separator></gds-stroke-separator> `:o.e}
73      <slot name="content"></slot>
74    `}_renderTabbed(){return(0,o.c)`
75      <div class="gds-dotcom-highlight-paragraph__headline">
76        <gds-dotcom-icon
77          icon-name="informative"
78          size="medium"
79        ></gds-dotcom-icon>
80        <slot name="headline"></slot>
81      </div>
82      <slot name="content"></slot>
83    `}render(){return(0,o.c)`
84      <div class="gds-dotcom-highlight-paragraph">
85        ${"tabbed"===this.variant?this._renderTabbed():this._renderDefault()}
86      </div>
87    `}};(0,h.a)([(0,r.a)({type:String,reflect:!0})],d.prototype,"variant",2),(0,h.a)([(0,r.b)()],d.prototype,"_hasHeadlineSlot",2),d=(0,h.a)([(0,i.a)("gds-dotcom-highlight-paragraph")],d)},82936:(t,a,e)=>{var r=e(16104),o=(0,r.h)`
88  :host {
89    display: block;
90    width: var(--stroke-separator-horizontal-width);
91    margin: var(--stroke-separator-horizontal-margin);
92    height: var(--stroke-separator-default-horizontal-height);
93    background-color: var(--color-neutral-standalone-border);
94  }
95
96  :host([variation="vertical"]) {
97    width: var(--stroke-separator-default-vertical-width);
98    height: 100%;
99    margin: var(--stroke-separator-vertical-margin);
100  }
101
102  :host([variant="strong"]:not([variation="vertical"])) {
103    height: var(--stroke-separator-horizontal-height);
104  }
105
106  :host([variant="strong"][variation="vertical"]) {
107    width: var(--stroke-separator-vertical-width);
108  }
109`,i=class extends r.i{constructor(){super(...arguments),this.variation="horizontal",this.variant="default"}connectedCallback(){super.connectedCallback();let t=new CSSStyleSheet;t.replaceSync(o.cssText),this.shadowRoot.adoptedStyleSheets=[t],this.setAttribute("variation",`${this.variation}`)}updated(t){t.has("width")&&"horizontal"===this.variation&&this.setAttribute("style",`width: ${this.width}`),t.has("height")&&"vertical"===this.variation&&this.setAttribute("style",`height: ${this.height}`)}};(0,r.j)([(0,r.a)({reflect:!0})],i.prototype,"variation",2),(0,r.j)([(0,r.a)({reflect:!0})],i.prototype,"variant",2),(0,r.j)([(0,r.a)()],i.prototype,"width",2),(0,r.j)([(0,r.a)()],i.prototype,"height",2),i=(0,r.j)([(0,r.d)("gds-stroke-separator")],i)}}]);