@luzmo/lucero 1.0.1-alpha.46 → 1.0.1-alpha.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion/index.cjs +1 -1
- package/components/accordion/index.js +1 -1
- package/components/action-bar/index.cjs +1 -1
- package/components/action-bar/index.js +2 -2
- package/components/chat-message/index.cjs +1 -1
- package/components/chat-message/index.js +1 -1
- package/components/chat-message-group/index.cjs +2 -2
- package/components/chat-message-group/index.js +10 -10
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +1 -1
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +2 -2
- package/components/menu/index.cjs +1 -1
- package/components/menu/index.js +1 -1
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/popover/index.cjs +1 -1
- package/components/popover/index.js +1 -1
- package/components/{popover-UFgI7b75.js → popover-9RrCrbbh.js} +1 -1
- package/components/{popover-CPZ51K_z.cjs → popover-DoH42mv2.cjs} +1 -1
- package/components/prompt-box/index.cjs +28 -26
- package/components/prompt-box/index.js +90 -61
- package/components/prompt-box/prompt-box.d.ts +72 -12
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +2 -2
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +44 -44
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/text-field/index.cjs +1 -1
- package/components/text-field/index.js +1 -1
- package/components/text-field/text-field.d.ts +25 -0
- package/components/text-field-Czie2Tyh.js +332 -0
- package/components/text-field-DL5Qe8rI.cjs +81 -0
- package/components/{text-field.module-eAEqjvZu.cjs → text-field.module-BuB2wcWe.cjs} +1 -1
- package/components/{text-field.module-Bp4Mwuvj.js → text-field.module-CTNU1d1S.js} +1 -1
- package/components/toast/index.cjs +1 -1
- package/components/toast/index.js +4 -4
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/components/text-field-CclDsK1X.cjs +0 -81
- package/components/text-field-Ckbe58fH.js +0 -288
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
@slotchange=${this.handleSlotchange}
|
|
21
21
|
@luzmo-accordion-item-toggle=${this.onToggle}
|
|
22
22
|
></slot>
|
|
23
|
-
`}}d([r.property({type:Boolean,reflect:!0,attribute:"allow-multiple"})],a.prototype,"allowMultiple");d([r.property({type:String,reflect:!0})],a.prototype,"density");d([r.property({type:String,reflect:!0,attribute:"header-case"})],a.prototype,"headerCase");d([r.property({type:Boolean,reflect:!0,attribute:"no-content-padding"})],a.prototype,"noContentPadding");d([r.property({type:String,reflect:!0})],a.prototype,"variant");d([r.queryAssignedNodes()],a.prototype,"defaultNodes");const y=':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-down));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-
|
|
23
|
+
`}}d([r.property({type:Boolean,reflect:!0,attribute:"allow-multiple"})],a.prototype,"allowMultiple");d([r.property({type:String,reflect:!0})],a.prototype,"density");d([r.property({type:String,reflect:!0,attribute:"header-case"})],a.prototype,"headerCase");d([r.property({type:Boolean,reflect:!0,attribute:"no-content-padding"})],a.prototype,"noContentPadding");d([r.property({type:String,reflect:!0})],a.prototype,"variant");d([r.queryAssignedNodes()],a.prototype,"defaultNodes");const y=':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-down));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-border-radius, var(--accordion-item-accordion-header-border-radius, var(--luzmo-border-radius-s)));outline:var(--luzmo-accordion-focus-indicator-width, var(--luzmo-border-width)) solid var(--luzmo-accordion-focus-indicator-color, var(--luzmo-primary));background-color:var(--luzmo-accordion-background-color-key-focus, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)));color:var(--luzmo-accordion-item-header-color-key-focus, var(--luzmo-font-color-focus));outline-offset:calc(var(--luzmo-accordion-focus-indicator-gap, 2px) * -1)}#header:active{background-color:var(--luzmo-accordion-background-color-down, var(--accordion-item-header-background-color, var(--luzmo-background-hover)));color:var(--luzmo-accordion-item-header-color-down, var(--luzmo-font-color-down))}:host([disabled]) #header,:host([disabled]) #header:focus-visible{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color));background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}@media (hover: hover){#header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)))}:host([disabled]) #header:hover{background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}#header:hover,#header:hover+.icon-container{color:var(--luzmo-accordion-item-header-color-hover, var(--luzmo-font-color-hover))}:host([open]) #header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color)))}:host([disabled]) #header:hover{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color))}}:host([disabled]) #header+.icon-container{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color))}:host([disabled]) #content{color:var(--luzmo-accordion-item-content-disabled-color, var(--luzmo-disabled-color))}:host([open])>#heading>.icon-container>.indicator,:host([open])>.icon-container>.indicator{transform:var(--luzmo-logical-rotation) rotate(90deg);transform:rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}@media (forced-colors: active){#header:after{forced-color-adjust:none;content:"";position:absolute;inset-inline-start:0}}:host{display:block}#heading{height:auto;position:relative}:host([disabled]) #heading .indicator{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color))}';var k=Object.defineProperty,u=(t,o,i,n)=>{for(var e=void 0,c=t.length-1,l;c>=0;c--)(l=t[c])&&(e=l(o,i,e)||e);return e&&k(o,i,e),e};const w=()=>s.html`
|
|
24
24
|
<div class="icon-container">
|
|
25
25
|
${h.luzmoIcon(h.luzmoAngleRight,{className:"indicator"})}
|
|
26
26
|
</div>
|
|
@@ -107,7 +107,7 @@ d([
|
|
|
107
107
|
d([
|
|
108
108
|
v()
|
|
109
109
|
], c.prototype, "defaultNodes");
|
|
110
|
-
const C = ':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-down));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-
|
|
110
|
+
const C = ':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-down));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-border-radius, var(--accordion-item-accordion-header-border-radius, var(--luzmo-border-radius-s)));outline:var(--luzmo-accordion-focus-indicator-width, var(--luzmo-border-width)) solid var(--luzmo-accordion-focus-indicator-color, var(--luzmo-primary));background-color:var(--luzmo-accordion-background-color-key-focus, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)));color:var(--luzmo-accordion-item-header-color-key-focus, var(--luzmo-font-color-focus));outline-offset:calc(var(--luzmo-accordion-focus-indicator-gap, 2px) * -1)}#header:active{background-color:var(--luzmo-accordion-background-color-down, var(--accordion-item-header-background-color, var(--luzmo-background-hover)));color:var(--luzmo-accordion-item-header-color-down, var(--luzmo-font-color-down))}:host([disabled]) #header,:host([disabled]) #header:focus-visible{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color));background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}@media (hover: hover){#header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)))}:host([disabled]) #header:hover{background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}#header:hover,#header:hover+.icon-container{color:var(--luzmo-accordion-item-header-color-hover, var(--luzmo-font-color-hover))}:host([open]) #header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color)))}:host([disabled]) #header:hover{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color))}}:host([disabled]) #header+.icon-container{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color))}:host([disabled]) #content{color:var(--luzmo-accordion-item-content-disabled-color, var(--luzmo-disabled-color))}:host([open])>#heading>.icon-container>.indicator,:host([open])>.icon-container>.indicator{transform:var(--luzmo-logical-rotation) rotate(90deg);transform:rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}@media (forced-colors: active){#header:after{forced-color-adjust:none;content:"";position:absolute;inset-inline-start:0}}:host{display:block}#heading{height:auto;position:relative}:host([disabled]) #heading .indicator{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-disabled-color))}';
|
|
111
111
|
var E = Object.defineProperty, u = (i, o, r, n) => {
|
|
112
112
|
for (var e = void 0, t = i.length - 1, l; t >= 0; t--)
|
|
113
113
|
(l = i[t]) && (e = l(o, r, e) || e);
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),e=require("lit/decorators.js"),b=require("lit/directives/if-defined.js"),p=require("../base-DxRGeCrb.cjs"),d=require("../focus-visible-D4BXb5RB.cjs");require("../action-group-_gt0SxJg.cjs");require("../close-button-CSGamYgn.cjs");require("../field-label-CYC-u_Cq.cjs");require("../popover-
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),e=require("lit/decorators.js"),b=require("lit/directives/if-defined.js"),p=require("../base-DxRGeCrb.cjs"),d=require("../focus-visible-D4BXb5RB.cjs");require("../action-group-_gt0SxJg.cjs");require("../close-button-CSGamYgn.cjs");require("../field-label-CYC-u_Cq.cjs");require("../popover-DoH42mv2.cjs");const m="@media (forced-colors: active){:host,:host([emphasized]) #popover{--highcontrast-action-bar-popover-border-color: CanvasText}}:host{padding:0 var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge));z-index:1;box-sizing:border-box;pointer-events:none;block-size:0;opacity:0;inset-block-end:0}:host([open]){block-size:calc(var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge)) + var(--luzmo-action-bar-height, var(--action-bar-height)));opacity:1}#popover{block-size:var(--luzmo-action-bar-height, var(--action-bar-height));box-sizing:border-box;inline-size:100%;border-radius:var(--luzmo-action-bar-border-radius, var(--action-bar-border-radius));border-color:var(--highcontrast-action-bar-popover-border-color, var(--luzmo-action-bar-popover-border-color, var(--action-bar-popover-border-color)));background-color:var(--luzmo-action-bar-popover-background-color, var(--action-bar-popover-background-color));filter:drop-shadow(var(--luzmo-action-bar-shadow-horizontal, var(--action-bar-shadow-horizontal)) var(--luzmo-action-bar-shadow-vertical, var(--action-bar-shadow-vertical)) var(--luzmo-action-bar-shadow-blur, var(--action-bar-shadow-blur)) var(--luzmo-action-bar-shadow-color, var(--action-bar-shadow-color)));pointer-events:auto;flex-direction:row;margin:auto;padding-block:0;display:flex;position:relative}.close-button{flex-shrink:0;margin-block-start:var(--luzmo-action-bar-spacing-close-button-top, var(--action-bar-spacing-close-button-top));margin-inline-start:var(--luzmo-action-bar-spacing-close-button-start, var(--action-bar-spacing-close-button-start));margin-inline-end:var(--luzmo-action-bar-spacing-close-button-end, var(--action-bar-spacing-close-button-end))}.field-label{font-size:var(--luzmo-action-bar-item-counter-font-size, var(--action-bar-item-counter-font-size));color:var(--luzmo-action-bar-item-counter-color, var(--action-bar-item-counter-color));line-height:var(--luzmo-action-bar-item-counter-line-height, var(--action-bar-item-counter-line-height));margin-block-start:var(--luzmo-action-bar-spacing-item-counter-top, var(--action-bar-spacing-item-counter-top));margin-inline-end:var(--luzmo-action-bar-spacing-item-counter-end, var(--action-bar-spacing-item-counter-end));padding:0}.field-label:lang(ja),.field-label:lang(ko),.field-label:lang(zh){line-height:var(--luzmo-action-bar-item-counter-line-height-cjk, var(--action-bar-item-counter-line-height-cjk))}.action-group{margin-block-start:var(--luzmo-action-bar-spacing-action-group-top, var(--action-bar-spacing-action-group-top));margin-inline-start:auto;margin-inline-end:var(--luzmo-action-bar-spacing-action-group-end, var(--action-bar-spacing-action-group-end))}:host([emphasized]) #popover{filter:none;background-color:var(--luzmo-action-bar-emphasized-background-color, var(--action-bar-emphasized-background-color));border-color:#0000}:host([emphasized]) .field-label{color:var(--luzmo-action-bar-emphasized-item-counter-color, var(--action-bar-emphasized-item-counter-color))}:host([variant=sticky]){position:sticky;inset-inline:0}:host([variant=fixed]){position:fixed}:host([flexible]) #popover{inline-size:auto}:host{--action-bar-height: var(--luzmo-component-height-xl);--action-bar-border-radius: var(--luzmo-border-radius);--action-bar-item-counter-font-size: var(--luzmo-font-size);--action-bar-item-counter-line-height: var(--luzmo-line-height);--action-bar-item-counter-color: var(--luzmo-font-color);--action-bar-item-counter-line-height-cjk: 1.5;--action-bar-popover-background-color: var(--luzmo-background-color);--action-bar-popover-border-color: var(--luzmo-border-color);--action-bar-emphasized-background-color: var(--luzmo-primary);--action-bar-emphasized-item-counter-color: var( --luzmo-primary-inverse-color );--action-bar-spacing-outer-edge: var(-luzmo-spacing-5);--action-bar-spacing-close-button-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-start: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-end: var(--luzmo-spacing-3);--action-bar-spacing-item-counter-top: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--action-bar-spacing-item-counter-end: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--action-bar-spacing-action-group-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-action-group-end: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-shadow-horizontal: 0;--action-bar-shadow-vertical: 1px;--action-bar-shadow-blur: 4px;--action-bar-shadow-color: var(--luzmo-border-color)}:host{display:block}:host([flexible]){display:inline-block}";var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,i=(n,o,c,t)=>{for(var a=t>1?void 0:t?h(o,c):o,l=n.length-1,s;l>=0;l--)(s=n[l])&&(a=(t?s(o,c,a):s(a))||a);return t&&a&&v(o,c,a),a};const g=["sticky","fixed"];class r extends d.FocusVisiblePolyfillMixin(p.LuzmoElement){constructor(){super(...arguments),this.emphasized=!1,this.flexible=!1,this.open=!1,this._variant=""}static get styles(){return[u.unsafeCSS(m)]}set variant(o){if(o!==this.variant){if(g.includes(o)){this.setAttribute("variant",o),this._variant=o;return}this.removeAttribute("variant"),this._variant=""}}get variant(){return this._variant}handleClick(){this.open=!1,this.dispatchEvent(new Event("close",{bubbles:!0,composed:!0,cancelable:!0}))||(this.open=!0)}render(){return u.html`
|
|
19
19
|
<luzmo-popover ?open=${this.open} id="popover">
|
|
20
20
|
<slot name="override">
|
|
21
21
|
<luzmo-close-button
|
|
@@ -23,7 +23,7 @@ import { F as z } from "../focus-visible-BvScGDCE.js";
|
|
|
23
23
|
import "../action-group-CqAXlI_I.js";
|
|
24
24
|
import "../close-button-po7k74tH.js";
|
|
25
25
|
import "../field-label-BxW2RJMY.js";
|
|
26
|
-
import "../popover-
|
|
26
|
+
import "../popover-9RrCrbbh.js";
|
|
27
27
|
const m = () => {
|
|
28
28
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
29
29
|
const r = document.createElement("style");
|
|
@@ -31,7 +31,7 @@ const m = () => {
|
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
m();
|
|
34
|
-
const g = "@media (forced-colors: active){:host,:host([emphasized]) #popover{--highcontrast-action-bar-popover-border-color: CanvasText}}:host{padding:0 var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge));z-index:1;box-sizing:border-box;pointer-events:none;block-size:0;opacity:0;inset-block-end:0}:host([open]){block-size:calc(var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge)) + var(--luzmo-action-bar-height, var(--action-bar-height)));opacity:1}#popover{block-size:var(--luzmo-action-bar-height, var(--action-bar-height));box-sizing:border-box;inline-size:100%;border-radius:var(--luzmo-action-bar-
|
|
34
|
+
const g = "@media (forced-colors: active){:host,:host([emphasized]) #popover{--highcontrast-action-bar-popover-border-color: CanvasText}}:host{padding:0 var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge));z-index:1;box-sizing:border-box;pointer-events:none;block-size:0;opacity:0;inset-block-end:0}:host([open]){block-size:calc(var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge)) + var(--luzmo-action-bar-height, var(--action-bar-height)));opacity:1}#popover{block-size:var(--luzmo-action-bar-height, var(--action-bar-height));box-sizing:border-box;inline-size:100%;border-radius:var(--luzmo-action-bar-border-radius, var(--action-bar-border-radius));border-color:var(--highcontrast-action-bar-popover-border-color, var(--luzmo-action-bar-popover-border-color, var(--action-bar-popover-border-color)));background-color:var(--luzmo-action-bar-popover-background-color, var(--action-bar-popover-background-color));filter:drop-shadow(var(--luzmo-action-bar-shadow-horizontal, var(--action-bar-shadow-horizontal)) var(--luzmo-action-bar-shadow-vertical, var(--action-bar-shadow-vertical)) var(--luzmo-action-bar-shadow-blur, var(--action-bar-shadow-blur)) var(--luzmo-action-bar-shadow-color, var(--action-bar-shadow-color)));pointer-events:auto;flex-direction:row;margin:auto;padding-block:0;display:flex;position:relative}.close-button{flex-shrink:0;margin-block-start:var(--luzmo-action-bar-spacing-close-button-top, var(--action-bar-spacing-close-button-top));margin-inline-start:var(--luzmo-action-bar-spacing-close-button-start, var(--action-bar-spacing-close-button-start));margin-inline-end:var(--luzmo-action-bar-spacing-close-button-end, var(--action-bar-spacing-close-button-end))}.field-label{font-size:var(--luzmo-action-bar-item-counter-font-size, var(--action-bar-item-counter-font-size));color:var(--luzmo-action-bar-item-counter-color, var(--action-bar-item-counter-color));line-height:var(--luzmo-action-bar-item-counter-line-height, var(--action-bar-item-counter-line-height));margin-block-start:var(--luzmo-action-bar-spacing-item-counter-top, var(--action-bar-spacing-item-counter-top));margin-inline-end:var(--luzmo-action-bar-spacing-item-counter-end, var(--action-bar-spacing-item-counter-end));padding:0}.field-label:lang(ja),.field-label:lang(ko),.field-label:lang(zh){line-height:var(--luzmo-action-bar-item-counter-line-height-cjk, var(--action-bar-item-counter-line-height-cjk))}.action-group{margin-block-start:var(--luzmo-action-bar-spacing-action-group-top, var(--action-bar-spacing-action-group-top));margin-inline-start:auto;margin-inline-end:var(--luzmo-action-bar-spacing-action-group-end, var(--action-bar-spacing-action-group-end))}:host([emphasized]) #popover{filter:none;background-color:var(--luzmo-action-bar-emphasized-background-color, var(--action-bar-emphasized-background-color));border-color:#0000}:host([emphasized]) .field-label{color:var(--luzmo-action-bar-emphasized-item-counter-color, var(--action-bar-emphasized-item-counter-color))}:host([variant=sticky]){position:sticky;inset-inline:0}:host([variant=fixed]){position:fixed}:host([flexible]) #popover{inline-size:auto}:host{--action-bar-height: var(--luzmo-component-height-xl);--action-bar-border-radius: var(--luzmo-border-radius);--action-bar-item-counter-font-size: var(--luzmo-font-size);--action-bar-item-counter-line-height: var(--luzmo-line-height);--action-bar-item-counter-color: var(--luzmo-font-color);--action-bar-item-counter-line-height-cjk: 1.5;--action-bar-popover-background-color: var(--luzmo-background-color);--action-bar-popover-border-color: var(--luzmo-border-color);--action-bar-emphasized-background-color: var(--luzmo-primary);--action-bar-emphasized-item-counter-color: var( --luzmo-primary-inverse-color );--action-bar-spacing-outer-edge: var(-luzmo-spacing-5);--action-bar-spacing-close-button-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-start: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-end: var(--luzmo-spacing-3);--action-bar-spacing-item-counter-top: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--action-bar-spacing-item-counter-end: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--action-bar-spacing-action-group-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-action-group-end: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-shadow-horizontal: 0;--action-bar-shadow-vertical: 1px;--action-bar-shadow-blur: 4px;--action-bar-shadow-color: var(--luzmo-border-color)}:host{display:block}:host([flexible]){display:inline-block}";
|
|
35
35
|
var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (r, o, n, t) => {
|
|
36
36
|
for (var a = t > 1 ? void 0 : t ? v(o, n) : o, c = r.length - 1, u; c >= 0; c--)
|
|
37
37
|
(u = r[c]) && (a = (t ? u(o, n, a) : u(a)) || a);
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),s=require("lit/decorators.js"),d=require("lit/directives/class-map.js"),h=require("../base-DxRGeCrb.cjs"),l=require("../language-resolution-DmX3Wy5I.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),p=":host{display:flex;font-family:var(--luzmo-chat-message-font-family, var(--chat-message-font-family));font-size:var(--luzmo-chat-message-font-size, var(--chat-message-font-size));line-height:var(--luzmo-chat-message-line-height, var(--chat-message-line-height));color:var(--highcontrast-chat-message-text-color, var(--luzmo-chat-message-text-color, var(--chat-message-text-color)))}:host([position=left]){justify-content:flex-start}:host([position=right]){justify-content:flex-end}:host([position=middle]){justify-content:center}.container{display:flex;gap:var(--luzmo-chat-message-avatar-gap, var(--chat-message-avatar-gap));max-width:var(--luzmo-chat-message-max-width, var(--chat-message-max-width))}.position-left{flex-direction:row}.position-left .avatar-wrapper{order:0}.position-left .message-wrapper{order:1;align-items:flex-start}.position-left .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius-bottom-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right{flex-direction:row-reverse}.position-right .avatar-wrapper{order:0}.position-right .message-wrapper{order:1;align-items:flex-end}.position-right .header{justify-content:flex-end}.position-right .message{border-top-right-radius:var(--luzmo-chat-message-message-border-radius-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius-bottom-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right .actions-outside{justify-content:flex-end}.position-middle .message-wrapper{align-items:center}.position-middle .header,.position-middle .actions-outside{justify-content:center}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-start;margin-top:var(--luzmo-chat-message-avatar-margin-top, var(--chat-message-avatar-margin-top, 0));margin-bottom:var(--luzmo-chat-message-avatar-margin-bottom, var(--chat-message-avatar-margin-bottom, 0))}:host([data-in-group]) .avatar-wrapper{min-width:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)));flex-basis:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)))}:host([data-in-group]:not([data-group-square-corner])) .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important}.avatar-top .avatar-wrapper{align-self:flex-start}.avatar-middle .avatar-wrapper{align-self:center}.avatar-bottom .avatar-wrapper{align-self:flex-end}.avatar-middle .message-wrapper,.avatar-bottom .message-wrapper{position:relative}.avatar-middle .actions-outside,.avatar-bottom .actions-outside{position:absolute;top:100%;margin-top:var(--luzmo-chat-message-gap, var(--chat-message-gap))}.avatar-middle.position-left .actions-outside,.avatar-bottom.position-left .actions-outside{left:0}.avatar-middle.position-right .actions-outside,.avatar-bottom.position-right .actions-outside{right:0}.avatar-bottom.position-left .message{--luzmo-chat-message-message-border-radius-bottom-start: 0}.avatar-bottom.position-right .message{--luzmo-chat-message-message-border-radius-bottom-end: 0}.message-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-chat-message-gap, var(--chat-message-gap));min-width:0}.message{position:relative;padding:var(--luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding)) var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding));border-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-width:var(--luzmo-chat-message-message-border-width, var(--chat-message-message-border-width));border-style:solid;border-color:var(--highcontrast-chat-message-message-border-color, var(--luzmo-chat-message-message-border-color, var(--chat-message-message-border-color)));background-color:var(--highcontrast-chat-message-message-background-color, var(--luzmo-chat-message-message-background-color, var(--chat-message-message-background-color)));box-shadow:var(--luzmo-chat-message-message-shadow, var(--chat-message-message-shadow));color:var(--luzmo-chat-message-message-text-color, var(--chat-message-message-text-color));word-wrap:break-word;overflow-wrap:break-word}.message .header,.message .user-name,.message .datetime,.message .actions-inside{color:inherit}.message.squared-top-left{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-top-right{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-left{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-right{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}:host([data-group-square-corner=top-left]) .message{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=top-right]) .message{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-left]) .message{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-right]) .message{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}.header{display:flex;align-items:baseline;gap:var(--luzmo-chat-message-header-gap, var(--chat-message-header-gap));margin-bottom:var(--luzmo-chat-message-header-margin-bottom, var(--chat-message-header-margin-bottom));flex-wrap:wrap}:host([meta=outside]) .header{margin-bottom:0}.user-name{font-weight:var(--luzmo-chat-message-user-name-font-weight, var(--chat-message-user-name-font-weight));color:var(--luzmo-chat-message-user-name-color, var(--chat-message-user-name-color))}.datetime{font-size:var(--luzmo-chat-message-datetime-font-size, var(--chat-message-datetime-font-size));color:var(--luzmo-chat-message-datetime-color, var(--chat-message-datetime-color));opacity:var(--luzmo-chat-message-datetime-opacity, var(--chat-message-datetime-opacity))}.content{display:block}.actions{display:flex;gap:var(--luzmo-chat-message-actions-gap, var(--chat-message-actions-gap));align-items:center}.actions-inside{margin-top:var(--luzmo-chat-message-actions-margin-top, var(--chat-message-actions-margin-top))}.actions-outside{opacity:var(--luzmo-chat-message-actions-opacity, var(--chat-message-actions-opacity));transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out}:host(:hover) .actions-outside,:host(:focus-within) .actions-outside{opacity:var(--luzmo-chat-message-actions-opacity-hover, var(--chat-message-actions-opacity-hover))}::slotted([slot=avatar]){display:block}::slotted([slot=actions]){display:inline-flex;align-items:center}.extra-actions{position:absolute;top:var(--luzmo-chat-message-extra-actions-top, var(--chat-message-extra-actions-top));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right));bottom:var(--luzmo-chat-message-extra-actions-bottom, var(--chat-message-extra-actions-bottom));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left));padding:var(--luzmo-chat-message-extra-actions-vertical-padding, var(--chat-message-extra-actions-vertical-padding)) var(--luzmo-chat-message-extra-actions-horizontal-padding, var(--chat-message-extra-actions-horizontal-padding));opacity:0;pointer-events:none;transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out;z-index:10}:host([position=left]) .extra-actions{left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding)));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m]) .extra-actions{top:calc(-1 * var(--luzmo-spacing-5))}:host([size=m][position=right]) .extra-actions{left:calc(-1 * var(--luzmo-spacing-5));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m][position=middle]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}:host([size=m][position=left]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}.extra-actions-wrapper{display:inline-flex;align-items:center;background-color:var(--luzmo-chat-message-extra-actions-wrapper-background-color, var(--luzmo-background-color));border-radius:var(--luzmo-chat-message-extra-actions-wrapper-border-radius, var(--luzmo-border-radius));border-width:var(--luzmo-chat-message-extra-actions-wrapper-border-width, var(--luzmo-border-width));border-style:var(--luzmo-chat-message-extra-actions-wrapper-border-style, solid);border-color:var(--luzmo-chat-message-extra-actions-wrapper-border, var(--luzmo-border-color));padding:var(--luzmo-chat-message-extra-actions-wrapper-vertical-padding, var(--chat-message-extra-actions-wrapper-vertical-padding)) var(--luzmo-chat-message-extra-actions-wrapper-horizontal-padding, var(--chat-message-extra-actions-wrapper-horizontal-padding));position:var(--luzmo-chat-message-extra-actions-wrapper-position, var(--chat-message-extra-actions-wrapper-position), relative);top:var(--luzmo-chat-message-extra-actions-wrapper-top, var(--chat-message-extra-actions-wrapper-top));right:var(--luzmo-chat-message-extra-actions-wrapper-right, var(--chat-message-extra-actions-wrapper-right));bottom:var(--luzmo-chat-message-extra-actions-wrapper-bottom, var(--chat-message-extra-actions-wrapper-bottom));left:var(--luzmo-chat-message-extra-actions-wrapper-left, var(--chat-message-extra-actions-wrapper-left))}:host(:hover) .extra-actions,:host(:focus-within) .extra-actions{opacity:1;pointer-events:auto}:host(:active) .extra-actions{opacity:1;pointer-events:auto}::slotted([slot=extra-actions]){display:inline-flex;align-items:center}@media (forced-colors: active){:host{--highcontrast-chat-message-message-background-color: Canvas;--highcontrast-chat-message-message-border-color: CanvasText;--highcontrast-chat-message-text-color: CanvasText}}:host{--chat-message-message-border-width: var(--luzmo-border-width);--chat-message-message-border-color: var(--luzmo-border-color);--chat-message-message-background-color: var( --luzmo-background-color-highlight );--chat-message-message-shadow: 0 1px 2px rgba(var(--luzmo-border-color-rgb), .05);--chat-message-message-text-color: inherit;--chat-message-font-family: var(--luzmo-font-family);--chat-message-font-size: var(--luzmo-font-size);--chat-message-line-height: 1.5;--chat-message-text-color: var(--luzmo-font-color);--chat-message-header-gap: var(--luzmo-spacing-2);--chat-message-header-margin-bottom: var(--luzmo-spacing-1);--chat-message-user-name-font-weight: var(--luzmo-font-weight-bold, 600);--chat-message-user-name-color: var(--luzmo-font-color);--chat-message-datetime-font-size: .75em;--chat-message-datetime-color: var(--luzmo-font-color-secondary);--chat-message-datetime-opacity: .7;--chat-message-actions-gap: var(--luzmo-spacing-1);--chat-message-actions-margin-top: var(--luzmo-spacing-2);--chat-message-actions-opacity: 1;--chat-message-actions-opacity-hover: 1;--chat-message-animation-duration: var(--luzmo-animation-duration, .15s);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-3);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-primary-background-color: var(--luzmo-primary);--chat-message-primary-border-color: var(--luzmo-primary);--chat-message-primary-text-color: var(--luzmo-primary-inverse-color);--chat-message-primary-text-color-outline: var(--luzmo-primary);--chat-message-secondary-background-color: var(--luzmo-secondary);--chat-message-secondary-border-color: var(--luzmo-secondary);--chat-message-secondary-text-color: var(--luzmo-secondary-inverse-color);--chat-message-secondary-text-color-outline: var(--luzmo-secondary)}:host([position=middle]){--chat-message-max-width: 90%}:host{--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: var(--luzmo-spacing-4);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-4);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xs]){--chat-message-message-border-radius: var(--luzmo-border-radius);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 11px;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-1);--chat-message-avatar-gap: var(--luzmo-spacing-3)}:host([size=s]){--chat-message-message-border-radius: var(--luzmo-border-radius-l);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 12px;--chat-message-content-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-content-horizontal-padding: var(--luzmo-spacing-4);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 16px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-3);--chat-message-avatar-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xl]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 18px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: var(--luzmo-spacing-5);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-5)}:host([treatment=fill]){--chat-message-message-shadow: none}:host([variant=default][treatment=fill]){--chat-message-message-border-width: 0}:host([variant=primary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-primary-background-color );--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var(--chat-message-primary-text-color)}:host([variant=secondary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-secondary-background-color );--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var(--chat-message-secondary-text-color)}:host([treatment=outline]){--chat-message-message-background-color: transparent;--chat-message-message-shadow: none}:host([variant=primary][treatment=outline]){--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var( --chat-message-primary-text-color-outline )}:host([variant=secondary][treatment=outline]){--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var( --chat-message-secondary-text-color-outline )}:host([quiet]){--chat-message-message-background-color: transparent;--chat-message-message-border-color: transparent;--chat-message-message-border-width: 0;--chat-message-message-shadow: none;--chat-message-content-vertical-padding: 0;--chat-message-content-horizontal-padding: 0}:host([quiet][avatar-placement=top]){--chat-message-avatar-margin-top: calc( (var(--chat-message-line-height) - 1) / 2 * 1em )}:host([quiet][avatar-placement=bottom]){--chat-message-avatar-margin-bottom: calc( (var(--chat-message-line-height) - 1) / 2 * -1em )}:host([quiet][variant=primary]){--chat-message-primary-background-color: transparent;--chat-message-primary-border-color: transparent;--chat-message-primary-text-color: var(--luzmo-primary)}:host([quiet][variant=secondary]){--chat-message-secondary-background-color: transparent;--chat-message-secondary-border-color: transparent;--chat-message-secondary-text-color: var(--luzmo-secondary)}:host{--chat-message-extra-actions-top: var( --luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding) );--chat-message-extra-actions-right: var( --luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding) );--chat-message-extra-actions-bottom: auto;--chat-message-extra-actions-left: auto;--chat-message-extra-actions-vertical-padding: 0;--chat-message-extra-actions-horizontal-padding: 0;--chat-message-extra-actions-wrapper-background-color: var( --luzmo-border-color );--chat-message-extra-actions-wrapper-border-radius: var( --luzmo-border-radius );--chat-message-extra-actions-wrapper-border: none;--chat-message-extra-actions-wrapper-vertical-padding: var(--luzmo-spacing-1);--chat-message-extra-actions-wrapper-horizontal-padding: var( --luzmo-spacing-1 );--chat-message-extra-actions-wrapper-position: relative;--chat-message-extra-actions-wrapper-top: auto;--chat-message-extra-actions-wrapper-right: auto;--chat-message-extra-actions-wrapper-bottom: auto;--chat-message-extra-actions-wrapper-left: auto}";var v=Object.defineProperty,r=(m,a,o,n)=>{for(var i=void 0,c=m.length-1,g;c>=0;c--)(g=m[c])&&(i=g(a,o,i)||i);return i&&v(a,o,i),i};class e extends u.SizedMixin(h.LuzmoElement,{validSizes:["xs","s","m","l","xl"],defaultSize:"m"}){constructor(){super(...arguments),this.position="right",this.variant="default",this.treatment="fill",this.quiet=!1,this.meta="inside",this.actionsPosition="outside",this.avatarPlacement="top",this._hasAvatar=!1,this._hasActions=!1,this._hasExtraActions=!1,this.languageResolver=new l.LanguageResolutionController(this)}static get styles(){return[t.unsafeCSS(p)]}_handleAvatarSlotChange(a){const o=a.target;this._hasAvatar=o.assignedNodes().length>0}_handleActionsSlotChange(a){const o=a.target;this._hasActions=o.assignedNodes().length>0}_handleExtraActionsSlotChange(a){const o=a.target;this._hasExtraActions=o.assignedNodes().length>0}get formattedDatetime(){if(this.datetime)try{const a=new Date(this.datetime);if(Number.isNaN(a.getTime()))return;const o=this.datetimeFormatOptions||{hour:"numeric",minute:"numeric"};return new Intl.DateTimeFormat(this.datetimeLanguage||this.languageResolver.language||void 0,o).format(a)}catch{return}}get squaredCorners(){const a={topLeft:!1,topRight:!1,bottomLeft:!1,bottomRight:!1};if(this.position==="left")switch(this.avatarPlacement){case"top":{a.topLeft=!0;break}case"middle":break;case"bottom":{a.bottomLeft=!0;break}}else if(this.position==="right")switch(this.avatarPlacement){case"top":{a.topRight=!0;break}case"middle":break;case"bottom":{a.bottomRight=!0;break}}return a}renderMeta(){return!this.name&&!this.formattedDatetime?t.nothing:t.html`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),s=require("lit/decorators.js"),d=require("lit/directives/class-map.js"),h=require("../base-DxRGeCrb.cjs"),l=require("../language-resolution-DmX3Wy5I.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),p=":host{display:flex;width:100%;font-family:var(--luzmo-chat-message-font-family, var(--chat-message-font-family));font-size:var(--luzmo-chat-message-font-size, var(--chat-message-font-size));line-height:var(--luzmo-chat-message-line-height, var(--chat-message-line-height));color:var(--highcontrast-chat-message-text-color, var(--luzmo-chat-message-text-color, var(--chat-message-text-color)))}:host([position=left]){justify-content:flex-start}:host([position=right]){justify-content:flex-end}:host([position=middle]){justify-content:center}.container{display:flex;gap:var(--luzmo-chat-message-avatar-gap, var(--chat-message-avatar-gap));max-width:var(--luzmo-chat-message-max-width, var(--chat-message-max-width));width:fit-content}.position-left{flex-direction:row}.position-left .avatar-wrapper{order:0}.position-left .message-wrapper{order:1;align-items:flex-start}.position-left .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius-bottom-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right{flex-direction:row-reverse}.position-right .avatar-wrapper{order:0}.position-right .message-wrapper{order:1;align-items:flex-end}.position-right .header{justify-content:flex-end}.position-right .message{border-top-right-radius:var(--luzmo-chat-message-message-border-radius-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius-bottom-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right .actions-outside{justify-content:flex-end}.position-middle .message-wrapper{align-items:center}.position-middle .header,.position-middle .actions-outside{justify-content:center}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-start;margin-top:var(--luzmo-chat-message-avatar-margin-top, var(--chat-message-avatar-margin-top, 0));margin-bottom:var(--luzmo-chat-message-avatar-margin-bottom, var(--chat-message-avatar-margin-bottom, 0))}:host([data-in-group]) .avatar-wrapper{min-width:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)));flex-basis:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)))}:host([data-in-group]:not([data-group-square-border])) .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important}.avatar-top .avatar-wrapper{align-self:flex-start}.avatar-middle .avatar-wrapper{align-self:center}.avatar-bottom .avatar-wrapper{align-self:flex-end}.avatar-middle .message-wrapper,.avatar-bottom .message-wrapper{position:relative}.avatar-middle .actions-outside,.avatar-bottom .actions-outside{position:absolute;top:100%;margin-top:var(--luzmo-chat-message-gap, var(--chat-message-gap))}.avatar-middle.position-left .actions-outside,.avatar-bottom.position-left .actions-outside{left:0}.avatar-middle.position-right .actions-outside,.avatar-bottom.position-right .actions-outside{right:0}.avatar-bottom.position-left .message{--luzmo-chat-message-message-border-radius-bottom-start: 0}.avatar-bottom.position-right .message{--luzmo-chat-message-message-border-radius-bottom-end: 0}.message-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-chat-message-gap, var(--chat-message-gap));min-width:0}.message{position:relative;padding:var(--luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding)) var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding));border-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-width:var(--luzmo-chat-message-message-border-width, var(--chat-message-message-border-width));border-style:solid;border-color:var(--highcontrast-chat-message-message-border-color, var(--luzmo-chat-message-message-border-color, var(--chat-message-message-border-color)));background-color:var(--highcontrast-chat-message-message-background-color, var(--luzmo-chat-message-message-background-color, var(--chat-message-message-background-color)));box-shadow:var(--luzmo-chat-message-message-shadow, var(--chat-message-message-shadow));color:var(--luzmo-chat-message-message-text-color, var(--chat-message-message-text-color));word-wrap:break-word;overflow-wrap:break-word}.message .header,.message .user-name,.message .datetime,.message .actions-inside{color:inherit}.message.squared-top-left{border-top-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}.message.squared-top-right{border-top-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}.message.squared-bottom-left{border-bottom-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}.message.squared-bottom-right{border-bottom-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}:host([data-group-square-border=top-left]) .message{border-top-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-border=top-right]) .message{border-top-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-border=bottom-left]) .message{border-bottom-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-border=bottom-right]) .message{border-bottom-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}.header{display:flex;align-items:baseline;gap:var(--luzmo-chat-message-header-gap, var(--chat-message-header-gap));margin-bottom:var(--luzmo-chat-message-header-margin-bottom, var(--chat-message-header-margin-bottom));flex-wrap:wrap}:host([meta=outside]) .header{margin-bottom:0}.user-name{font-weight:var(--luzmo-chat-message-user-name-font-weight, var(--chat-message-user-name-font-weight));color:var(--luzmo-chat-message-user-name-color, var(--chat-message-user-name-color))}.datetime{font-size:var(--luzmo-chat-message-datetime-font-size, var(--chat-message-datetime-font-size));color:var(--luzmo-chat-message-datetime-color, var(--chat-message-datetime-color));opacity:var(--luzmo-chat-message-datetime-opacity, var(--chat-message-datetime-opacity))}.content{display:block}.actions{display:flex;gap:var(--luzmo-chat-message-actions-gap, var(--chat-message-actions-gap));align-items:center}.actions-inside{margin-top:var(--luzmo-chat-message-actions-margin-top, var(--chat-message-actions-margin-top))}.actions-outside{opacity:var(--luzmo-chat-message-actions-opacity, var(--chat-message-actions-opacity));transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out}:host(:hover) .actions-outside,:host(:focus-within) .actions-outside{opacity:var(--luzmo-chat-message-actions-opacity-hover, var(--chat-message-actions-opacity-hover))}::slotted([slot=avatar]){display:block}::slotted([slot=actions]){display:inline-flex;align-items:center}.extra-actions{position:absolute;top:var(--luzmo-chat-message-extra-actions-top, var(--chat-message-extra-actions-top));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right));bottom:var(--luzmo-chat-message-extra-actions-bottom, var(--chat-message-extra-actions-bottom));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left));padding:var(--luzmo-chat-message-extra-actions-vertical-padding, var(--chat-message-extra-actions-vertical-padding)) var(--luzmo-chat-message-extra-actions-horizontal-padding, var(--chat-message-extra-actions-horizontal-padding));opacity:0;pointer-events:none;transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out;z-index:10}:host([position=left]) .extra-actions{left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding)));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m]) .extra-actions{top:calc(-1 * var(--luzmo-spacing-5))}:host([size=m][position=right]) .extra-actions{left:calc(-1 * var(--luzmo-spacing-5));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m][position=middle]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}:host([size=m][position=left]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}.extra-actions-wrapper{display:inline-flex;align-items:center;background-color:var(--luzmo-chat-message-extra-actions-wrapper-background-color, var(--luzmo-background-color));border-radius:var(--luzmo-chat-message-extra-actions-wrapper-border-radius, var(--luzmo-border-radius));border-width:var(--luzmo-chat-message-extra-actions-wrapper-border-width, var(--luzmo-border-width));border-style:var(--luzmo-chat-message-extra-actions-wrapper-border-style, solid);border-color:var(--luzmo-chat-message-extra-actions-wrapper-border, var(--luzmo-border-color));padding:var(--luzmo-chat-message-extra-actions-wrapper-vertical-padding, var(--chat-message-extra-actions-wrapper-vertical-padding)) var(--luzmo-chat-message-extra-actions-wrapper-horizontal-padding, var(--chat-message-extra-actions-wrapper-horizontal-padding));position:var(--luzmo-chat-message-extra-actions-wrapper-position, var(--chat-message-extra-actions-wrapper-position), relative);top:var(--luzmo-chat-message-extra-actions-wrapper-top, var(--chat-message-extra-actions-wrapper-top));right:var(--luzmo-chat-message-extra-actions-wrapper-right, var(--chat-message-extra-actions-wrapper-right));bottom:var(--luzmo-chat-message-extra-actions-wrapper-bottom, var(--chat-message-extra-actions-wrapper-bottom));left:var(--luzmo-chat-message-extra-actions-wrapper-left, var(--chat-message-extra-actions-wrapper-left))}:host(:hover) .extra-actions,:host(:focus-within) .extra-actions{opacity:1;pointer-events:auto}:host(:active) .extra-actions{opacity:1;pointer-events:auto}::slotted([slot=extra-actions]){display:inline-flex;align-items:center}@media (forced-colors: active){:host{--highcontrast-chat-message-message-background-color: Canvas;--highcontrast-chat-message-message-border-color: CanvasText;--highcontrast-chat-message-text-color: CanvasText}}:host{--chat-message-message-border-width: var(--luzmo-border-width);--chat-message-message-border-color: var(--luzmo-border-color);--chat-message-message-background-color: var( --luzmo-background-color-highlight );--chat-message-message-shadow: 0 1px 2px rgba(var(--luzmo-border-color-rgb), .05);--chat-message-message-text-color: inherit;--chat-message-font-family: var(--luzmo-font-family);--chat-message-font-size: var(--luzmo-font-size);--chat-message-line-height: 1.5;--chat-message-text-color: var(--luzmo-font-color);--chat-message-header-gap: var(--luzmo-spacing-2);--chat-message-header-margin-bottom: var(--luzmo-spacing-1);--chat-message-user-name-font-weight: var(--luzmo-font-weight-bold, 600);--chat-message-user-name-color: var(--luzmo-font-color);--chat-message-datetime-font-size: .75em;--chat-message-datetime-color: var(--luzmo-font-color-secondary);--chat-message-datetime-opacity: .7;--chat-message-actions-gap: var(--luzmo-spacing-1);--chat-message-actions-margin-top: var(--luzmo-spacing-2);--chat-message-actions-opacity: 1;--chat-message-actions-opacity-hover: 1;--chat-message-animation-duration: var(--luzmo-animation-duration, .15s);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-3);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-primary-background-color: var(--luzmo-primary);--chat-message-primary-border-color: var(--luzmo-primary);--chat-message-primary-text-color: var(--luzmo-primary-inverse-color);--chat-message-primary-text-color-outline: var(--luzmo-primary);--chat-message-secondary-background-color: var(--luzmo-secondary);--chat-message-secondary-border-color: var(--luzmo-secondary);--chat-message-secondary-text-color: var(--luzmo-secondary-inverse-color);--chat-message-secondary-text-color-outline: var(--luzmo-secondary)}:host([position=middle]){--chat-message-max-width: 90%}:host{--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-border-radius: var(--luzmo-border-radius-s);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: var(--luzmo-spacing-4);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-4);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xs]){--chat-message-message-border-radius: var(--luzmo-border-radius);--chat-message-squared-border-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 11px;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-1);--chat-message-avatar-gap: var(--luzmo-spacing-3)}:host([size=s]){--chat-message-message-border-radius: var(--luzmo-border-radius-l);--chat-message-squared-border-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 12px;--chat-message-content-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-content-horizontal-padding: var(--luzmo-spacing-4);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-border-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 16px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-3);--chat-message-avatar-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xl]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-border-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 18px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: var(--luzmo-spacing-5);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-5)}:host([treatment=fill]){--chat-message-message-shadow: none}:host([variant=default][treatment=fill]){--chat-message-message-border-width: 0}:host([variant=primary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-primary-background-color );--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var(--chat-message-primary-text-color)}:host([variant=secondary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-secondary-background-color );--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var(--chat-message-secondary-text-color)}:host([treatment=outline]){--chat-message-message-background-color: transparent;--chat-message-message-shadow: none}:host([variant=primary][treatment=outline]){--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var( --chat-message-primary-text-color-outline )}:host([variant=secondary][treatment=outline]){--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var( --chat-message-secondary-text-color-outline )}:host([quiet]){--chat-message-message-background-color: transparent;--chat-message-message-border-color: transparent;--chat-message-message-border-width: 0;--chat-message-message-shadow: none;--chat-message-content-vertical-padding: 0;--chat-message-content-horizontal-padding: 0}:host([quiet][avatar-placement=top]){--chat-message-avatar-margin-top: calc( (var(--chat-message-line-height) - 1) / 2 * 1em )}:host([quiet][avatar-placement=bottom]){--chat-message-avatar-margin-bottom: calc( (var(--chat-message-line-height) - 1) / 2 * -1em )}:host([quiet][variant=primary]){--chat-message-primary-background-color: transparent;--chat-message-primary-border-color: transparent;--chat-message-primary-text-color: var(--luzmo-primary)}:host([quiet][variant=secondary]){--chat-message-secondary-background-color: transparent;--chat-message-secondary-border-color: transparent;--chat-message-secondary-text-color: var(--luzmo-secondary)}:host{--chat-message-extra-actions-top: var( --luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding) );--chat-message-extra-actions-right: var( --luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding) );--chat-message-extra-actions-bottom: auto;--chat-message-extra-actions-left: auto;--chat-message-extra-actions-vertical-padding: 0;--chat-message-extra-actions-horizontal-padding: 0;--chat-message-extra-actions-wrapper-background-color: var( --luzmo-border-color );--chat-message-extra-actions-wrapper-border-radius: var( --luzmo-border-radius );--chat-message-extra-actions-wrapper-border: none;--chat-message-extra-actions-wrapper-vertical-padding: var(--luzmo-spacing-1);--chat-message-extra-actions-wrapper-horizontal-padding: var( --luzmo-spacing-1 );--chat-message-extra-actions-wrapper-position: relative;--chat-message-extra-actions-wrapper-top: auto;--chat-message-extra-actions-wrapper-right: auto;--chat-message-extra-actions-wrapper-bottom: auto;--chat-message-extra-actions-wrapper-left: auto}";var v=Object.defineProperty,r=(m,a,o,n)=>{for(var i=void 0,c=m.length-1,g;c>=0;c--)(g=m[c])&&(i=g(a,o,i)||i);return i&&v(a,o,i),i};class e extends u.SizedMixin(h.LuzmoElement,{validSizes:["xs","s","m","l","xl"],defaultSize:"m"}){constructor(){super(...arguments),this.position="right",this.variant="default",this.treatment="fill",this.quiet=!1,this.meta="inside",this.actionsPosition="outside",this.avatarPlacement="top",this._hasAvatar=!1,this._hasActions=!1,this._hasExtraActions=!1,this.languageResolver=new l.LanguageResolutionController(this)}static get styles(){return[t.unsafeCSS(p)]}_handleAvatarSlotChange(a){const o=a.target;this._hasAvatar=o.assignedNodes().length>0}_handleActionsSlotChange(a){const o=a.target;this._hasActions=o.assignedNodes().length>0}_handleExtraActionsSlotChange(a){const o=a.target;this._hasExtraActions=o.assignedNodes().length>0}get formattedDatetime(){if(this.datetime)try{const a=new Date(this.datetime);if(Number.isNaN(a.getTime()))return;const o=this.datetimeFormatOptions||{hour:"numeric",minute:"numeric"};return new Intl.DateTimeFormat(this.datetimeLanguage||this.languageResolver.language||void 0,o).format(a)}catch{return}}get squaredCorners(){const a={topLeft:!1,topRight:!1,bottomLeft:!1,bottomRight:!1};if(this.position==="left")switch(this.avatarPlacement){case"top":{a.topLeft=!0;break}case"middle":break;case"bottom":{a.bottomLeft=!0;break}}else if(this.position==="right")switch(this.avatarPlacement){case"top":{a.topRight=!0;break}case"middle":break;case"bottom":{a.bottomRight=!0;break}}return a}renderMeta(){return!this.name&&!this.formattedDatetime?t.nothing:t.html`
|
|
19
19
|
<div class="header" part="header">
|
|
20
20
|
${this.name?t.html`<span class="user-name">${this.name}</span>`:t.nothing}
|
|
21
21
|
${this.formattedDatetime?t.html`<time class="datetime" datetime=${this.datetime||""}>
|
|
@@ -28,7 +28,7 @@ const u = () => {
|
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
u();
|
|
31
|
-
const f = ":host{display:flex;font-family:var(--luzmo-chat-message-font-family, var(--chat-message-font-family));font-size:var(--luzmo-chat-message-font-size, var(--chat-message-font-size));line-height:var(--luzmo-chat-message-line-height, var(--chat-message-line-height));color:var(--highcontrast-chat-message-text-color, var(--luzmo-chat-message-text-color, var(--chat-message-text-color)))}:host([position=left]){justify-content:flex-start}:host([position=right]){justify-content:flex-end}:host([position=middle]){justify-content:center}.container{display:flex;gap:var(--luzmo-chat-message-avatar-gap, var(--chat-message-avatar-gap));max-width:var(--luzmo-chat-message-max-width, var(--chat-message-max-width))}.position-left{flex-direction:row}.position-left .avatar-wrapper{order:0}.position-left .message-wrapper{order:1;align-items:flex-start}.position-left .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius-bottom-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right{flex-direction:row-reverse}.position-right .avatar-wrapper{order:0}.position-right .message-wrapper{order:1;align-items:flex-end}.position-right .header{justify-content:flex-end}.position-right .message{border-top-right-radius:var(--luzmo-chat-message-message-border-radius-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius-bottom-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right .actions-outside{justify-content:flex-end}.position-middle .message-wrapper{align-items:center}.position-middle .header,.position-middle .actions-outside{justify-content:center}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-start;margin-top:var(--luzmo-chat-message-avatar-margin-top, var(--chat-message-avatar-margin-top, 0));margin-bottom:var(--luzmo-chat-message-avatar-margin-bottom, var(--chat-message-avatar-margin-bottom, 0))}:host([data-in-group]) .avatar-wrapper{min-width:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)));flex-basis:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)))}:host([data-in-group]:not([data-group-square-corner])) .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important}.avatar-top .avatar-wrapper{align-self:flex-start}.avatar-middle .avatar-wrapper{align-self:center}.avatar-bottom .avatar-wrapper{align-self:flex-end}.avatar-middle .message-wrapper,.avatar-bottom .message-wrapper{position:relative}.avatar-middle .actions-outside,.avatar-bottom .actions-outside{position:absolute;top:100%;margin-top:var(--luzmo-chat-message-gap, var(--chat-message-gap))}.avatar-middle.position-left .actions-outside,.avatar-bottom.position-left .actions-outside{left:0}.avatar-middle.position-right .actions-outside,.avatar-bottom.position-right .actions-outside{right:0}.avatar-bottom.position-left .message{--luzmo-chat-message-message-border-radius-bottom-start: 0}.avatar-bottom.position-right .message{--luzmo-chat-message-message-border-radius-bottom-end: 0}.message-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-chat-message-gap, var(--chat-message-gap));min-width:0}.message{position:relative;padding:var(--luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding)) var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding));border-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-width:var(--luzmo-chat-message-message-border-width, var(--chat-message-message-border-width));border-style:solid;border-color:var(--highcontrast-chat-message-message-border-color, var(--luzmo-chat-message-message-border-color, var(--chat-message-message-border-color)));background-color:var(--highcontrast-chat-message-message-background-color, var(--luzmo-chat-message-message-background-color, var(--chat-message-message-background-color)));box-shadow:var(--luzmo-chat-message-message-shadow, var(--chat-message-message-shadow));color:var(--luzmo-chat-message-message-text-color, var(--chat-message-message-text-color));word-wrap:break-word;overflow-wrap:break-word}.message .header,.message .user-name,.message .datetime,.message .actions-inside{color:inherit}.message.squared-top-left{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-top-right{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-left{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-right{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}:host([data-group-square-corner=top-left]) .message{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=top-right]) .message{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-left]) .message{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-right]) .message{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}.header{display:flex;align-items:baseline;gap:var(--luzmo-chat-message-header-gap, var(--chat-message-header-gap));margin-bottom:var(--luzmo-chat-message-header-margin-bottom, var(--chat-message-header-margin-bottom));flex-wrap:wrap}:host([meta=outside]) .header{margin-bottom:0}.user-name{font-weight:var(--luzmo-chat-message-user-name-font-weight, var(--chat-message-user-name-font-weight));color:var(--luzmo-chat-message-user-name-color, var(--chat-message-user-name-color))}.datetime{font-size:var(--luzmo-chat-message-datetime-font-size, var(--chat-message-datetime-font-size));color:var(--luzmo-chat-message-datetime-color, var(--chat-message-datetime-color));opacity:var(--luzmo-chat-message-datetime-opacity, var(--chat-message-datetime-opacity))}.content{display:block}.actions{display:flex;gap:var(--luzmo-chat-message-actions-gap, var(--chat-message-actions-gap));align-items:center}.actions-inside{margin-top:var(--luzmo-chat-message-actions-margin-top, var(--chat-message-actions-margin-top))}.actions-outside{opacity:var(--luzmo-chat-message-actions-opacity, var(--chat-message-actions-opacity));transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out}:host(:hover) .actions-outside,:host(:focus-within) .actions-outside{opacity:var(--luzmo-chat-message-actions-opacity-hover, var(--chat-message-actions-opacity-hover))}::slotted([slot=avatar]){display:block}::slotted([slot=actions]){display:inline-flex;align-items:center}.extra-actions{position:absolute;top:var(--luzmo-chat-message-extra-actions-top, var(--chat-message-extra-actions-top));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right));bottom:var(--luzmo-chat-message-extra-actions-bottom, var(--chat-message-extra-actions-bottom));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left));padding:var(--luzmo-chat-message-extra-actions-vertical-padding, var(--chat-message-extra-actions-vertical-padding)) var(--luzmo-chat-message-extra-actions-horizontal-padding, var(--chat-message-extra-actions-horizontal-padding));opacity:0;pointer-events:none;transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out;z-index:10}:host([position=left]) .extra-actions{left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding)));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m]) .extra-actions{top:calc(-1 * var(--luzmo-spacing-5))}:host([size=m][position=right]) .extra-actions{left:calc(-1 * var(--luzmo-spacing-5));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m][position=middle]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}:host([size=m][position=left]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}.extra-actions-wrapper{display:inline-flex;align-items:center;background-color:var(--luzmo-chat-message-extra-actions-wrapper-background-color, var(--luzmo-background-color));border-radius:var(--luzmo-chat-message-extra-actions-wrapper-border-radius, var(--luzmo-border-radius));border-width:var(--luzmo-chat-message-extra-actions-wrapper-border-width, var(--luzmo-border-width));border-style:var(--luzmo-chat-message-extra-actions-wrapper-border-style, solid);border-color:var(--luzmo-chat-message-extra-actions-wrapper-border, var(--luzmo-border-color));padding:var(--luzmo-chat-message-extra-actions-wrapper-vertical-padding, var(--chat-message-extra-actions-wrapper-vertical-padding)) var(--luzmo-chat-message-extra-actions-wrapper-horizontal-padding, var(--chat-message-extra-actions-wrapper-horizontal-padding));position:var(--luzmo-chat-message-extra-actions-wrapper-position, var(--chat-message-extra-actions-wrapper-position), relative);top:var(--luzmo-chat-message-extra-actions-wrapper-top, var(--chat-message-extra-actions-wrapper-top));right:var(--luzmo-chat-message-extra-actions-wrapper-right, var(--chat-message-extra-actions-wrapper-right));bottom:var(--luzmo-chat-message-extra-actions-wrapper-bottom, var(--chat-message-extra-actions-wrapper-bottom));left:var(--luzmo-chat-message-extra-actions-wrapper-left, var(--chat-message-extra-actions-wrapper-left))}:host(:hover) .extra-actions,:host(:focus-within) .extra-actions{opacity:1;pointer-events:auto}:host(:active) .extra-actions{opacity:1;pointer-events:auto}::slotted([slot=extra-actions]){display:inline-flex;align-items:center}@media (forced-colors: active){:host{--highcontrast-chat-message-message-background-color: Canvas;--highcontrast-chat-message-message-border-color: CanvasText;--highcontrast-chat-message-text-color: CanvasText}}:host{--chat-message-message-border-width: var(--luzmo-border-width);--chat-message-message-border-color: var(--luzmo-border-color);--chat-message-message-background-color: var( --luzmo-background-color-highlight );--chat-message-message-shadow: 0 1px 2px rgba(var(--luzmo-border-color-rgb), .05);--chat-message-message-text-color: inherit;--chat-message-font-family: var(--luzmo-font-family);--chat-message-font-size: var(--luzmo-font-size);--chat-message-line-height: 1.5;--chat-message-text-color: var(--luzmo-font-color);--chat-message-header-gap: var(--luzmo-spacing-2);--chat-message-header-margin-bottom: var(--luzmo-spacing-1);--chat-message-user-name-font-weight: var(--luzmo-font-weight-bold, 600);--chat-message-user-name-color: var(--luzmo-font-color);--chat-message-datetime-font-size: .75em;--chat-message-datetime-color: var(--luzmo-font-color-secondary);--chat-message-datetime-opacity: .7;--chat-message-actions-gap: var(--luzmo-spacing-1);--chat-message-actions-margin-top: var(--luzmo-spacing-2);--chat-message-actions-opacity: 1;--chat-message-actions-opacity-hover: 1;--chat-message-animation-duration: var(--luzmo-animation-duration, .15s);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-3);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-primary-background-color: var(--luzmo-primary);--chat-message-primary-border-color: var(--luzmo-primary);--chat-message-primary-text-color: var(--luzmo-primary-inverse-color);--chat-message-primary-text-color-outline: var(--luzmo-primary);--chat-message-secondary-background-color: var(--luzmo-secondary);--chat-message-secondary-border-color: var(--luzmo-secondary);--chat-message-secondary-text-color: var(--luzmo-secondary-inverse-color);--chat-message-secondary-text-color-outline: var(--luzmo-secondary)}:host([position=middle]){--chat-message-max-width: 90%}:host{--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: var(--luzmo-spacing-4);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-4);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xs]){--chat-message-message-border-radius: var(--luzmo-border-radius);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 11px;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-1);--chat-message-avatar-gap: var(--luzmo-spacing-3)}:host([size=s]){--chat-message-message-border-radius: var(--luzmo-border-radius-l);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 12px;--chat-message-content-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-content-horizontal-padding: var(--luzmo-spacing-4);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 16px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-3);--chat-message-avatar-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xl]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 18px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: var(--luzmo-spacing-5);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-5)}:host([treatment=fill]){--chat-message-message-shadow: none}:host([variant=default][treatment=fill]){--chat-message-message-border-width: 0}:host([variant=primary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-primary-background-color );--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var(--chat-message-primary-text-color)}:host([variant=secondary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-secondary-background-color );--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var(--chat-message-secondary-text-color)}:host([treatment=outline]){--chat-message-message-background-color: transparent;--chat-message-message-shadow: none}:host([variant=primary][treatment=outline]){--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var( --chat-message-primary-text-color-outline )}:host([variant=secondary][treatment=outline]){--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var( --chat-message-secondary-text-color-outline )}:host([quiet]){--chat-message-message-background-color: transparent;--chat-message-message-border-color: transparent;--chat-message-message-border-width: 0;--chat-message-message-shadow: none;--chat-message-content-vertical-padding: 0;--chat-message-content-horizontal-padding: 0}:host([quiet][avatar-placement=top]){--chat-message-avatar-margin-top: calc( (var(--chat-message-line-height) - 1) / 2 * 1em )}:host([quiet][avatar-placement=bottom]){--chat-message-avatar-margin-bottom: calc( (var(--chat-message-line-height) - 1) / 2 * -1em )}:host([quiet][variant=primary]){--chat-message-primary-background-color: transparent;--chat-message-primary-border-color: transparent;--chat-message-primary-text-color: var(--luzmo-primary)}:host([quiet][variant=secondary]){--chat-message-secondary-background-color: transparent;--chat-message-secondary-border-color: transparent;--chat-message-secondary-text-color: var(--luzmo-secondary)}:host{--chat-message-extra-actions-top: var( --luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding) );--chat-message-extra-actions-right: var( --luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding) );--chat-message-extra-actions-bottom: auto;--chat-message-extra-actions-left: auto;--chat-message-extra-actions-vertical-padding: 0;--chat-message-extra-actions-horizontal-padding: 0;--chat-message-extra-actions-wrapper-background-color: var( --luzmo-border-color );--chat-message-extra-actions-wrapper-border-radius: var( --luzmo-border-radius );--chat-message-extra-actions-wrapper-border: none;--chat-message-extra-actions-wrapper-vertical-padding: var(--luzmo-spacing-1);--chat-message-extra-actions-wrapper-horizontal-padding: var( --luzmo-spacing-1 );--chat-message-extra-actions-wrapper-position: relative;--chat-message-extra-actions-wrapper-top: auto;--chat-message-extra-actions-wrapper-right: auto;--chat-message-extra-actions-wrapper-bottom: auto;--chat-message-extra-actions-wrapper-left: auto}";
|
|
31
|
+
const f = ":host{display:flex;width:100%;font-family:var(--luzmo-chat-message-font-family, var(--chat-message-font-family));font-size:var(--luzmo-chat-message-font-size, var(--chat-message-font-size));line-height:var(--luzmo-chat-message-line-height, var(--chat-message-line-height));color:var(--highcontrast-chat-message-text-color, var(--luzmo-chat-message-text-color, var(--chat-message-text-color)))}:host([position=left]){justify-content:flex-start}:host([position=right]){justify-content:flex-end}:host([position=middle]){justify-content:center}.container{display:flex;gap:var(--luzmo-chat-message-avatar-gap, var(--chat-message-avatar-gap));max-width:var(--luzmo-chat-message-max-width, var(--chat-message-max-width));width:fit-content}.position-left{flex-direction:row}.position-left .avatar-wrapper{order:0}.position-left .message-wrapper{order:1;align-items:flex-start}.position-left .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius-bottom-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right{flex-direction:row-reverse}.position-right .avatar-wrapper{order:0}.position-right .message-wrapper{order:1;align-items:flex-end}.position-right .header{justify-content:flex-end}.position-right .message{border-top-right-radius:var(--luzmo-chat-message-message-border-radius-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius-bottom-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right .actions-outside{justify-content:flex-end}.position-middle .message-wrapper{align-items:center}.position-middle .header,.position-middle .actions-outside{justify-content:center}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-start;margin-top:var(--luzmo-chat-message-avatar-margin-top, var(--chat-message-avatar-margin-top, 0));margin-bottom:var(--luzmo-chat-message-avatar-margin-bottom, var(--chat-message-avatar-margin-bottom, 0))}:host([data-in-group]) .avatar-wrapper{min-width:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)));flex-basis:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)))}:host([data-in-group]:not([data-group-square-border])) .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important}.avatar-top .avatar-wrapper{align-self:flex-start}.avatar-middle .avatar-wrapper{align-self:center}.avatar-bottom .avatar-wrapper{align-self:flex-end}.avatar-middle .message-wrapper,.avatar-bottom .message-wrapper{position:relative}.avatar-middle .actions-outside,.avatar-bottom .actions-outside{position:absolute;top:100%;margin-top:var(--luzmo-chat-message-gap, var(--chat-message-gap))}.avatar-middle.position-left .actions-outside,.avatar-bottom.position-left .actions-outside{left:0}.avatar-middle.position-right .actions-outside,.avatar-bottom.position-right .actions-outside{right:0}.avatar-bottom.position-left .message{--luzmo-chat-message-message-border-radius-bottom-start: 0}.avatar-bottom.position-right .message{--luzmo-chat-message-message-border-radius-bottom-end: 0}.message-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-chat-message-gap, var(--chat-message-gap));min-width:0}.message{position:relative;padding:var(--luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding)) var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding));border-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-width:var(--luzmo-chat-message-message-border-width, var(--chat-message-message-border-width));border-style:solid;border-color:var(--highcontrast-chat-message-message-border-color, var(--luzmo-chat-message-message-border-color, var(--chat-message-message-border-color)));background-color:var(--highcontrast-chat-message-message-background-color, var(--luzmo-chat-message-message-background-color, var(--chat-message-message-background-color)));box-shadow:var(--luzmo-chat-message-message-shadow, var(--chat-message-message-shadow));color:var(--luzmo-chat-message-message-text-color, var(--chat-message-message-text-color));word-wrap:break-word;overflow-wrap:break-word}.message .header,.message .user-name,.message .datetime,.message .actions-inside{color:inherit}.message.squared-top-left{border-top-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}.message.squared-top-right{border-top-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}.message.squared-bottom-left{border-bottom-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}.message.squared-bottom-right{border-bottom-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important}:host([data-group-square-border=top-left]) .message{border-top-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-border=top-right]) .message{border-top-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-border=bottom-left]) .message{border-bottom-left-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-border=bottom-right]) .message{border-bottom-right-radius:var(--luzmo-chat-message-squared-border-radius, var(--chat-message-squared-border-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}.header{display:flex;align-items:baseline;gap:var(--luzmo-chat-message-header-gap, var(--chat-message-header-gap));margin-bottom:var(--luzmo-chat-message-header-margin-bottom, var(--chat-message-header-margin-bottom));flex-wrap:wrap}:host([meta=outside]) .header{margin-bottom:0}.user-name{font-weight:var(--luzmo-chat-message-user-name-font-weight, var(--chat-message-user-name-font-weight));color:var(--luzmo-chat-message-user-name-color, var(--chat-message-user-name-color))}.datetime{font-size:var(--luzmo-chat-message-datetime-font-size, var(--chat-message-datetime-font-size));color:var(--luzmo-chat-message-datetime-color, var(--chat-message-datetime-color));opacity:var(--luzmo-chat-message-datetime-opacity, var(--chat-message-datetime-opacity))}.content{display:block}.actions{display:flex;gap:var(--luzmo-chat-message-actions-gap, var(--chat-message-actions-gap));align-items:center}.actions-inside{margin-top:var(--luzmo-chat-message-actions-margin-top, var(--chat-message-actions-margin-top))}.actions-outside{opacity:var(--luzmo-chat-message-actions-opacity, var(--chat-message-actions-opacity));transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out}:host(:hover) .actions-outside,:host(:focus-within) .actions-outside{opacity:var(--luzmo-chat-message-actions-opacity-hover, var(--chat-message-actions-opacity-hover))}::slotted([slot=avatar]){display:block}::slotted([slot=actions]){display:inline-flex;align-items:center}.extra-actions{position:absolute;top:var(--luzmo-chat-message-extra-actions-top, var(--chat-message-extra-actions-top));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right));bottom:var(--luzmo-chat-message-extra-actions-bottom, var(--chat-message-extra-actions-bottom));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left));padding:var(--luzmo-chat-message-extra-actions-vertical-padding, var(--chat-message-extra-actions-vertical-padding)) var(--luzmo-chat-message-extra-actions-horizontal-padding, var(--chat-message-extra-actions-horizontal-padding));opacity:0;pointer-events:none;transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out;z-index:10}:host([position=left]) .extra-actions{left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding)));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m]) .extra-actions{top:calc(-1 * var(--luzmo-spacing-5))}:host([size=m][position=right]) .extra-actions{left:calc(-1 * var(--luzmo-spacing-5));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m][position=middle]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}:host([size=m][position=left]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}.extra-actions-wrapper{display:inline-flex;align-items:center;background-color:var(--luzmo-chat-message-extra-actions-wrapper-background-color, var(--luzmo-background-color));border-radius:var(--luzmo-chat-message-extra-actions-wrapper-border-radius, var(--luzmo-border-radius));border-width:var(--luzmo-chat-message-extra-actions-wrapper-border-width, var(--luzmo-border-width));border-style:var(--luzmo-chat-message-extra-actions-wrapper-border-style, solid);border-color:var(--luzmo-chat-message-extra-actions-wrapper-border, var(--luzmo-border-color));padding:var(--luzmo-chat-message-extra-actions-wrapper-vertical-padding, var(--chat-message-extra-actions-wrapper-vertical-padding)) var(--luzmo-chat-message-extra-actions-wrapper-horizontal-padding, var(--chat-message-extra-actions-wrapper-horizontal-padding));position:var(--luzmo-chat-message-extra-actions-wrapper-position, var(--chat-message-extra-actions-wrapper-position), relative);top:var(--luzmo-chat-message-extra-actions-wrapper-top, var(--chat-message-extra-actions-wrapper-top));right:var(--luzmo-chat-message-extra-actions-wrapper-right, var(--chat-message-extra-actions-wrapper-right));bottom:var(--luzmo-chat-message-extra-actions-wrapper-bottom, var(--chat-message-extra-actions-wrapper-bottom));left:var(--luzmo-chat-message-extra-actions-wrapper-left, var(--chat-message-extra-actions-wrapper-left))}:host(:hover) .extra-actions,:host(:focus-within) .extra-actions{opacity:1;pointer-events:auto}:host(:active) .extra-actions{opacity:1;pointer-events:auto}::slotted([slot=extra-actions]){display:inline-flex;align-items:center}@media (forced-colors: active){:host{--highcontrast-chat-message-message-background-color: Canvas;--highcontrast-chat-message-message-border-color: CanvasText;--highcontrast-chat-message-text-color: CanvasText}}:host{--chat-message-message-border-width: var(--luzmo-border-width);--chat-message-message-border-color: var(--luzmo-border-color);--chat-message-message-background-color: var( --luzmo-background-color-highlight );--chat-message-message-shadow: 0 1px 2px rgba(var(--luzmo-border-color-rgb), .05);--chat-message-message-text-color: inherit;--chat-message-font-family: var(--luzmo-font-family);--chat-message-font-size: var(--luzmo-font-size);--chat-message-line-height: 1.5;--chat-message-text-color: var(--luzmo-font-color);--chat-message-header-gap: var(--luzmo-spacing-2);--chat-message-header-margin-bottom: var(--luzmo-spacing-1);--chat-message-user-name-font-weight: var(--luzmo-font-weight-bold, 600);--chat-message-user-name-color: var(--luzmo-font-color);--chat-message-datetime-font-size: .75em;--chat-message-datetime-color: var(--luzmo-font-color-secondary);--chat-message-datetime-opacity: .7;--chat-message-actions-gap: var(--luzmo-spacing-1);--chat-message-actions-margin-top: var(--luzmo-spacing-2);--chat-message-actions-opacity: 1;--chat-message-actions-opacity-hover: 1;--chat-message-animation-duration: var(--luzmo-animation-duration, .15s);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-3);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-primary-background-color: var(--luzmo-primary);--chat-message-primary-border-color: var(--luzmo-primary);--chat-message-primary-text-color: var(--luzmo-primary-inverse-color);--chat-message-primary-text-color-outline: var(--luzmo-primary);--chat-message-secondary-background-color: var(--luzmo-secondary);--chat-message-secondary-border-color: var(--luzmo-secondary);--chat-message-secondary-text-color: var(--luzmo-secondary-inverse-color);--chat-message-secondary-text-color-outline: var(--luzmo-secondary)}:host([position=middle]){--chat-message-max-width: 90%}:host{--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-border-radius: var(--luzmo-border-radius-s);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: var(--luzmo-spacing-4);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-4);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xs]){--chat-message-message-border-radius: var(--luzmo-border-radius);--chat-message-squared-border-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 11px;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-1);--chat-message-avatar-gap: var(--luzmo-spacing-3)}:host([size=s]){--chat-message-message-border-radius: var(--luzmo-border-radius-l);--chat-message-squared-border-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 12px;--chat-message-content-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-content-horizontal-padding: var(--luzmo-spacing-4);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-border-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 16px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-3);--chat-message-avatar-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xl]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-border-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 18px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: var(--luzmo-spacing-5);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-5)}:host([treatment=fill]){--chat-message-message-shadow: none}:host([variant=default][treatment=fill]){--chat-message-message-border-width: 0}:host([variant=primary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-primary-background-color );--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var(--chat-message-primary-text-color)}:host([variant=secondary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-secondary-background-color );--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var(--chat-message-secondary-text-color)}:host([treatment=outline]){--chat-message-message-background-color: transparent;--chat-message-message-shadow: none}:host([variant=primary][treatment=outline]){--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var( --chat-message-primary-text-color-outline )}:host([variant=secondary][treatment=outline]){--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var( --chat-message-secondary-text-color-outline )}:host([quiet]){--chat-message-message-background-color: transparent;--chat-message-message-border-color: transparent;--chat-message-message-border-width: 0;--chat-message-message-shadow: none;--chat-message-content-vertical-padding: 0;--chat-message-content-horizontal-padding: 0}:host([quiet][avatar-placement=top]){--chat-message-avatar-margin-top: calc( (var(--chat-message-line-height) - 1) / 2 * 1em )}:host([quiet][avatar-placement=bottom]){--chat-message-avatar-margin-bottom: calc( (var(--chat-message-line-height) - 1) / 2 * -1em )}:host([quiet][variant=primary]){--chat-message-primary-background-color: transparent;--chat-message-primary-border-color: transparent;--chat-message-primary-text-color: var(--luzmo-primary)}:host([quiet][variant=secondary]){--chat-message-secondary-background-color: transparent;--chat-message-secondary-border-color: transparent;--chat-message-secondary-text-color: var(--luzmo-secondary)}:host{--chat-message-extra-actions-top: var( --luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding) );--chat-message-extra-actions-right: var( --luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding) );--chat-message-extra-actions-bottom: auto;--chat-message-extra-actions-left: auto;--chat-message-extra-actions-vertical-padding: 0;--chat-message-extra-actions-horizontal-padding: 0;--chat-message-extra-actions-wrapper-background-color: var( --luzmo-border-color );--chat-message-extra-actions-wrapper-border-radius: var( --luzmo-border-radius );--chat-message-extra-actions-wrapper-border: none;--chat-message-extra-actions-wrapper-vertical-padding: var(--luzmo-spacing-1);--chat-message-extra-actions-wrapper-horizontal-padding: var( --luzmo-spacing-1 );--chat-message-extra-actions-wrapper-position: relative;--chat-message-extra-actions-wrapper-top: auto;--chat-message-extra-actions-wrapper-right: auto;--chat-message-extra-actions-wrapper-bottom: auto;--chat-message-extra-actions-wrapper-left: auto}";
|
|
32
32
|
var x = Object.defineProperty, t = (i, a, r, g) => {
|
|
33
33
|
for (var m = void 0, n = i.length - 1, d; n >= 0; n--)
|
|
34
34
|
(d = i[n]) && (m = d(a, r, m) || m);
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("lit"),f=require("lit/decorators.js"),b=require("../base-DxRGeCrb.cjs"),z=require("../sized-mixin-DcvJLFeo.cjs"),E=":host{gap:var(--luzmo-chat-message-group-spacing, var(--chat-message-group-spacing));display:flex;flex-direction:column}::slotted(*){flex-shrink:0}:host,:host([size=l]),:host([size=xl]){--chat-message-group-spacing: 4px}:host([size=s]),:host([size=xs]){--chat-message-group-spacing: 2px}:host([size=m]){--chat-message-group-spacing: 3px}";var q=Object.defineProperty,
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("lit"),f=require("lit/decorators.js"),b=require("../base-DxRGeCrb.cjs"),z=require("../sized-mixin-DcvJLFeo.cjs"),E=":host{gap:var(--luzmo-chat-message-group-spacing, var(--chat-message-group-spacing));display:flex;flex-direction:column;width:100%}::slotted(*){flex-shrink:0}:host,:host([size=l]),:host([size=xl]){--chat-message-group-spacing: 4px}:host([size=s]),:host([size=xs]){--chat-message-group-spacing: 2px}:host([size=m]){--chat-message-group-spacing: 3px}";var q=Object.defineProperty,d=(u,e,a,g)=>{for(var s=void 0,i=u.length-1,l;i>=0;i--)(l=u[i])&&(s=l(e,a,s)||s);return s&&q(e,a,s),s};class c extends z.SizedMixin(b.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.avatarPlacement="bottom",this._hasGroupAvatar=!1}static get styles(){return[S.unsafeCSS(E)]}_handleGroupAvatarSlotChange(e){const a=e.target;this._hasGroupAvatar=a.assignedNodes().length>0,this.configureMessages()}configureMessages(){const e=this._messages;if(!e||e.length===0)return;let a=-1;this.avatarPlacement==="top"?a=0:this.avatarPlacement==="bottom"?a=e.length-1:this.avatarPlacement==="middle"&&(a=Math.floor(e.length/2));const g=a>=0?e[a]:null;let s=null;const i=this.querySelector('slot[name="avatar"]');if(i instanceof HTMLSlotElement&&this._hasGroupAvatar){const t=i.assignedNodes();t.length>0&&t[0]instanceof HTMLElement&&(s=t[0])}let l=null;if(!s&&!this._hasGroupAvatar)for(const t of e){const o=t.querySelector('[slot="avatar"]');if(o instanceof HTMLElement){l=o;break}}const m=e[0],A=m.position,M=m.variant;e.forEach((t,o)=>{this.size&&(t.size=this.size),t.position=A,t.variant=M,t.dataset.inGroup="true";const P=o===a,v=t.querySelector('[slot="avatar"]'),r=v instanceof HTMLElement?v:null;if(P&&g===t)if(s){r&&r.remove();const n=s.cloneNode(!0);n.setAttribute("slot","avatar"),t.append(n)}else if(l)if(r===l)r.style.display="";else if(r)r.style.display="",l.style.display="none";else{const n=l.cloneNode(!0);n.setAttribute("slot","avatar"),t.append(n),l.style.display="none"}else r&&(r.style.display="");else r&&(r.style.display="none");let h=!1;this.avatarPlacement==="top"||this.avatarPlacement==="middle"?h=o===0:this.avatarPlacement==="bottom"&&(h=o===e.length-1),h?this.avatarPlacement==="bottom"&&o===e.length-1&&t.meta==="outside"&&(t.meta="inside"):(t.removeAttribute("name"),t.removeAttribute("datetime"));let p=!1;(this.avatarPlacement==="top"||this.avatarPlacement==="middle"||this.avatarPlacement==="bottom")&&(p=o===e.length-1);const y=t.querySelector('[slot="actions"]');y instanceof HTMLElement&&(y.style.display=p?"":"none"),t.avatarPlacement=this.avatarPlacement,delete t.dataset.groupSquareBorder,this.avatarPlacement==="top"&&o===0?t.position==="left"?t.dataset.groupSquareBorder="top-left":t.position==="right"&&(t.dataset.groupSquareBorder="top-right"):this.avatarPlacement==="bottom"&&o===e.length-1&&(t.position==="left"?t.dataset.groupSquareBorder="bottom-left":t.position==="right"&&(t.dataset.groupSquareBorder="bottom-right"))})}handleSlotchange(){this.configureMessages()}updated(e){super.updated(e),(e.has("avatarPlacement")||e.has("size"))&&this.configureMessages()}render(){return S.html`
|
|
19
19
|
<slot
|
|
20
20
|
name="avatar"
|
|
21
21
|
@slotchange=${this._handleGroupAvatarSlotChange}
|
|
22
22
|
></slot>
|
|
23
23
|
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
24
|
-
`}}
|
|
24
|
+
`}}d([f.property({type:String,reflect:!0,attribute:"avatar-placement"})],c.prototype,"avatarPlacement");d([f.queryAssignedElements()],c.prototype,"_messages");d([f.state()],c.prototype,"_hasGroupAvatar");customElements.get("luzmo-chat-message-group")||customElements.define("luzmo-chat-message-group",c);exports.LuzmoChatMessageGroup=c;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
18
|
import { unsafeCSS as S, html as A } from "lit";
|
|
19
|
-
import { property as
|
|
19
|
+
import { property as w, queryAssignedElements as M, state as P } from "lit/decorators.js";
|
|
20
20
|
import { a as E } from "../base-BUViEg_7.js";
|
|
21
21
|
import { S as k } from "../sized-mixin-cJbo3PKR.js";
|
|
22
22
|
const y = () => {
|
|
@@ -26,11 +26,11 @@ const y = () => {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
y();
|
|
29
|
-
const
|
|
30
|
-
var
|
|
29
|
+
const _ = ":host{gap:var(--luzmo-chat-message-group-spacing, var(--chat-message-group-spacing));display:flex;flex-direction:column;width:100%}::slotted(*){flex-shrink:0}:host,:host([size=l]),:host([size=xl]){--chat-message-group-spacing: 4px}:host([size=s]),:host([size=xs]){--chat-message-group-spacing: 2px}:host([size=m]){--chat-message-group-spacing: 3px}";
|
|
30
|
+
var q = Object.defineProperty, f = (i, e, t, z) => {
|
|
31
31
|
for (var l = void 0, n = i.length - 1, s; n >= 0; n--)
|
|
32
32
|
(s = i[n]) && (l = s(e, t, l) || l);
|
|
33
|
-
return l &&
|
|
33
|
+
return l && q(e, t, l), l;
|
|
34
34
|
};
|
|
35
35
|
class c extends k(E, {
|
|
36
36
|
noDefaultSize: !0
|
|
@@ -39,7 +39,7 @@ class c extends k(E, {
|
|
|
39
39
|
super(...arguments), this.avatarPlacement = "bottom", this._hasGroupAvatar = !1;
|
|
40
40
|
}
|
|
41
41
|
static get styles() {
|
|
42
|
-
return [S(
|
|
42
|
+
return [S(_)];
|
|
43
43
|
}
|
|
44
44
|
/**
|
|
45
45
|
* Handles group-level avatar slot changes.
|
|
@@ -80,7 +80,7 @@ class c extends k(E, {
|
|
|
80
80
|
const p = e[0], b = p.position, v = p.variant;
|
|
81
81
|
e.forEach((o, r) => {
|
|
82
82
|
this.size && (o.size = this.size), o.position = b, o.variant = v, o.dataset.inGroup = "true";
|
|
83
|
-
const x = r === t,
|
|
83
|
+
const x = r === t, h = o.querySelector('[slot="avatar"]'), a = h instanceof HTMLElement ? h : null;
|
|
84
84
|
if (x && z === o)
|
|
85
85
|
if (l) {
|
|
86
86
|
a && a.remove();
|
|
@@ -106,8 +106,8 @@ class c extends k(E, {
|
|
|
106
106
|
this.avatarPlacement === "top" || this.avatarPlacement === "middle" ? m = r === 0 : this.avatarPlacement === "bottom" && (m = r === e.length - 1), m ? this.avatarPlacement === "bottom" && r === e.length - 1 && o.meta === "outside" && (o.meta = "inside") : (o.removeAttribute("name"), o.removeAttribute("datetime"));
|
|
107
107
|
let d = !1;
|
|
108
108
|
(this.avatarPlacement === "top" || this.avatarPlacement === "middle" || this.avatarPlacement === "bottom") && (d = r === e.length - 1);
|
|
109
|
-
const
|
|
110
|
-
|
|
109
|
+
const g = o.querySelector('[slot="actions"]');
|
|
110
|
+
g instanceof HTMLElement && (g.style.display = d ? "" : "none"), o.avatarPlacement = this.avatarPlacement, delete o.dataset.groupSquareBorder, this.avatarPlacement === "top" && r === 0 ? o.position === "left" ? o.dataset.groupSquareBorder = "top-left" : o.position === "right" && (o.dataset.groupSquareBorder = "top-right") : this.avatarPlacement === "bottom" && r === e.length - 1 && (o.position === "left" ? o.dataset.groupSquareBorder = "bottom-left" : o.position === "right" && (o.dataset.groupSquareBorder = "bottom-right"));
|
|
111
111
|
});
|
|
112
112
|
}
|
|
113
113
|
/**
|
|
@@ -130,10 +130,10 @@ class c extends k(E, {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
f([
|
|
133
|
-
|
|
133
|
+
w({ type: String, reflect: !0, attribute: "avatar-placement" })
|
|
134
134
|
], c.prototype, "avatarPlacement");
|
|
135
135
|
f([
|
|
136
|
-
|
|
136
|
+
M()
|
|
137
137
|
], c.prototype, "_messages");
|
|
138
138
|
f([
|
|
139
139
|
P()
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@luzmo/icons"),r=require("lit"),t=require("lit/decorators.js"),d=require("../base-DxRGeCrb.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),x=require("../checkbox-mixin-DhN8CIXY.cjs"),v=':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-down)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-down)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-down)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-down)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-down)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-focus)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-down)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hover)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hover)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hover)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-focus)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-down)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin-block-start:calc(var(--luzmo-checkbox-spacing) / 2 - var(--checkbox-offset-for-baseline, 0px));margin-block-end:calc(var(--luzmo-checkbox-spacing) / 2 + var(--checkbox-offset-for-baseline, 0px));flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-s-offset-for-baseline, 1px )}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-m-offset-for-baseline, 1px )}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-l-offset-for-baseline, 1px )}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-xl-offset-for-baseline, 1px )}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';var m=Object.defineProperty,i=(n,o,s,f)=>{for(var c=void 0,l=n.length-1,b;l>=0;l--)(b=n[l])&&(c=b(o,s,c)||c);return c&&m(o,s,c),c};const k=()=>r.html`<div id="checkmark">${a.luzmoIcon(a.luzmoCheck)}</div>`,z=()=>r.html`<div id="partialCheckmark">${a.luzmoIcon(a.luzmoDash)}</div>`,h=class h extends u.SizedMixin(x.checkboxMixin(d.LuzmoElement),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.autofocus=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0,this._cachedTabIndex=null}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[r.unsafeCSS(v)]}click(){var o;this.disabled||(o=this.inputElement)==null||o.click()}handleChange(){this.indeterminate=!1,super.handleChange()}willUpdate(o){super.willUpdate(o),o.has("disabled")&&(this.disabled?(this._cachedTabIndex===null&&(this._cachedTabIndex=this.tabIndex),this.tabIndex=-1):this._cachedTabIndex!==null&&(this.tabIndex=this._cachedTabIndex,this._cachedTabIndex=null))}render(){return r.html`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@luzmo/icons"),r=require("lit"),t=require("lit/decorators.js"),d=require("../base-DxRGeCrb.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),x=require("../checkbox-mixin-DhN8CIXY.cjs"),v=':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-down)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-down)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-down)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-down)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-down)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-focus)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-down)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hover)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hover)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hover)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-focus)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-down)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin-block-start:calc(var(--luzmo-checkbox-spacing) / 2 - var(--checkbox-offset-for-baseline, 0px));margin-block-end:calc(var(--luzmo-checkbox-spacing) / 2 + var(--checkbox-offset-for-baseline, 0px));flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-border-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-border-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-s-offset-for-baseline, 1px )}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-m-offset-for-baseline, 1px )}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-l-offset-for-baseline, 1px )}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px);--checkbox-offset-for-baseline: var( --luzmo-checkbox-size-xl-offset-for-baseline, 1px )}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';var m=Object.defineProperty,i=(n,o,s,f)=>{for(var c=void 0,l=n.length-1,b;l>=0;l--)(b=n[l])&&(c=b(o,s,c)||c);return c&&m(o,s,c),c};const k=()=>r.html`<div id="checkmark">${a.luzmoIcon(a.luzmoCheck)}</div>`,z=()=>r.html`<div id="partialCheckmark">${a.luzmoIcon(a.luzmoDash)}</div>`,h=class h extends u.SizedMixin(x.checkboxMixin(d.LuzmoElement),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.autofocus=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0,this._cachedTabIndex=null}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[r.unsafeCSS(v)]}click(){var o;this.disabled||(o=this.inputElement)==null||o.click()}handleChange(){this.indeterminate=!1,super.handleChange()}willUpdate(o){super.willUpdate(o),o.has("disabled")&&(this.disabled?(this._cachedTabIndex===null&&(this._cachedTabIndex=this.tabIndex),this.tabIndex=-1):this._cachedTabIndex!==null&&(this.tabIndex=this._cachedTabIndex,this._cachedTabIndex=null))}render(){return r.html`
|
|
19
19
|
${super.render()}
|
|
20
20
|
<span id="box">
|
|
21
21
|
${this.checked?k():r.html``}
|