@ni/ok-components 1.7.0 → 1.8.0

package/dist/all-components-bundle.min.js

@@ -20189,6 +20189,25 @@ const h4=_t`
             display: none;
         }
 
+        :host([size='compact']) .summary-item-container {
+            flex-wrap: nowrap;
+            box-sizing: border-box;
+            overflow-x: auto;
+            overflow-y: hidden;
+            gap: ${Dc};
+            padding: calc(${Rc} - ${Oc});
+            scrollbar-width: none;
+        }
+
+        :host([size='compact']) .summary-item-container.has-overflow {
+            -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
+            mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
+        }
+
+        :host([size='compact']) .summary-item-container::-webkit-scrollbar {
+            display: none;
+        }
+
         .edit-items-button {
             align-self: start;
             justify-self: end;
@@ -20210,7 +20229,12 @@ const h4=_t`
     @layer top {}
 `,u4=J`
     <section class="summary-panel" part="panel">
-        <div class="summary-item-container" part="items">
+        <div
+            ${zt("summaryItems")}
+            class="summary-item-container"
+            part="items"
+            @scroll="${t=>t.handleItemsScroll()}"
+        >
             <slot @slotchange="${t=>t.handleItemsSlotChange()}"></slot>
         </div>
         ${Ut(t=>t.showEditItemsButton,J`
@@ -20228,11 +20252,14 @@ const h4=_t`
             </${Xg}>
         `)}
     </section>
-`
-class p4 extends He{constructor(){super(...arguments),this.showEditItemsButton=!1,this.legacyStyle=!1,this.editItemsButtonLabel="Configure"}connectedCallback(){super.connectedCallback(),this.syncTileLegacyStyle()}legacyStyleChanged(){this.$fastController.isConnected&&this.syncTileLegacyStyle()}handleEditItemsClick(){this.dispatchEvent(new CustomEvent("edit-items",{bubbles:!0,composed:!0}))}handleItemsSlotChange(){this.syncTileLegacyStyle()}syncTileLegacyStyle(){for(const t of this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[])"ok-fv-summary-panel-tile"===t.localName&&(this.legacyStyle?t.setAttribute("legacy-style",""):t.removeAttribute("legacy-style"))}}t([pt({attribute:"show-edit-items-button",mode:"boolean"})],p4.prototype,"showEditItemsButton",void 0),t([pt({attribute:"legacy-style",mode:"boolean"})],p4.prototype,"legacyStyle",void 0),t([pt({attribute:"edit-items-button-label"})],p4.prototype,"editItemsButtonLabel",void 0)
-const f4=p4.compose({baseName:"fv-summary-panel",template:u4,styles:h4})
-Ii.getOrCreate().withPrefix("ok").register(f4())
-const m4=_t`
+`,p4="default",f4="compact"
+class m4 extends He{constructor(){super(),this.showEditItemsButton=!1,this.legacyStyle=!1,this.size=p4,this.hasOverflow=!1,this.editItemsButtonLabel="Configure",this.summaryItemsResizeObserver=new ResizeObserver(()=>this.updateOverflow())}connectedCallback(){super.connectedCallback(),this.syncTileAttributes(),this.observeSummaryItems()}disconnectedCallback(){super.disconnectedCallback(),this.summaryItemsResizeObserver.disconnect()}legacyStyleChanged(){this.$fastController.isConnected&&(this.syncTileAttributes(),this.updateOverflow())}sizeChanged(){this.$fastController.isConnected&&(this.syncTileAttributes(),this.updateOverflow())}handleEditItemsClick(){this.dispatchEvent(new CustomEvent("edit-items",{bubbles:!0,composed:!0}))}handleItemsSlotChange(){this.syncTileAttributes(),this.observeSummaryItems()}handleItemsScroll(){this.updateOverflow()}observeSummaryItems(){this.summaryItemsResizeObserver.disconnect(),this.summaryItemsResizeObserver.observe(this.summaryItems)
+for(const t of this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[])this.summaryItemsResizeObserver.observe(t)
+this.updateOverflow()}updateOverflow(){const t=this.summaryItems.scrollWidth-this.summaryItems.clientWidth,e="rtl"===getComputedStyle(this.summaryItems).direction?Math.abs(this.summaryItems.scrollLeft):this.summaryItems.scrollLeft
+this.hasOverflow=this.size===f4&&t-e>0,this.summaryItems.classList.toggle("has-overflow",this.hasOverflow)}syncTileAttributes(){for(const t of this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[])"ok-fv-summary-panel-tile"===t.localName&&(this.legacyStyle?t.setAttribute("legacy-style",""):t.removeAttribute("legacy-style"),this.size===f4?t.setAttribute("size",f4):t.removeAttribute("size"))}}t([pt({attribute:"show-edit-items-button",mode:"boolean"})],m4.prototype,"showEditItemsButton",void 0),t([pt({attribute:"legacy-style",mode:"boolean"})],m4.prototype,"legacyStyle",void 0),t([pt],m4.prototype,"size",void 0),t([C],m4.prototype,"hasOverflow",void 0),t([pt({attribute:"edit-items-button-label"})],m4.prototype,"editItemsButtonLabel",void 0)
+const g4=m4.compose({baseName:"fv-summary-panel",template:u4,styles:h4})
+Ii.getOrCreate().withPrefix("ok").register(g4())
+const v4=_t`
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -20308,6 +20335,24 @@ const m4=_t`
             text-transform: uppercase;
             white-space: nowrap;
         }
+
+        :host([size='compact']) .summary-panel-tile-content {
+            gap: 6px;
+            margin: 10px 14px;
+        }
+
+        :host([size='compact']) .count {
+            font-size: 24px;
+            line-height: normal;
+        }
+
+        :host([size='compact']) .summary-panel-tile-content.beside .count {
+            padding-right: 0;
+        }
+
+        :host([size='compact']) .label {
+            font-size: 11px;
+        }
     }
 
     @layer hover {
@@ -20365,7 +20410,7 @@ const m4=_t`
     @layer disabled {}
 
     @layer top {}
-`,g4=J`
+`,b4=J`
     <${Ev}
         class="summary-panel-tile"
         ?selected="${t=>t.selected}"
@@ -20375,11 +20420,11 @@ const m4=_t`
             <div class="label">${t=>t.label}</div>
         </div>
     </${Ev}>
-`,v4="beside"
-class b4 extends He{constructor(){super(...arguments),this.count="",this.label="",this.legacyStyle=!1,this.selected=!1,this.textPosition=v4}connectedCallback(){super.connectedCallback(),this.syncLegacyStyleAttribute()}legacyStyleChanged(){this.syncLegacyStyleAttribute()}syncLegacyStyleAttribute(){this.legacyStyle?this.setAttribute("legacy-style",""):this.removeAttribute("legacy-style")}}t([pt],b4.prototype,"count",void 0),t([pt],b4.prototype,"label",void 0),t([pt({attribute:"legacy-style",mode:"boolean"})],b4.prototype,"legacyStyle",void 0),t([pt({mode:"boolean"})],b4.prototype,"selected",void 0),t([pt({attribute:"text-position"})],b4.prototype,"textPosition",void 0)
-const y4=b4.compose({baseName:"fv-summary-panel-tile",template:g4,styles:m4})
-Ii.getOrCreate().withPrefix("ok").register(y4())
-const w4=_t`
+`,y4="beside"
+class w4 extends He{constructor(){super(...arguments),this.count="",this.label="",this.legacyStyle=!1,this.size=p4,this.selected=!1,this.textPosition=y4}connectedCallback(){super.connectedCallback(),this.syncLegacyStyleAttribute()}legacyStyleChanged(){this.syncLegacyStyleAttribute()}syncLegacyStyleAttribute(){this.legacyStyle?this.setAttribute("legacy-style",""):this.removeAttribute("legacy-style")}}t([pt],w4.prototype,"count",void 0),t([pt],w4.prototype,"label",void 0),t([pt({attribute:"legacy-style",mode:"boolean"})],w4.prototype,"legacyStyle",void 0),t([pt],w4.prototype,"size",void 0),t([pt({mode:"boolean"})],w4.prototype,"selected",void 0),t([pt({attribute:"text-position"})],w4.prototype,"textPosition",void 0)
+const x4=w4.compose({baseName:"fv-summary-panel-tile",template:b4,styles:v4})
+Ii.getOrCreate().withPrefix("ok").register(x4())
+const C4=_t`
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -20552,7 +20597,7 @@ const w4=_t`
             border-bottom-color: ${hc};
         }
     }
-`,x4=J`
+`,k4=J`
     <div class="search-input-container">
         <span class="search-input-icon" aria-hidden="true">
             <${Ob}></${Ob}>
@@ -20581,11 +20626,11 @@ const w4=_t`
                 </button>
             `)}
     </div>
-`,C4="outline"
-class k4 extends Gi{constructor(){super(...arguments),this.appearance=C4}handleChange(){this.value=this.control.value,super.handleChange()}clear(){return""===this.value||(this.value="",this.control.focus(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))),!0}}t([pt],k4.prototype,"appearance",void 0)
-const S4=k4.compose({baseName:"fv-search-input",baseClass:Gi,template:x4,styles:w4,shadowOptions:{delegatesFocus:!0}})
-Ii.getOrCreate().withPrefix("ok").register(S4())
-const $4=_t`
+`,S4="outline"
+class $4 extends Gi{constructor(){super(...arguments),this.appearance=S4}handleChange(){this.value=this.control.value,super.handleChange()}clear(){return""===this.value||(this.value="",this.control.focus(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))),!0}}t([pt],$4.prototype,"appearance",void 0)
+const _4=$4.compose({baseName:"fv-search-input",baseClass:Gi,template:k4,styles:C4,shadowOptions:{delegatesFocus:!0}})
+Ii.getOrCreate().withPrefix("ok").register(_4())
+const I4=_t`
     ${v5("inline-block")}
 
     :host {
@@ -20608,10 +20653,10 @@ const $4=_t`
     :host([disabled]) slot {
         color: ${fd};
     }
