@luzmo/lucero 0.0.36 → 0.0.38
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.
|
@@ -3,9 +3,9 @@ import { LuzmoClearButton } from './clear-button';
|
|
|
3
3
|
import { LuzmoCloseButton } from './close-button';
|
|
4
4
|
declare global {
|
|
5
5
|
interface HTMLElementTagNameMap {
|
|
6
|
-
'luzmo-button': LuzmoButton;
|
|
7
|
-
'luzmo-clear-button': LuzmoClearButton;
|
|
8
|
-
'luzmo-close-button': LuzmoCloseButton;
|
|
6
|
+
'luzmo-button': LuzmoButton & HTMLElement;
|
|
7
|
+
'luzmo-clear-button': LuzmoClearButton & HTMLElement;
|
|
8
|
+
'luzmo-close-button': LuzmoCloseButton & HTMLElement;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
export { LuzmoButton } from './button';
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
* @license
|
|
71
71
|
* Copyright 2021 Google LLC
|
|
72
72
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
73
|
-
*/customElements.define("lit-virtualizer",C);const gt=":host{--options-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-options-section-divider-margin-block, max(0px, (var(--option-section-divider-height) - var(--options-divider-thickness)) / 2));margin-inline:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));overflow:visible}:host{display:block;flex-shrink:0}";class N extends D.SizedMixin(a.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[a.r(tt.dividerStyles),a.r(gt)]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","separator")}}const bt=":host{--option-top-to-action: var(--luzmo-spacing-1);--option-top-to-checkbox: var(--luzmo-spacing-1);--option-label-line-height: var(--luzmo-line-height);--option-label-line-height-cjk: 1.5;--option-label-to-description-spacing: 1px;--option-focus-indicator-width: var(--luzmo-indicator-width);--option-focus-indicator-color: var(--luzmo-indicator-color);--option-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--option-label-content-color-default: var(--luzmo-font-color);--option-label-content-color-hover: var(--luzmo-font-color-hover);--option-label-content-color-down: var(--luzmo-font-color-down);--option-label-content-color-focus: var(--luzmo-font-color-focus);--option-label-icon-color-default: var(--luzmo-font-color);--option-label-icon-color-hover: var(--luzmo-font-color-hover);--option-label-icon-color-down: var(--luzmo-font-color-down);--option-label-icon-color-focus: var(--luzmo-font-color-focus);--option-highlight-selected-label-background-color: var(--luzmo-primary);--option-highlight-selected-label-content-color: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-hover: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-down: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-focus: var( --luzmo-primary-inverse-color );--option-label-content-color-disabled: var(--luzmo-font-color-disabled);--option-label-icon-color-disabled: var(--luzmo-font-color-disabled);--option-description-line-height: var(--luzmo-line-height);--option-description-line-height-cjk: 1.5;--option-description-color-default: var(--luzmo-font-color);--option-description-color-hover: var(--luzmo-font-color-hover);--option-description-color-down: var(--luzmo-font-color-down);--option-description-color-focus: var(--luzmo-font-color-focus);--option-description-color-disabled: var(--luzmo-disabled-color);--options-section-header-line-height: var(--luzmo-line-height);--options-section-header-line-height-cjk: 1.5;--options-section-header-font-weight: bold;--options-section-header-color: var(--luzmo-font-color-hard);--options-collapsible-icon-color: var(--luzmo-font-color-hard);--options-checkmark-icon-color-default: var(--luzmo-font-color);--options-checkmark-icon-color-hover: var(--luzmo-font-color-hover);--options-checkmark-icon-color-down: var(--luzmo-font-color-down);--options-checkmark-icon-color-focus: var(--luzmo-font-color-focus);--options-checkbox-icon-color-default: var(--luzmo-font-color);--options-checkbox-icon-color-hover: var(--luzmo-font-color-hover);--options-checkbox-icon-color-down: var(--luzmo-font-color-down);--options-checkbox-icon-color-focus: var(--luzmo-font-color-focus);--options-drillin-icon-color-default: var(--luzmo-font-color);--options-drillin-icon-color-hover: var(--luzmo-font-color-hover);--options-drillin-icon-color-down: var(--luzmo-font-color-down);--options-drillin-icon-color-focus: var(--luzmo-font-color-focus);--option-value-color-default: var(--luzmo-font-color);--option-value-color-hover: var(--luzmo-font-color-hover);--option-value-color-down: var(--luzmo-font-color-down);--option-value-color-focus: var(--luzmo-font-color-focus);--option-collapsible-no-icon-suboption-padding-x-start: 28px;--option-background-color-selected: var(--luzmo-background-color);--option-background-color-default: var(--luzmo-background-color);--option-background-color-hover: var(--luzmo-background-color-hover);--option-background-color-down: var(--luzmo-background-color-down);--option-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--option-min-height: var(--luzmo-component-height);--option-icon-container-height: 18px;--options-pending-height: var(--option-min-height);--progress-circle-size: calc( var(--options-pending-height) - var(--option-top-edge-to-text) - var( --option-bottom-edge-to-text ) );--option-icon-height: var(--luzmo-font-size-l);--option-icon-width: var(--luzmo-font-size-l);--option-label-font-size: var(--luzmo-font-size);--option-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-label-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--pending-inline-edge-to-content: var(--option-label-inline-edge-to-content);--option-top-edge-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--option-bottom-edge-to-text: var(--luzmo-spacing-3);--option-description-font-size: var(--luzmo-font-size-xs);--options-section-header-font-size: var(--luzmo-font-size);--options-section-header-min-width: var(--luzmo-component-height);--option-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-checkmark-size: var(--luzmo-font-size-xs);--option-checkbox-size: var(--luzmo-font-size-xs);--option-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-top-to-checkbox: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--option-min-height: var(--luzmo-component-height-s);--option-icon-container-height: 17px;--option-icon-height: var(--luzmo-font-size);--option-icon-width: var(--luzmo-font-size);--option-label-font-size: var(--luzmo-font-size-s);--option-label-text-to-visual: var(--luzmo-spacing-3);--option-label-text-to-control: var(--luzmo-spacing-3);--option-label-inline-edge-to-content: var(--luzmo-spacing-3);--option-top-edge-to-text: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-2) );--option-bottom-edge-to-text: var(--luzmo-spacing-2);--option-description-font-size: var(--luzmo-font-size-xs);--options-section-header-font-size: var(--luzmo-font-size-s);--options-section-header-min-width: var(--luzmo-component-height-s);--option-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--option-checkmark-size: var(--luzmo-font-size-xs);--option-checkbox-size: var(--luzmo-font-size-xs);--option-top-to-checkmark: var(--luzmo-spacing-3);--option-top-to-checkbox: var(--luzmo-spacing-3)}:host([size=l]){--option-min-height: var(--luzmo-component-height-l);--option-icon-container-height: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--option-icon-height: var(--luzmo-font-size-l);--option-icon-width: var(--luzmo-font-size-l);--option-label-font-size: var(--luzmo-font-size-l);--option-label-text-to-visual: var(--luzmo-spacing-4);--option-label-text-to-control: var(--luzmo-spacing-4);--option-label-inline-edge-to-content: var(--luzmo-spacing-4);--option-top-edge-to-text: var(--luzmo-spacing-4);--option-bottom-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-description-font-size: var(--luzmo-font-size-s);--options-section-header-font-size: var(--luzmo-font-size-l);--options-section-header-min-width: var(--luzmo-component-height-l);--option-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--option-checkmark-size: var(--luzmo-font-size-s);--option-checkbox-size: var(--luzmo-font-size-s);--option-top-to-checkmark: var(--luzmo-spacing-4);--option-top-to-checkbox: var(--luzmo-spacing-4)}:host([size=xl]){--option-min-height: var(--luzmo-component-height-xl);--option-icon-container-height: 26px;--option-icon-height: var(--luzmo-font-size-xl);--option-icon-width: var(--luzmo-font-size-xl);--option-label-font-size: var(--luzmo-font-size-xl);--option-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-label-text-to-control: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-top-edge-to-text: var(--luzmo-spacing-4);--option-bottom-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-description-font-size: var(--luzmo-font-size);--options-section-header-font-size: var(--luzmo-font-size-xl);--options-section-header-min-width: var(--luzmo-component-height-xl);--option-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-checkmark-size: var(--luzmo-font-size);--option-checkbox-size: var(--luzmo-font-size);--option-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-top-to-checkbox: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}@media (forced-colors: active){:host{--highcontrast-option-background-color-default: ButtonFace;--highcontrast-option-color-default: ButtonText;--highcontrast-option-background-color-focus: Highlight;--highcontrast-option-color-focus: HighlightText;--highcontrast-options-checkmark-icon-color-default: Highlight;--highcontrast-options-checkbox-icon-color-default: Highlight;--highcontrast-option-color-disabled: GrayText;--highcontrast-option-focus-indicator-color: Highlight;--highcontrast-option-selected-background-color: Highlight;--highcontrast-option-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-option-selected-background-color: SelectedItem;--highcontrast-option-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-options-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--option-label-line-height: var( --luzmo-option-label-line-height-cjk, var(--option-label-line-height-cjk) );--option-description-line-height: var( --luzmo-option-description-line-height-cjk, var(--option-description-line-height-cjk) );--options-section-header-line-height: var( --luzmo-options-section-header-line-height-cjk, var(--options-section-header-line-height-cjk) )}luzmo-option{width:100%}#pending{display:flex;flex-shrink:0;align-items:center;height:var(--options-pending-height);padding-inline:var(--pending-inline-edge-to-content)}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";var _t=Object.defineProperty,k=(r,t,o,e)=>{for(var i=void 0,n=r.length-1,s;n>=0;n--)(s=r[n])&&(i=s(t,o,i)||i);return i&&_t(t,o,i),i};const H=25;function zt(r,t){return!!t&&(r===t||r.contains(t))}class _ extends D.SizedMixin(a.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.variant="highlight",this.selects="single",this.emphasized=!1,this.pending=!1,this.options=[],this.value=[],this.focusedOptionIndex=0,this._selectedOptions=[],this._firstVisibleIndex=0,this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur)}static get styles(){return[a.r(bt)]}get _virtualizeActive(){return this.options.length>H}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("tabindex")||(this.tabIndex=0);const o=[new Promise(e=>requestAnimationFrame(()=>e(!0)))];[...this.children].forEach(e=>{e.localName==="luzmo-option"&&o.push(e.updateComplete)}),this.optionElementsUpdated=Promise.all(o)}willUpdate(t){var e;t.has("selects")&&this.selects==="single"&&((e=this.value)==null?void 0:e.length)>1&&(this.value=this.value.slice(0,1))}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}async getUpdateComplete(){const t=await super.getUpdateComplete();return await this.optionElementsUpdated,t}focus({preventScroll:t}={}){super.focus({preventScroll:t}),this.focusOptionByOffset(0)}_removeFocusedPropertyOnOptions(){requestAnimationFrame(()=>{this.visibleOptionElements.forEach(t=>{t.focused=!1})})}scrollToTop(){this.scrollTop=0}handleFocusin(){this.startListeningToKeyboard()}handleBlur(t){zt(this,t.relatedTarget)||(this.stopListeningToKeyboard(),this._removeFocusedPropertyOnOptions(),this.removeAttribute("aria-activedescendant"))}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(t){var n;if(t.defaultPrevented)return;const o=this.focusedOptionIndex,e=[...this.visibleOptionElements].find(s=>{var l,c,h,m;return((l=s.value)==null?void 0:l.toString())===((m=(h=(c=this.options)==null?void 0:c[o])==null?void 0:h.value)==null?void 0:m.toString())}),{key:i}=t;if(i==="Tab"){this.prepareToCleanUp();return}if(i===" "||i==="Enter"){t.preventDefault(),e&&this.toggleOption(t,(n=this.options)==null?void 0:n[o]);return}if(i==="ArrowDown"||i==="ArrowUp"){t.preventDefault(),this.navigateWithinOptions(t,e);return}}navigateWithinOptions(t,o){const{key:e}=t,i=e==="ArrowDown"?1:-1;t.preventDefault(),t.stopPropagation();const n=this.focusOptionByOffset(i,o,!0);n!==o&&(this._virtualizeActive||n==null||n.scrollIntoView({block:"nearest"}))}focusOptionByOffset(t,o,e){var d;const i=t||1;o&&(o.focused=!1);const n=this.focusedOptionIndex;this.focusedOptionIndex=this.options.length>0?(this.options.length+this.focusedOptionIndex+t)%this.options.length:0;let s=this.options[this.focusedOptionIndex],l=this.options.length;for(;(s!=null&&s.disabled||s!=null&&s.divider)&&l;)l-=1,this.focusedOptionIndex=(this.options.length+this.focusedOptionIndex+i)%this.options.length,s=this.options[this.focusedOptionIndex];const c=n<this.focusedOptionIndex&&t===-1,h=n>this.focusedOptionIndex&&t===1;(c||h)&&(this.focusedOptionIndex=n,this.dispatchEvent(new Event(`luzmo-exceeded-${c?"top":"bottom"}`,{bubbles:!0,composed:!0,cancelable:!0})));let m;return e&&this._virtualizeActive&&(m=[...this.visibleOptionElements].find(p=>{var u,v,f;return((u=p.value)==null?void 0:u.toString())===((f=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:f.toString())}),m||(this.focusedOptionIndex=this._firstVisibleIndex)),this._virtualizeActive&&e&&((d=this.virtualizer.element(this.focusedOptionIndex))==null||d.scrollIntoView({behavior:"smooth",block:"nearest"})),m=m??[...this.visibleOptionElements].find(p=>{var u,v,f,y,x;return(p.value===null?null:(u=p.value)==null?void 0:u.toString())===(((v=this.options[this.focusedOptionIndex])==null?void 0:v.value)===null?(f=this.options[this.focusedOptionIndex])==null?void 0:f.value:(x=(y=this.options[this.focusedOptionIndex])==null?void 0:y.value)==null?void 0:x.toString())}),s!=null&&s.disabled||this.setFocusedAndActiveDescendant(m),m}updateSelectedItemIndex(){this.focusedOptionIndex=this._virtualizeActive?this._firstVisibleIndex:0}setSelectedOptionsFromValue(){this._selectedOptions=this.options.filter(t=>{var o;return Array.isArray(this.value)&&((o=this.value)==null?void 0:o.includes((t==null?void 0:t.value)??null))})}visibilityChanged(t){this._firstVisibleIndex=(t==null?void 0:t.first)??0}rangeChange(t){t.stopPropagation(),t.preventDefault(),(t==null?void 0:t.first)!==-1&&(t==null?void 0:t.last)!==-1&&this.dispatchEvent(new CustomEvent("luzmo-scrolled",{bubbles:!0,composed:!0,cancelable:!0,detail:{first:t.first,last:t.last}}))}async toggleOption(t,o){var s;const e=t instanceof KeyboardEvent,i=this.options.findIndex(l=>(l==null?void 0:l.value)===(o==null?void 0:o.value));this.focusedOptionIndex=i,this.visibleOptionElements.forEach(l=>{var c,h;if(e){const m=((l==null?void 0:l.value)===null?null:(c=l.value)==null?void 0:c.toString())===((o==null?void 0:o.value)===null?null:(h=o==null?void 0:o.value)==null?void 0:h.toString());l.focused=m,m&&this.setFocusedAndActiveDescendant(l)}else l.focused=!1});const n=Array.isArray(this.value)&&((s=this.value)==null?void 0:s.includes((o==null?void 0:o.value)??null));this.selects==="single"?(this.value=[o==null?void 0:o.value],this._selectedOptions=[o]):(this.value=n?this.value.filter(l=>l!==(o==null?void 0:o.value)):[...this.value??[],o==null?void 0:o.value],this._selectedOptions=n?this._selectedOptions.filter(l=>l.value!==o.value):[...this._selectedOptions,o]),console.log("this.value LL",this.value),await this.updateComplete,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}})),this.prepareToCleanUp()}handleOptionClick(t,o){this.toggleOption(o,t)}render(){const t=l=>a.x`<luzmo-icon
|
|
73
|
+
*/customElements.define("lit-virtualizer",C);const gt=":host{--options-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-options-section-divider-margin-block, max(0px, (var(--option-section-divider-height) - var(--options-divider-thickness)) / 2));margin-inline:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));overflow:visible}:host{display:block;flex-shrink:0}";class N extends D.SizedMixin(a.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[a.r(tt.dividerStyles),a.r(gt)]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","separator")}}const bt=":host{--option-top-to-action: var(--luzmo-spacing-1);--option-top-to-checkbox: var(--luzmo-spacing-1);--option-label-line-height: var(--luzmo-line-height);--option-label-line-height-cjk: 1.5;--option-label-to-description-spacing: 1px;--option-focus-indicator-width: var(--luzmo-indicator-width);--option-focus-indicator-color: var(--luzmo-indicator-color);--option-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--option-label-content-color-default: var(--luzmo-font-color);--option-label-content-color-hover: var(--luzmo-font-color-hover);--option-label-content-color-down: var(--luzmo-font-color-down);--option-label-content-color-focus: var(--luzmo-font-color-focus);--option-label-icon-color-default: var(--luzmo-font-color);--option-label-icon-color-hover: var(--luzmo-font-color-hover);--option-label-icon-color-down: var(--luzmo-font-color-down);--option-label-icon-color-focus: var(--luzmo-font-color-focus);--option-highlight-selected-label-background-color: var(--luzmo-primary);--option-highlight-selected-label-content-color: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-hover: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-down: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-focus: var( --luzmo-primary-inverse-color );--option-label-content-color-disabled: var(--luzmo-font-color-disabled);--option-label-icon-color-disabled: var(--luzmo-font-color-disabled);--option-description-line-height: var(--luzmo-line-height);--option-description-line-height-cjk: 1.5;--option-description-color-default: var(--luzmo-font-color);--option-description-color-hover: var(--luzmo-font-color-hover);--option-description-color-down: var(--luzmo-font-color-down);--option-description-color-focus: var(--luzmo-font-color-focus);--option-description-color-disabled: var(--luzmo-disabled-color);--options-section-header-line-height: var(--luzmo-line-height);--options-section-header-line-height-cjk: 1.5;--options-section-header-font-weight: bold;--options-section-header-color: var(--luzmo-font-color-hard);--options-collapsible-icon-color: var(--luzmo-font-color-hard);--options-checkmark-icon-color-default: var(--luzmo-font-color);--options-checkmark-icon-color-hover: var(--luzmo-font-color-hover);--options-checkmark-icon-color-down: var(--luzmo-font-color-down);--options-checkmark-icon-color-focus: var(--luzmo-font-color-focus);--options-checkbox-icon-color-default: var(--luzmo-font-color);--options-checkbox-icon-color-hover: var(--luzmo-font-color-hover);--options-checkbox-icon-color-down: var(--luzmo-font-color-down);--options-checkbox-icon-color-focus: var(--luzmo-font-color-focus);--options-drillin-icon-color-default: var(--luzmo-font-color);--options-drillin-icon-color-hover: var(--luzmo-font-color-hover);--options-drillin-icon-color-down: var(--luzmo-font-color-down);--options-drillin-icon-color-focus: var(--luzmo-font-color-focus);--option-value-color-default: var(--luzmo-font-color);--option-value-color-hover: var(--luzmo-font-color-hover);--option-value-color-down: var(--luzmo-font-color-down);--option-value-color-focus: var(--luzmo-font-color-focus);--option-collapsible-no-icon-suboption-padding-x-start: 28px;--option-background-color-selected: var(--luzmo-background-color);--option-background-color-default: var(--luzmo-background-color);--option-background-color-hover: var(--luzmo-background-color-hover);--option-background-color-down: var(--luzmo-background-color-down);--option-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--option-min-height: var(--luzmo-component-height);--option-icon-container-height: 18px;--options-pending-height: var(--option-min-height);--progress-circle-size: calc( var(--options-pending-height) - var(--option-top-edge-to-text) - var( --option-bottom-edge-to-text ) );--option-icon-height: var(--luzmo-font-size-l);--option-icon-width: var(--luzmo-font-size-l);--option-label-font-size: var(--luzmo-font-size);--option-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-label-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--pending-inline-edge-to-content: var(--option-label-inline-edge-to-content);--option-top-edge-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--option-bottom-edge-to-text: var(--luzmo-spacing-3);--option-description-font-size: var(--luzmo-font-size-xs);--options-section-header-font-size: var(--luzmo-font-size);--options-section-header-min-width: var(--luzmo-component-height);--option-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-checkmark-size: var(--luzmo-font-size-xs);--option-checkbox-size: var(--luzmo-font-size-xs);--option-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-top-to-checkbox: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--option-min-height: var(--luzmo-component-height-s);--option-icon-container-height: 17px;--option-icon-height: var(--luzmo-font-size);--option-icon-width: var(--luzmo-font-size);--option-label-font-size: var(--luzmo-font-size-s);--option-label-text-to-visual: var(--luzmo-spacing-3);--option-label-text-to-control: var(--luzmo-spacing-3);--option-label-inline-edge-to-content: var(--luzmo-spacing-3);--option-top-edge-to-text: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-2) );--option-bottom-edge-to-text: var(--luzmo-spacing-2);--option-description-font-size: var(--luzmo-font-size-xs);--options-section-header-font-size: var(--luzmo-font-size-s);--options-section-header-min-width: var(--luzmo-component-height-s);--option-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--option-checkmark-size: var(--luzmo-font-size-xs);--option-checkbox-size: var(--luzmo-font-size-xs);--option-top-to-checkmark: var(--luzmo-spacing-3);--option-top-to-checkbox: var(--luzmo-spacing-3)}:host([size=l]){--option-min-height: var(--luzmo-component-height-l);--option-icon-container-height: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--option-icon-height: var(--luzmo-font-size-l);--option-icon-width: var(--luzmo-font-size-l);--option-label-font-size: var(--luzmo-font-size-l);--option-label-text-to-visual: var(--luzmo-spacing-4);--option-label-text-to-control: var(--luzmo-spacing-4);--option-label-inline-edge-to-content: var(--luzmo-spacing-4);--option-top-edge-to-text: var(--luzmo-spacing-4);--option-bottom-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-description-font-size: var(--luzmo-font-size-s);--options-section-header-font-size: var(--luzmo-font-size-l);--options-section-header-min-width: var(--luzmo-component-height-l);--option-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--option-checkmark-size: var(--luzmo-font-size-s);--option-checkbox-size: var(--luzmo-font-size-s);--option-top-to-checkmark: var(--luzmo-spacing-4);--option-top-to-checkbox: var(--luzmo-spacing-4)}:host([size=xl]){--option-min-height: var(--luzmo-component-height-xl);--option-icon-container-height: 26px;--option-icon-height: var(--luzmo-font-size-xl);--option-icon-width: var(--luzmo-font-size-xl);--option-label-font-size: var(--luzmo-font-size-xl);--option-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-label-text-to-control: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-top-edge-to-text: var(--luzmo-spacing-4);--option-bottom-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-description-font-size: var(--luzmo-font-size);--options-section-header-font-size: var(--luzmo-font-size-xl);--options-section-header-min-width: var(--luzmo-component-height-xl);--option-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-checkmark-size: var(--luzmo-font-size);--option-checkbox-size: var(--luzmo-font-size);--option-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-top-to-checkbox: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}@media (forced-colors: active){:host{--highcontrast-option-background-color-default: ButtonFace;--highcontrast-option-color-default: ButtonText;--highcontrast-option-background-color-focus: Highlight;--highcontrast-option-color-focus: HighlightText;--highcontrast-options-checkmark-icon-color-default: Highlight;--highcontrast-options-checkbox-icon-color-default: Highlight;--highcontrast-option-color-disabled: GrayText;--highcontrast-option-focus-indicator-color: Highlight;--highcontrast-option-selected-background-color: Highlight;--highcontrast-option-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-option-selected-background-color: SelectedItem;--highcontrast-option-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-options-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--option-label-line-height: var( --luzmo-option-label-line-height-cjk, var(--option-label-line-height-cjk) );--option-description-line-height: var( --luzmo-option-description-line-height-cjk, var(--option-description-line-height-cjk) );--options-section-header-line-height: var( --luzmo-options-section-header-line-height-cjk, var(--options-section-header-line-height-cjk) )}luzmo-option{width:100%}#pending{display:flex;flex-shrink:0;align-items:center;height:var(--options-pending-height);padding-inline:var(--pending-inline-edge-to-content)}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";var _t=Object.defineProperty,k=(r,t,o,e)=>{for(var i=void 0,n=r.length-1,s;n>=0;n--)(s=r[n])&&(i=s(t,o,i)||i);return i&&_t(t,o,i),i};const H=25;function zt(r,t){return!!t&&(r===t||r.contains(t))}class _ extends D.SizedMixin(a.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.variant="highlight",this.selects="single",this.emphasized=!1,this.pending=!1,this.options=[],this.value=[],this.focusedOptionIndex=0,this._selectedOptions=[],this._firstVisibleIndex=0,this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur)}static get styles(){return[a.r(bt)]}get _virtualizeActive(){return this.options.length>H}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("tabindex")||(this.tabIndex=0);const o=[new Promise(e=>requestAnimationFrame(()=>e(!0)))];[...this.children].forEach(e=>{e.localName==="luzmo-option"&&o.push(e.updateComplete)}),this.optionElementsUpdated=Promise.all(o)}willUpdate(t){var e;t.has("selects")&&this.selects==="single"&&((e=this.value)==null?void 0:e.length)>1&&(this.value=this.value.slice(0,1))}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}async getUpdateComplete(){const t=await super.getUpdateComplete();return await this.optionElementsUpdated,t}focus({preventScroll:t}={}){super.focus({preventScroll:t}),this.focusOptionByOffset(0)}_removeFocusedPropertyOnOptions(){requestAnimationFrame(()=>{this.visibleOptionElements.forEach(t=>{t.focused=!1})})}scrollToTop(){this.scrollTop=0}handleFocusin(){this.startListeningToKeyboard()}handleBlur(t){zt(this,t.relatedTarget)||(this.stopListeningToKeyboard(),this._removeFocusedPropertyOnOptions(),this.removeAttribute("aria-activedescendant"))}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(t){var n;if(t.defaultPrevented)return;const o=this.focusedOptionIndex,e=[...this.visibleOptionElements].find(s=>{var l,c,h,m;return((l=s.value)==null?void 0:l.toString())===((m=(h=(c=this.options)==null?void 0:c[o])==null?void 0:h.value)==null?void 0:m.toString())}),{key:i}=t;if(i==="Tab"){this.prepareToCleanUp();return}if(i===" "||i==="Enter"){t.preventDefault(),e&&this.toggleOption(t,(n=this.options)==null?void 0:n[o]);return}if(i==="ArrowDown"||i==="ArrowUp"){t.preventDefault(),this.navigateWithinOptions(t,e);return}}navigateWithinOptions(t,o){const{key:e}=t,i=e==="ArrowDown"?1:-1;t.preventDefault(),t.stopPropagation();const n=this.focusOptionByOffset(i,o,!0);n!==o&&(this._virtualizeActive||n==null||n.scrollIntoView({block:"nearest"}))}focusOptionByOffset(t,o,e){var d;const i=t||1;o&&(o.focused=!1);const n=this.focusedOptionIndex;this.focusedOptionIndex=this.options.length>0?(this.options.length+this.focusedOptionIndex+t)%this.options.length:0;let s=this.options[this.focusedOptionIndex],l=this.options.length;for(;(s!=null&&s.disabled||s!=null&&s.divider)&&l;)l-=1,this.focusedOptionIndex=(this.options.length+this.focusedOptionIndex+i)%this.options.length,s=this.options[this.focusedOptionIndex];const c=n<this.focusedOptionIndex&&t===-1,h=n>this.focusedOptionIndex&&t===1;(c||h)&&(this.focusedOptionIndex=n,this.dispatchEvent(new Event(`luzmo-exceeded-${c?"top":"bottom"}`,{bubbles:!0,composed:!0,cancelable:!0})));let m;return e&&this._virtualizeActive&&(m=[...this.visibleOptionElements].find(p=>{var u,v,f;return((u=p.value)==null?void 0:u.toString())===((f=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:f.toString())}),m||(this.focusedOptionIndex=this._firstVisibleIndex)),this._virtualizeActive&&e&&((d=this.virtualizer.element(this.focusedOptionIndex))==null||d.scrollIntoView({behavior:"smooth",block:"nearest"})),m=m??[...this.visibleOptionElements].find(p=>{var u,v,f,y,x;return(p.value===null?null:(u=p.value)==null?void 0:u.toString())===(((v=this.options[this.focusedOptionIndex])==null?void 0:v.value)===null?(f=this.options[this.focusedOptionIndex])==null?void 0:f.value:(x=(y=this.options[this.focusedOptionIndex])==null?void 0:y.value)==null?void 0:x.toString())}),s!=null&&s.disabled||this.setFocusedAndActiveDescendant(m),m}updateSelectedItemIndex(){this.focusedOptionIndex=this._virtualizeActive?this._firstVisibleIndex:0}setSelectedOptionsFromValue(){this._selectedOptions=this.options.filter(t=>{var o;return Array.isArray(this.value)&&((o=this.value)==null?void 0:o.includes((t==null?void 0:t.value)??null))})}visibilityChanged(t){this._firstVisibleIndex=(t==null?void 0:t.first)??0}rangeChange(t){t.stopPropagation(),t.preventDefault(),(t==null?void 0:t.first)!==-1&&(t==null?void 0:t.last)!==-1&&this.dispatchEvent(new CustomEvent("luzmo-scrolled",{bubbles:!0,composed:!0,cancelable:!0,detail:{first:t.first,last:t.last}}))}async toggleOption(t,o){var s;const e=t instanceof KeyboardEvent,i=this.options.findIndex(l=>(l==null?void 0:l.value)===(o==null?void 0:o.value));this.focusedOptionIndex=i,this.visibleOptionElements.forEach(l=>{var c,h;if(e){const m=((l==null?void 0:l.value)===null?null:(c=l.value)==null?void 0:c.toString())===((o==null?void 0:o.value)===null?null:(h=o==null?void 0:o.value)==null?void 0:h.toString());l.focused=m,m&&this.setFocusedAndActiveDescendant(l)}else l.focused=!1});const n=Array.isArray(this.value)&&((s=this.value)==null?void 0:s.includes((o==null?void 0:o.value)??null));this.selects==="single"?(this.value=[o==null?void 0:o.value],this._selectedOptions=[o]):(this.value=n?this.value.filter(l=>l!==(o==null?void 0:o.value)):[...this.value??[],o==null?void 0:o.value],this._selectedOptions=n?this._selectedOptions.filter(l=>l.value!==o.value):[...this._selectedOptions,o]),await this.updateComplete,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}})),this.prepareToCleanUp()}handleOptionClick(t,o){this.toggleOption(o,t)}render(){const t=l=>a.x`<luzmo-icon
|
|
74
74
|
slot="icon"
|
|
75
75
|
.icon=${l}
|
|
76
76
|
.size=${this.size}
|
|
@@ -1048,7 +1048,7 @@ class z extends G(W, {
|
|
|
1048
1048
|
const l = Array.isArray(this.value) && ((s = this.value) == null ? void 0 : s.includes((t == null ? void 0 : t.value) ?? null));
|
|
1049
1049
|
this.selects === "single" ? (this.value = [t == null ? void 0 : t.value], this._selectedOptions = [t]) : (this.value = l ? this.value.filter((r) => r !== (t == null ? void 0 : t.value)) : [...this.value ?? [], t == null ? void 0 : t.value], this._selectedOptions = l ? this._selectedOptions.filter(
|
|
1050
1050
|
(r) => r.value !== t.value
|
|
1051
|
-
) : [...this._selectedOptions, t]),
|
|
1051
|
+
) : [...this._selectedOptions, t]), await this.updateComplete, this.dispatchEvent(
|
|
1052
1052
|
new CustomEvent("change", {
|
|
1053
1053
|
bubbles: !0,
|
|
1054
1054
|
cancelable: !0,
|
|
@@ -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
|
|
19
|
-
${this.variant==="negative"&&this.icon?t.x` ${
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("../text-field-D5d_Gt0t.cjs"),t=require("../base-CBCg3yyw.cjs"),h=require("../luzmo-icons-DletXGWU.cjs"),c=require("../sized-mixin-CPxE5C96.cjs"),s="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-family:var(--luzmo-helptext-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-helptext-font-weight, var(--luzmo-font-weight));font-size:var(--luzmo-helptext-font-size, var(--helptext-font-size, var(--luzmo-font-size-s)));min-block-size:var(--luzmo-helptext-min-height, var(--helptext-min-height, 24px));display:flex}.icon{block-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));inline-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));flex-shrink:0;margin-inline-end:var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual, 7px));padding-block-start:var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon, 3px));padding-block-end:var(--luzmo-helptext-bottom-to-workflow-icon, var(--helptext-bottom-to-workflow-icon, 3px))}.text{line-height:var(--luzmo-helptext-line-height, var(--helptext-line-height, 1.3));padding-block-start:var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text, 4px));padding-block-end:var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text, 5px))}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk, 1.4))}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-negative-color-down)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-negative-color));--helptext-icon-color-default: var(var(--luzmo-negative-color))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var u=Object.defineProperty,p=(l,i,r,v)=>{for(var e=void 0,n=l.length-1,a;n>=0;n--)(a=l[n])&&(e=a(i,r,e)||e);return e&&u(i,r,e),e};class o extends c.SizedMixin(t.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[t.r(s)]}render(){return t.x`
|
|
19
|
+
${this.variant==="negative"&&this.icon?t.x` ${h.O2(h.x)} `:t.E}
|
|
20
20
|
<div class="text"><slot></slot></div>
|
|
21
|
-
`}}p([t.n({type:Boolean,reflect:!0})],o.prototype,"icon");p([t.n({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",
|
|
21
|
+
`}}p([t.n({type:Boolean,reflect:!0})],o.prototype,"icon");p([t.n({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",x.LuzmoTextField);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",o);exports.LuzmoTextField=x.LuzmoTextField;exports.LuzmoHelpText=o;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { LuzmoTextField } from './text-field';
|
|
2
2
|
declare global {
|
|
3
3
|
interface HTMLElementTagNameMap {
|
|
4
|
-
'luzmo-text-field': LuzmoTextField;
|
|
4
|
+
'luzmo-text-field': LuzmoTextField & HTMLElement;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
import { LuzmoHelpText } from './help-text';
|
|
8
8
|
declare global {
|
|
9
9
|
interface HTMLElementTagNameMap {
|
|
10
|
-
'luzmo-help-text': LuzmoHelpText;
|
|
10
|
+
'luzmo-help-text': LuzmoHelpText & HTMLElement;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
export { LuzmoHelpText } from './help-text';
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { L as
|
|
19
|
-
import { a as
|
|
18
|
+
import { L as m } from "../text-field-BIADXoLC.js";
|
|
19
|
+
import { a as x, r as p, E as s, x as a, n as c } from "../base-WsynuqaS.js";
|
|
20
20
|
import { O as z, x as d } from "../luzmo-icons-DbwDQtuO.js";
|
|
21
21
|
import { S as f } from "../sized-mixin-D4ACoVUr.js";
|
|
22
22
|
const h = () => {
|
|
@@ -26,24 +26,24 @@ const h = () => {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
h();
|
|
29
|
-
const
|
|
30
|
-
var
|
|
31
|
-
for (var t = void 0, e = o.length - 1,
|
|
32
|
-
(
|
|
33
|
-
return t &&
|
|
29
|
+
const g = "@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-family:var(--luzmo-helptext-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-helptext-font-weight, var(--luzmo-font-weight));font-size:var(--luzmo-helptext-font-size, var(--helptext-font-size, var(--luzmo-font-size-s)));min-block-size:var(--luzmo-helptext-min-height, var(--helptext-min-height, 24px));display:flex}.icon{block-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));inline-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));flex-shrink:0;margin-inline-end:var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual, 7px));padding-block-start:var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon, 3px));padding-block-end:var(--luzmo-helptext-bottom-to-workflow-icon, var(--helptext-bottom-to-workflow-icon, 3px))}.text{line-height:var(--luzmo-helptext-line-height, var(--helptext-line-height, 1.3));padding-block-start:var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text, 4px));padding-block-end:var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text, 5px))}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk, 1.4))}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-negative-color-down)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-negative-color));--helptext-icon-color-default: var(var(--luzmo-negative-color))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";
|
|
30
|
+
var v = Object.defineProperty, u = (o, r, n, b) => {
|
|
31
|
+
for (var t = void 0, e = o.length - 1, i; e >= 0; e--)
|
|
32
|
+
(i = o[e]) && (t = i(r, n, t) || t);
|
|
33
|
+
return t && v(r, n, t), t;
|
|
34
34
|
};
|
|
35
|
-
class l extends f(
|
|
35
|
+
class l extends f(x, {
|
|
36
36
|
noDefaultSize: !0
|
|
37
37
|
}) {
|
|
38
38
|
constructor() {
|
|
39
39
|
super(...arguments), this.icon = !1, this.variant = "neutral";
|
|
40
40
|
}
|
|
41
41
|
static get styles() {
|
|
42
|
-
return [p(
|
|
42
|
+
return [p(g)];
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return
|
|
46
|
-
${this.variant === "negative" && this.icon ?
|
|
45
|
+
return a`
|
|
46
|
+
${this.variant === "negative" && this.icon ? a` ${z(d)} ` : s}
|
|
47
47
|
<div class="text"><slot></slot></div>
|
|
48
48
|
`;
|
|
49
49
|
}
|
|
@@ -54,9 +54,9 @@ u([
|
|
|
54
54
|
u([
|
|
55
55
|
c({ reflect: !0 })
|
|
56
56
|
], l.prototype, "variant");
|
|
57
|
-
customElements.get("luzmo-text-field") || customElements.define("luzmo-text-field",
|
|
57
|
+
customElements.get("luzmo-text-field") || customElements.define("luzmo-text-field", m);
|
|
58
58
|
customElements.get("luzmo-help-text") || customElements.define("luzmo-help-text", l);
|
|
59
59
|
export {
|
|
60
60
|
l as LuzmoHelpText,
|
|
61
|
-
|
|
61
|
+
m as LuzmoTextField
|
|
62
62
|
};
|