-`,_4=J`<slot></slot>`
-const I4=class extends He{}.compose({baseName:"ex-button",template:_4,styles:$4})
-Ii.getOrCreate().withPrefix("ok").register(I4())
-const M4=_t`
+`,M4=J`<slot></slot>`
+const E4=class extends He{}.compose({baseName:"ex-button",template:M4,styles:I4})
+Ii.getOrCreate().withPrefix("ok").register(E4())
+const A4=_t`
     ${v5("inline-flex")}
 
     :host {
@@ -20625,15 +20670,15 @@ const M4=_t`
         width: 100%;
         height: 100%;
     }
-`,E4=J`<img aria-hidden="true" src=${t=>t.url}>`
-class A4 extends rg{constructor(t){super(),this.url=t}static registerIconDynamic(t,e){const n="ok-ts-icon-dynamic-"
+`,T4=J`<img aria-hidden="true" src=${t=>t.url}>`
+class O4 extends rg{constructor(t){super(),this.url=t}static registerIconDynamic(t,e){const n="ok-ts-icon-dynamic-"
 if(!t.startsWith(n))throw new Error(`Icon tag name must start with '${n}', provided name: ${t}`)
 const i=t.substring(19)
 if(!/^[a-z][a-z]+$/.test(i))throw new Error(`Icon name must be lowercase [a-z] and at least two characters long, provided name: ${i}`)
-const o=`TsIconDynamic${i.charAt(0).toUpperCase()+i.slice(1)}`,r=`ts-icon-dynamic-${i}`,s={[o]:class extends A4{constructor(){super(e)}}}[o].compose({baseName:r,template:E4,styles:M4})
-Ii.getOrCreate().withPrefix("ok").register(s())}}const T4=A4.compose({baseName:"ts-icon-dynamic",template:J`<template></template>`,styles:_t`${v5("none")}`})
-Ii.getOrCreate().withPrefix("ok").register(T4())
-const O4={off:"off",enabled:"enabled",disabled:"disabled",hit:"hit",conditional:"conditional",hitDisabled:"hit-disabled"},D4="data-breakpoint-state",R4="menu",F4=J`
+const o=`TsIconDynamic${i.charAt(0).toUpperCase()+i.slice(1)}`,r=`ts-icon-dynamic-${i}`,s={[o]:class extends O4{constructor(){super(e)}}}[o].compose({baseName:r,template:T4,styles:A4})
+Ii.getOrCreate().withPrefix("ok").register(s())}}const D4=O4.compose({baseName:"ts-icon-dynamic",template:J`<template></template>`,styles:_t`${v5("none")}`})
+Ii.getOrCreate().withPrefix("ok").register(D4())
+const R4={off:"off",enabled:"enabled",disabled:"disabled",hit:"hit",conditional:"conditional",hitDisabled:"hit-disabled"},F4="data-breakpoint-state",L4="menu",B4=J`
     <template
         ?open="${t=>t.open}"
         @focusout="${(t,e)=>t.focusoutHandler(e.event)}"
@@ -20650,12 +20695,12 @@ const O4={off:"off",enabled:"enabled",disabled:"disabled",hit:"hit",conditional:
             ${""}
             tabindex="-1"
         >
-            ${Ut(t=>t.currentState===O4.off,J`<${"spright-icon-breakpoint-hover"} />`)}
-            ${Ut(t=>t.currentState===O4.enabled,J`<${"spright-icon-breakpoint-enabled"} />`)}
-            ${Ut(t=>t.currentState===O4.disabled,J`<${"spright-icon-breakpoint-disabled"} />`)}
-            ${Ut(t=>t.currentState===O4.hit,J`<${"spright-icon-breakpoint-hit"} />`)}
-            ${Ut(t=>t.currentState===O4.conditional,J`<${"spright-icon-breakpoint-conditional"} />`)}
-            ${Ut(t=>t.currentState===O4.hitDisabled,J`<${"spright-icon-breakpoint-hit-disabled"} />`)}
+            ${Ut(t=>t.currentState===R4.off,J`<${"spright-icon-breakpoint-hover"} />`)}
+            ${Ut(t=>t.currentState===R4.enabled,J`<${"spright-icon-breakpoint-enabled"} />`)}
+            ${Ut(t=>t.currentState===R4.disabled,J`<${"spright-icon-breakpoint-disabled"} />`)}
+            ${Ut(t=>t.currentState===R4.hit,J`<${"spright-icon-breakpoint-hit"} />`)}
+            ${Ut(t=>t.currentState===R4.conditional,J`<${"spright-icon-breakpoint-conditional"} />`)}
+            ${Ut(t=>t.currentState===R4.hitDisabled,J`<${"spright-icon-breakpoint-hit-disabled"} />`)}
         </button>
                 ${Ut(t=>t.open,J`
                     <${dv}
@@ -20671,12 +20716,12 @@ const O4={off:"off",enabled:"enabled",disabled:"disabled",hit:"hit",conditional:
                         ${zt("region")}
                     >
                         <span part="menu">
-                            <slot name="${R4}" ${Qt({property:"slottedMenus"})}></slot>
+                            <slot name="${L4}" ${Qt({property:"slottedMenus"})}></slot>
                         </span>
                     </${dv}>
                 `)}
     </template>
-`,L4=_t`
+`,N4=_t`
     ${Ho("inline-flex")}
 
     :host {
@@ -20720,15 +20765,15 @@ const O4={off:"off",enabled:"enabled",disabled:"disabled",hit:"hit",conditional:
     }
 
 `
-class B4 extends OV{constructor(){super(...arguments),this.open=!1,this.focusLastItemWhenOpened=!1,this.restoreRowMenuOpenOnClose=!1,this.breakpointEnabledString="Breakpoint enabled",this.breakpointDisabledString="Breakpoint disabled",this.breakpointHitString="Breakpoint hit",this.breakpointConditionalString="Conditional breakpoint",this.breakpointHitDisabledString="Breakpoint hit (disabled)",this.breakpointAddString="Add breakpoint",this.breakpointRemoveString="Remove breakpoint",this.menuChangeHandler=()=>{this.open=!1,this.button?.focus()}}get currentState(){const t=this.cellRecord?.value
-return t&&Object.values(O4).includes(t)?t:O4.off}get tooltipText(){return this.currentState===O4.off?this.breakpointAddString:this.breakpointRemoveString}get ariaLabelText(){switch(this.currentState){case O4.enabled:return this.breakpointEnabledString
-case O4.disabled:return this.breakpointDisabledString
-case O4.hit:return this.breakpointHitString
-case O4.conditional:return this.breakpointConditionalString
-case O4.hitDisabled:return this.breakpointHitDisabledString
+class z4 extends OV{constructor(){super(...arguments),this.open=!1,this.focusLastItemWhenOpened=!1,this.restoreRowMenuOpenOnClose=!1,this.breakpointEnabledString="Breakpoint enabled",this.breakpointDisabledString="Breakpoint disabled",this.breakpointHitString="Breakpoint hit",this.breakpointConditionalString="Conditional breakpoint",this.breakpointHitDisabledString="Breakpoint hit (disabled)",this.breakpointAddString="Add breakpoint",this.breakpointRemoveString="Remove breakpoint",this.menuChangeHandler=()=>{this.open=!1,this.button?.focus()}}get currentState(){const t=this.cellRecord?.value
+return t&&Object.values(R4).includes(t)?t:R4.off}get tooltipText(){return this.currentState===R4.off?this.breakpointAddString:this.breakpointRemoveString}get ariaLabelText(){switch(this.currentState){case R4.enabled:return this.breakpointEnabledString
+case R4.disabled:return this.breakpointDisabledString
+case R4.hit:return this.breakpointHitString
+case R4.conditional:return this.breakpointConditionalString
+case R4.hitDisabled:return this.breakpointHitDisabledString
 default:return this.breakpointAddString}}get menuPosition(){return this.columnConfig?.position??Xy}get tabbableChildren(){return this.button?[this.button]:[]}onButtonClick(t){t.stopPropagation()
-const e=this.currentState,n=e===O4.off?O4.enabled:O4.off
-this.emitToggle(e,n)}onContextMenu(t){t.preventDefault(),t.stopPropagation(),this.requestContextMenu()}onKeyDown(t){return"F10"===t.key&&t.shiftKey||t.key===B4.menuKeyAlias||t.key===B4.contextMenuKeyAlias?(t.preventDefault(),t.stopPropagation(),this.requestContextMenu(),!1):"F9"===t.key||(t.ctrlKey||t.metaKey)&&"b"===t.key.toLowerCase()?(t.preventDefault(),t.stopPropagation(),this.onButtonClick(t),!1):"ArrowDown"===t.key?(t.preventDefault(),t.stopPropagation(),this.focusLastItemWhenOpened=!1,this.requestContextMenu(),!1):"ArrowUp"!==t.key||(t.preventDefault(),t.stopPropagation(),this.focusLastItemWhenOpened=!0,this.requestContextMenu(),!1)}regionLoadedHandler(){this.focusLastItemWhenOpened?(this.focusLastItemWhenOpened=!1,this.focusLastMenuItem()):this.focusMenu()}regionChanged(t,e){t&&t.removeEventListener("change",this.menuChangeHandler,{capture:!0}),this.region&&(this.region.anchorElement=this.button??this,this.region.addEventListener("change",this.menuChangeHandler,{capture:!0}))}buttonChanged(){this.region&&(this.region.anchorElement=this.button??this)}openChanged(t,e){const n=this.getOwningRow()
+const e=this.currentState,n=e===R4.off?R4.enabled:R4.off
+this.emitToggle(e,n)}onContextMenu(t){t.preventDefault(),t.stopPropagation(),this.requestContextMenu()}onKeyDown(t){return"F10"===t.key&&t.shiftKey||t.key===z4.menuKeyAlias||t.key===z4.contextMenuKeyAlias?(t.preventDefault(),t.stopPropagation(),this.requestContextMenu(),!1):"F9"===t.key||(t.ctrlKey||t.metaKey)&&"b"===t.key.toLowerCase()?(t.preventDefault(),t.stopPropagation(),this.onButtonClick(t),!1):"ArrowDown"===t.key?(t.preventDefault(),t.stopPropagation(),this.focusLastItemWhenOpened=!1,this.requestContextMenu(),!1):"ArrowUp"!==t.key||(t.preventDefault(),t.stopPropagation(),this.focusLastItemWhenOpened=!0,this.requestContextMenu(),!1)}regionLoadedHandler(){this.focusLastItemWhenOpened?(this.focusLastItemWhenOpened=!1,this.focusLastMenuItem()):this.focusMenu()}regionChanged(t,e){t&&t.removeEventListener("change",this.menuChangeHandler,{capture:!0}),this.region&&(this.region.anchorElement=this.button??this,this.region.addEventListener("change",this.menuChangeHandler,{capture:!0}))}buttonChanged(){this.region&&(this.region.anchorElement=this.button??this)}openChanged(t,e){const n=this.getOwningRow()
 if(n)return e?(this.restoreRowMenuOpenOnClose=!n.hasAttribute("menu-open"),void(n.menuOpen=!0)):void(this.restoreRowMenuOpenOnClose&&(n.menuOpen=!1,this.restoreRowMenuOpenOnClose=!1))}focusoutHandler(t){if(!this.open)return!0
 const e=t.relatedTarget
 return!!(this.contains(e)||this.region?.contains(e)||this.getMenu()?.contains(e))||(this.open=!1,!1)}contextMenuKeyDownHandler(t){return"Escape"!==t.key||(this.open=!1,this.button?.focus(),!1)}onContextMenuChange(t){const e=this.getRequestedStateFromEvent(t)
@@ -20743,7 +20788,7 @@ t=e instanceof HTMLElement?e:void 0}}}isSlotElement(t){return"SLOT"===t?.nodeNam
 if(t&&t.length>0){t[t.length-1].focus()}}emitToggle(t,e){const n={recordId:this.recordId,newState:e,oldState:t}
 this.$emit("breakpoint-column-toggle",n)}requestContextMenu(){this.openMenuFromColumnSlot()}openMenuFromColumnSlot(){const t=this.columnConfig?.menuSlot
 if(!t)return
-const e={slots:[{name:t,slot:R4}]}
+const e={slots:[{name:t,slot:L4}]}
 this.$emit("cell-view-slots-request",e),this.open=!0}getOwningRow(){const t=this.getRootNode()
 if(!(t instanceof ShadowRoot))return
 const e=t.host
@@ -20753,23 +20798,23 @@ if(!(n instanceof ShadowRoot))return
 const i=n.host
 return i instanceof HTMLElement&&"nimble-table-row"===i.localName?i:void 0}getRequestedStateFromEvent(t){const e=t.target
 if(!(e instanceof HTMLElement))return
-const n=e.closest(`[${D4}]`)
+const n=e.closest(`[${F4}]`)
 if(!n)return
-const i=n.getAttribute(D4)
-return i&&Object.values(O4).includes(i)?i:void 0}}B4.menuKeyAlias="Menu",B4.contextMenuKeyAlias="ContextMenu",t([pt({mode:"boolean"})],B4.prototype,"open",void 0),t([C],B4.prototype,"region",void 0),t([C],B4.prototype,"slottedMenus",void 0),t([C],B4.prototype,"breakpointEnabledString",void 0),t([C],B4.prototype,"breakpointDisabledString",void 0),t([C],B4.prototype,"breakpointHitString",void 0),t([C],B4.prototype,"breakpointConditionalString",void 0),t([C],B4.prototype,"breakpointHitDisabledString",void 0),t([C],B4.prototype,"breakpointAddString",void 0),t([C],B4.prototype,"breakpointRemoveString",void 0)
-const N4=B4.compose({baseName:"ts-table-column-breakpoint-cell-view",template:F4,styles:L4})
-Ii.getOrCreate().withPrefix("ok").register(N4())
-const z4=J`
+const i=n.getAttribute(F4)
+return i&&Object.values(R4).includes(i)?i:void 0}}z4.menuKeyAlias="Menu",z4.contextMenuKeyAlias="ContextMenu",t([pt({mode:"boolean"})],z4.prototype,"open",void 0),t([C],z4.prototype,"region",void 0),t([C],z4.prototype,"slottedMenus",void 0),t([C],z4.prototype,"breakpointEnabledString",void 0),t([C],z4.prototype,"breakpointDisabledString",void 0),t([C],z4.prototype,"breakpointHitString",void 0),t([C],z4.prototype,"breakpointConditionalString",void 0),t([C],z4.prototype,"breakpointHitDisabledString",void 0),t([C],z4.prototype,"breakpointAddString",void 0),t([C],z4.prototype,"breakpointRemoveString",void 0)
+const P4=z4.compose({baseName:"ts-table-column-breakpoint-cell-view",template:B4,styles:N4})
+Ii.getOrCreate().withPrefix("ok").register(P4())
+const V4=J`
     <template @delegated-event="${(t,e)=>t.onDelegatedEvent(e.event)}"
         >${YH}</template
     >
 `
-class P4 extends(NU(NV)){constructor(){super(),this.position=Xy,this.columnInternals.resizingDisabled=!0,this.columnInternals.pixelWidth=32,this.columnInternals.minPixelWidth=32}onDelegatedEvent(t){t.stopImmediatePropagation()
+class H4 extends(NU(NV)){constructor(){super(),this.position=Xy,this.columnInternals.resizingDisabled=!0,this.columnInternals.pixelWidth=32,this.columnInternals.minPixelWidth=32}onDelegatedEvent(t){t.stopImmediatePropagation()
 const e=t
 if("breakpoint-column-toggle"===e.detail.originalEvent.type){const t={...e.detail.originalEvent.detail,recordId:e.detail.recordId}
 this.$emit("breakpoint-column-toggle",t)}else if("breakpoint-column-state-change-requested"===e.detail.originalEvent.type){const t={...e.detail.originalEvent.detail,recordId:e.detail.recordId}
 this.$emit("breakpoint-column-state-change-requested",t)}}requestBreakpointStateChange(t,e,n){const i={recordId:t,currentState:e,requestedState:n}
-this.$emit("breakpoint-column-state-change-requested",i)}getColumnInternalsOptions(){return{cellRecordFieldNames:["value"],cellViewTag:"ok-ts-table-column-breakpoint-cell-view",delegatedEvents:["breakpoint-column-toggle","breakpoint-column-state-change-requested"],slotNames:[R4],validator:new jH([])}}fieldNameChanged(){this.columnInternals.dataRecordFieldNames=[this.fieldName],this.columnInternals.operandDataRecordFieldName=this.fieldName}menuSlotChanged(){this.updateColumnConfig()}positionChanged(){this.updateColumnConfig()}updateColumnConfig(){this.columnInternals.columnConfig={menuSlot:this.menuSlot,position:this.position}}}t([pt({attribute:"field-name"})],P4.prototype,"fieldName",void 0),t([pt({attribute:"menu-slot"})],P4.prototype,"menuSlot",void 0),t([pt],P4.prototype,"position",void 0)
-const V4=P4.compose({baseName:"ts-table-column-breakpoint",template:z4,styles:KH})
-Ii.getOrCreate().withPrefix("ok").register(V4())}()
+this.$emit("breakpoint-column-state-change-requested",i)}getColumnInternalsOptions(){return{cellRecordFieldNames:["value"],cellViewTag:"ok-ts-table-column-breakpoint-cell-view",delegatedEvents:["breakpoint-column-toggle","breakpoint-column-state-change-requested"],slotNames:[L4],validator:new jH([])}}fieldNameChanged(){this.columnInternals.dataRecordFieldNames=[this.fieldName],this.columnInternals.operandDataRecordFieldName=this.fieldName}menuSlotChanged(){this.updateColumnConfig()}positionChanged(){this.updateColumnConfig()}updateColumnConfig(){this.columnInternals.columnConfig={menuSlot:this.menuSlot,position:this.position}}}t([pt({attribute:"field-name"})],H4.prototype,"fieldName",void 0),t([pt({attribute:"menu-slot"})],H4.prototype,"menuSlot",void 0),t([pt],H4.prototype,"position",void 0)
+const U4=H4.compose({baseName:"ts-table-column-breakpoint",template:V4,styles:KH})
+Ii.getOrCreate().withPrefix("ok").register(U4())}()
 //# sourceMappingURL=all-components-bundle.min.js.map