@cas-smartdesign/list 6.5.3 → 7.0.0
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/dist/docs/doc.mjs +2 -2
- package/dist/list-with-externals.js +2 -2
- package/dist/list-with-externals.js.map +3 -3
- package/dist/list.d.ts +1 -1
- package/dist/list.mjs +4 -7
- package/dist/list.mjs.map +1 -1
- package/package.json +5 -5
package/dist/docs/doc.mjs
CHANGED
|
@@ -314,7 +314,7 @@ container.appendChild(list);
|
|
|
314
314
|
box-sizing: border-box;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
.container ::slotted(:not(:last-
|
|
317
|
+
.container ::slotted(:not(:last-child)) {
|
|
318
318
|
border-bottom: 1px solid #d9d9d9;
|
|
319
319
|
}
|
|
320
320
|
</style>
|
|
@@ -323,7 +323,7 @@ container.appendChild(list);
|
|
|
323
323
|
<slot name="items"></slot>
|
|
324
324
|
<slot id="default-slot"></slot>
|
|
325
325
|
</div>
|
|
326
|
-
`;let to=0;const be=class be extends br{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Yr,this._focusObserverCleanupTasks=[],this.onDefaultSlotChange=()=>{let t=0;this.defaultSlot.assignedElements().forEach(n=>{this.isSeparator(n)||this.initListItem(n,t++)}),this.updateFocusedElement()},this.handleKeyDown=t=>{let n=!0;const i=this.getListItems.length;switch(t.key){case"ArrowDown":case"Down":this.focusIndex=(this.focusIndex+1)%i;break;case"ArrowUp":case"Up":this.focusIndex=(this.focusIndex-1+i)%i;break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,t
|
|
326
|
+
`;let to=0;const be=class be extends br{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Yr,this._focusObserverCleanupTasks=[],this.onDefaultSlotChange=()=>{let t=0;this.defaultSlot.assignedElements().forEach(n=>{this.isSeparator(n)||this.initListItem(n,t++)}),this.updateFocusedElement()},this.handleKeyDown=t=>{let n=!0;const i=this.getListItems.length;switch(t.key){case"ArrowDown":case"Down":this.focusIndex=(this.focusIndex+1)%i;break;case"ArrowUp":case"Up":this.focusIndex=(this.focusIndex-1+i)%i;break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,t);break;case"End":case"PageDown":this.focusIndex=this.items.length-1;break;case"Home":case"PageUp":this.focusIndex=0;break;default:n=!1;break}n&&(t.preventDefault(),t.stopPropagation())},this._fallbackId=be.ID+"_"+to++,this.addEventListener("pointerup",t=>{this.focusIndex=this.getListItems.indexOf(t.target),this.updateFocusedElement()}),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndexes&&(this.focusIndex=this.selectedIndexes[0]),this.focusIndex==-1&&this.childElementCount>0&&(this.focusIndex=0)):this.updateFocusedElement())}),this.addEventListener("blur",()=>this.removeFocusedItemAttributes());const e={root:null,rootMargin:"0px",threshold:[0,1]};this._focusObserver=new IntersectionObserver(t=>this.focusIntersectionCallback(t,this),e)}get items(){return this._items}set items(e){this._items=e,this.render()}get itemGenerator(){return this._itemGenerator}set itemGenerator(e){this._itemGenerator=e,this.render()}get selectionType(){return this.getAttribute("selection-type")}set selectionType(e){e?this.setAttribute("selection-type",e):this.removeAttribute("selection-type")}get focusIndex(){return this.hasAttribute("focus-index")?Number(this.getAttribute("focus-index")):-1}set focusIndex(e){0<=e&&e<this.getListItems.length?this.setAttribute("focus-index",e.toString()):this.removeAttribute("focus-index")}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(e){this.toggleAttribute("focus-target",e)}getListItem(e){return this.shadowRoot?this.getListItems[e]:null}get getListItems(){return Array.prototype.slice.call(this.children).filter(e=>!this.isSeparator(e))}get selectedIndexes(){return this._selectedIndexes}set selectedIndexes(e){const t=this._selectedIndexes||[];this._selectedIndexes=e||[],t.filter(n=>!this._selectedIndexes.includes(n)).forEach(n=>{this.setSelectedAttr(this.getListItem(n),!1)}),this._selectedIndexes.filter(n=>!t.includes(n)).forEach(n=>{this.setSelectedAttr(this.getListItem(n),!0)})}static get observedAttributes(){return["focus-index","focus-target"]}is(){return be.ID}template(){const e=document.createElement("template");return e.innerHTML=eo,e}removeFocusedItemAttributes(){if(this.focusIndex!=-1){const e=this.getListItem(this.focusIndex);e&&(e.removeAttribute("focused"),this._focusObserverCleanupTasks.forEach(t=>t.call(this)),this._focusObserverCleanupTasks=[],this.removeAttribute("aria-activedescendant"))}}connectedCallback(){super.connectedCallback(),this.defaultSlot.addEventListener("slotchange",this.onDefaultSlotChange),this.hasAttribute("role")||this.setAttribute("role","listbox"),this.id||(this.id=this._fallbackId),this.render(),this.addEventListener("keydown",this.handleKeyDown),this.selectionType||(this.selectionType="trigger-only")}get defaultSlot(){return this.shadowRoot.querySelector("#default-slot")}isSeparator(e){return e.tagName=="HR"||e.getAttribute("role")=="separator"}attributeChangedCallback(e,t,n){if(e==="focus-index"){const i=this.getListItem(t);i&&i.removeAttribute("focused"),this.updateFocusedElement()}else e==="focus-target"&&(this.focusTarget?this.updateFocusedElement():document.activeElement!=this&&this.removeFocusedItemAttributes())}increaseWidthIfNeeded(){window.requestAnimationFrame(()=>{let e=Number.MAX_SAFE_INTEGER;const t=getComputedStyle(this).maxWidth,n=this.offsetWidth;t.endsWith("px")&&(e=Number.parseInt(t)-n);const i=this.style.width;if(e==0||i.endsWith("px")&&n<Number.parseInt(i))this.enableLineClampOnItemsIfNeeded();else{const c=[...Array.from(this.children).filter(p=>p.slot==="items")].map(p=>{if(p instanceof Je){p.enableLineClamp=!1;const b=p.missingWidthForTexts;return b>e&&(p.enableLineClamp=!0),b}}),a=Math.max(...c);if(a>0){const p=n+a;this.style.width=`${p}px`,this.offsetWidth<p&&this.enableLineClampOnItemsIfNeeded()}}})}enableLineClampOnItemsIfNeeded(){Array.from(this.children).filter(e=>e.slot==="items").forEach(e=>{e instanceof Je&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}render(){if(!this.isConnected||!this.items)return;Array.from(this.children).filter(n=>n.slot==="items").forEach(n=>n.remove());const e=document.createDocumentFragment();let t=0;this.items.forEach((n,i)=>{const c=this.itemGenerator(n,i);this.isSeparator(c)||this.initListItem(c,t++),c.slot="items",e.appendChild(c)}),this.appendChild(e),this.updateFocusedElement()}initListItem(e,t){this.setSelectedAttr(e,this.selectedIndexes.includes(t)),e.addEventListener("click",n=>{this.handleItemClick(n,t)}),e.addEventListener("mousedown",n=>{n.button==1&&n.preventDefault()}),e.addEventListener("auxclick",n=>{this.handleItemClick(n,t)}),(!e.id||e.id.startsWith(this.id+"_item_"))&&(e.id=this.id+"_item_"+t)}focusIntersectionCallback(e,t){e.forEach(n=>{const i=n.target;(!n.isIntersecting||n.intersectionRatio<1)&&(i.scrollIntoView({block:"nearest",inline:"nearest"}),t._focusObserver.unobserve(i))})}updateFocusedElement(){const e=this.getListItem(this.focusIndex);e&&(this.focusTarget||this.matches(":focus"))?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id),this._focusObserver.observe(e),this._focusObserverCleanupTasks.push(()=>{this._focusObserver.unobserve(e)})):(this._focusObserverCleanupTasks.forEach(t=>t.call(this)),this._focusObserverCleanupTasks=[],this.removeAttribute("aria-activedescendant"))}handleItemClick(e,t){e.button!==null&&(e.button==0||e.button==1)&&this.handleSelection(t,e)}handleSelection(e,t){const n=this.getListItem(e);if(n.getAttribute("aria-disabled")=="true"||n.hasAttribute("disabled"))return;const i=this.isSelected(n);this.selectionType!=="trigger-only"&&(this.selectionType==="single"?this.selectedIndexes=i?[]:[e]:this.toggleSelection(n)?this._selectedIndexes.push(e):this.removeFromSelectedIndexes(e)),this.focusIndex=e,this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:this.selectionType=="trigger-only"||!i,originalEvent:t},bubbles:!0,composed:!0}))}removeFromSelectedIndexes(e){const t=this._selectedIndexes.indexOf(e);t!==-1&&this._selectedIndexes.splice(t,1)}toggleSelection(e){const t=!e.hasAttribute("selected");return this.setSelectedAttr(e,t),t}setSelectedAttr(e,t){e&&(t?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("aria-selected",String(t)))}isSelected(e){return e.hasAttribute("selected")}};be.ID="sd-list",be.ensureDefined=()=>{Je.ensureDefined(),customElements.get(be.ID)||customElements.define(be.ID,be)};let mi=be;mi.ensureDefined();function Vn(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}function io(s){if(Object.prototype.hasOwnProperty.call(s,"__esModule"))return s;var e=s.default;if(typeof e=="function"){var t=function n(){var i=!1;try{i=this instanceof n}catch{}return i?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(s).forEach(function(n){var i=Object.getOwnPropertyDescriptor(s,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return s[n]}})}),t}var ht={exports:{}},rn;function no(){if(rn)return ht.exports;rn=1;var s=String,e=function(){return{isColorSupported:!1,reset:s,bold:s,dim:s,italic:s,underline:s,inverse:s,hidden:s,strikethrough:s,black:s,red:s,green:s,yellow:s,blue:s,magenta:s,cyan:s,white:s,gray:s,bgBlack:s,bgRed:s,bgGreen:s,bgYellow:s,bgBlue:s,bgMagenta:s,bgCyan:s,bgWhite:s,blackBright:s,redBright:s,greenBright:s,yellowBright:s,blueBright:s,magentaBright:s,cyanBright:s,whiteBright:s,bgBlackBright:s,bgRedBright:s,bgGreenBright:s,bgYellowBright:s,bgBlueBright:s,bgMagentaBright:s,bgCyanBright:s,bgWhiteBright:s}};return ht.exports=e(),ht.exports.createColors=e,ht.exports}const so={},ro=Object.freeze(Object.defineProperty({__proto__:null,default:so},Symbol.toStringTag,{value:"Module"})),de=io(ro);var Bt,on;function Ei(){if(on)return Bt;on=1;let s=no(),e=de;class t extends Error{constructor(i,c,a,p,b,h){super(i),this.name="CssSyntaxError",this.reason=i,b&&(this.file=b),p&&(this.source=p),h&&(this.plugin=h),typeof c<"u"&&typeof a<"u"&&(typeof c=="number"?(this.line=c,this.column=a):(this.line=c.line,this.column=c.column,this.endLine=a.line,this.endColumn=a.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,t)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(i){if(!this.source)return"";let c=this.source;i==null&&(i=s.isColorSupported);let a=l=>l,p=l=>l,b=l=>l;if(i){let{bold:l,gray:f,red:m}=s.createColors(!0);p=g=>l(m(g)),a=g=>f(g),e&&(b=g=>e(g))}let h=c.split(/\r?\n/),r=Math.max(this.line-3,0),u=Math.min(this.line+2,h.length),o=String(u).length;return h.slice(r,u).map((l,f)=>{let m=r+1+f,g=" "+(" "+m).slice(-o)+" | ";if(m===this.line){if(l.length>160){let E=20,v=Math.max(0,this.column-E),w=Math.max(this.column+E,this.endColumn+E),y=l.slice(v,w),A=a(g.replace(/\d/g," "))+l.slice(0,Math.min(this.column-1,E-1)).replace(/[^\t]/g," ");return p(">")+a(g)+b(y)+`
|
|
327
327
|
`+A+p("^")}let _=a(g.replace(/\d/g," "))+l.slice(0,this.column-1).replace(/[^\t]/g," ");return p(">")+a(g)+b(l)+`
|
|
328
328
|
`+_+p("^")}return" "+a(g)+b(l)}).join(`
|
|
329
329
|
`)}toString(){let i=this.showSourceCode();return i&&(i=`
|
|
@@ -54,7 +54,7 @@ var window;(window||={})["@cas-smartdesign/list"]=(()=>{var nt=Object.defineProp
|
|
|
54
54
|
box-sizing: border-box;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.container ::slotted(:not(:last-
|
|
57
|
+
.container ::slotted(:not(:last-child)) {
|
|
58
58
|
border-bottom: 1px solid #d9d9d9;
|
|
59
59
|
}
|
|
60
60
|
</style>
|
|
@@ -63,7 +63,7 @@ var window;(window||={})["@cas-smartdesign/list"]=(()=>{var nt=Object.defineProp
|
|
|
63
63
|
<slot name="items"></slot>
|
|
64
64
|
<slot id="default-slot"></slot>
|
|
65
65
|
</div>
|
|
66
|
-
`,ge=0,M=class vt extends At{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Wt,this._focusObserverCleanupTasks=[],this.onDefaultSlotChange=()=>{let e=0;this.defaultSlot.assignedElements().forEach(s=>{this.isSeparator(s)||this.initListItem(s,e++)}),this.updateFocusedElement()},this.handleKeyDown=e=>{let s=!0,o=this.getListItems.length;switch(e.key){case"ArrowDown":case"Down":this.focusIndex=(this.focusIndex+1)%o;break;case"ArrowUp":case"Up":this.focusIndex=(this.focusIndex-1+o)%o;break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,e
|
|
66
|
+
`,ge=0,M=class vt extends At{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Wt,this._focusObserverCleanupTasks=[],this.onDefaultSlotChange=()=>{let e=0;this.defaultSlot.assignedElements().forEach(s=>{this.isSeparator(s)||this.initListItem(s,e++)}),this.updateFocusedElement()},this.handleKeyDown=e=>{let s=!0,o=this.getListItems.length;switch(e.key){case"ArrowDown":case"Down":this.focusIndex=(this.focusIndex+1)%o;break;case"ArrowUp":case"Up":this.focusIndex=(this.focusIndex-1+o)%o;break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,e);break;case"End":case"PageDown":this.focusIndex=this.items.length-1;break;case"Home":case"PageUp":this.focusIndex=0;break;default:s=!1;break}s&&(e.preventDefault(),e.stopPropagation())},this._fallbackId=vt.ID+"_"+ge++,this.addEventListener("pointerup",e=>{this.focusIndex=this.getListItems.indexOf(e.target),this.updateFocusedElement()}),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndexes&&(this.focusIndex=this.selectedIndexes[0]),this.focusIndex==-1&&this.childElementCount>0&&(this.focusIndex=0)):this.updateFocusedElement())}),this.addEventListener("blur",()=>this.removeFocusedItemAttributes());let t={root:null,rootMargin:"0px",threshold:[0,1]};this._focusObserver=new IntersectionObserver(e=>this.focusIntersectionCallback(e,this),t)}get items(){return this._items}set items(t){this._items=t,this.render()}get itemGenerator(){return this._itemGenerator}set itemGenerator(t){this._itemGenerator=t,this.render()}get selectionType(){return this.getAttribute("selection-type")}set selectionType(t){t?this.setAttribute("selection-type",t):this.removeAttribute("selection-type")}get focusIndex(){return this.hasAttribute("focus-index")?Number(this.getAttribute("focus-index")):-1}set focusIndex(t){0<=t&&t<this.getListItems.length?this.setAttribute("focus-index",t.toString()):this.removeAttribute("focus-index")}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(t){this.toggleAttribute("focus-target",t)}getListItem(t){return this.shadowRoot?this.getListItems[t]:null}get getListItems(){return Array.prototype.slice.call(this.children).filter(t=>!this.isSeparator(t))}get selectedIndexes(){return this._selectedIndexes}set selectedIndexes(t){let e=this._selectedIndexes||[];this._selectedIndexes=t||[],e.filter(s=>!this._selectedIndexes.includes(s)).forEach(s=>{this.setSelectedAttr(this.getListItem(s),!1)}),this._selectedIndexes.filter(s=>!e.includes(s)).forEach(s=>{this.setSelectedAttr(this.getListItem(s),!0)})}static get observedAttributes(){return["focus-index","focus-target"]}is(){return vt.ID}template(){let t=document.createElement("template");return t.innerHTML=fe,t}removeFocusedItemAttributes(){if(this.focusIndex!=-1){let t=this.getListItem(this.focusIndex);t&&(t.removeAttribute("focused"),this._focusObserverCleanupTasks.forEach(e=>e.call(this)),this._focusObserverCleanupTasks=[],this.removeAttribute("aria-activedescendant"))}}connectedCallback(){super.connectedCallback(),this.defaultSlot.addEventListener("slotchange",this.onDefaultSlotChange),this.hasAttribute("role")||this.setAttribute("role","listbox"),this.id||(this.id=this._fallbackId),this.render(),this.addEventListener("keydown",this.handleKeyDown),this.selectionType||(this.selectionType="trigger-only")}get defaultSlot(){return this.shadowRoot.querySelector("#default-slot")}isSeparator(t){return t.tagName=="HR"||t.getAttribute("role")=="separator"}attributeChangedCallback(t,e,s){if(t==="focus-index"){let o=this.getListItem(e);o&&o.removeAttribute("focused"),this.updateFocusedElement()}else t==="focus-target"&&(this.focusTarget?this.updateFocusedElement():document.activeElement!=this&&this.removeFocusedItemAttributes())}increaseWidthIfNeeded(){window.requestAnimationFrame(()=>{let t=Number.MAX_SAFE_INTEGER,e=getComputedStyle(this).maxWidth,s=this.offsetWidth;e.endsWith("px")&&(t=Number.parseInt(e)-s);let o=this.style.width;if(t==0||o.endsWith("px")&&s<Number.parseInt(o))this.enableLineClampOnItemsIfNeeded();else{let r=[...Array.from(this.children).filter(l=>l.slot==="items")].map(l=>{if(l instanceof L){l.enableLineClamp=!1;let a=l.missingWidthForTexts;return a>t&&(l.enableLineClamp=!0),a}}),n=Math.max(...r);if(n>0){let l=s+n;this.style.width=`${l}px`,this.offsetWidth<l&&this.enableLineClampOnItemsIfNeeded()}}})}enableLineClampOnItemsIfNeeded(){Array.from(this.children).filter(t=>t.slot==="items").forEach(t=>{t instanceof L&&(t.enableLineClamp=t.enableLineClamp||t.missingWidthForTexts>0)})}render(){if(!this.isConnected||!this.items)return;Array.from(this.children).filter(s=>s.slot==="items").forEach(s=>s.remove());let t=document.createDocumentFragment(),e=0;this.items.forEach((s,o)=>{let r=this.itemGenerator(s,o);this.isSeparator(r)||this.initListItem(r,e++),r.slot="items",t.appendChild(r)}),this.appendChild(t),this.updateFocusedElement()}initListItem(t,e){this.setSelectedAttr(t,this.selectedIndexes.includes(e)),t.addEventListener("click",s=>{this.handleItemClick(s,e)}),t.addEventListener("mousedown",s=>{s.button==1&&s.preventDefault()}),t.addEventListener("auxclick",s=>{this.handleItemClick(s,e)}),(!t.id||t.id.startsWith(this.id+"_item_"))&&(t.id=this.id+"_item_"+e)}focusIntersectionCallback(t,e){t.forEach(s=>{let o=s.target;(!s.isIntersecting||s.intersectionRatio<1)&&(o.scrollIntoView({block:"nearest",inline:"nearest"}),e._focusObserver.unobserve(o))})}updateFocusedElement(){let t=this.getListItem(this.focusIndex);t&&(this.focusTarget||this.matches(":focus"))?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id),this._focusObserver.observe(t),this._focusObserverCleanupTasks.push(()=>{this._focusObserver.unobserve(t)})):(this._focusObserverCleanupTasks.forEach(e=>e.call(this)),this._focusObserverCleanupTasks=[],this.removeAttribute("aria-activedescendant"))}handleItemClick(t,e){t.button!==null&&(t.button==0||t.button==1)&&this.handleSelection(e,t)}handleSelection(t,e){let s=this.getListItem(t);if(s.getAttribute("aria-disabled")=="true"||s.hasAttribute("disabled"))return;let o=this.isSelected(s);this.selectionType!=="trigger-only"&&(this.selectionType==="single"?this.selectedIndexes=o?[]:[t]:this.toggleSelection(s)?this._selectedIndexes.push(t):this.removeFromSelectedIndexes(t)),this.focusIndex=t,this.dispatchEvent(new CustomEvent("selection",{detail:{index:t,selected:this.selectionType=="trigger-only"||!o,originalEvent:e},bubbles:!0,composed:!0}))}removeFromSelectedIndexes(t){let e=this._selectedIndexes.indexOf(t);e!==-1&&this._selectedIndexes.splice(e,1)}toggleSelection(t){let e=!t.hasAttribute("selected");return this.setSelectedAttr(t,e),e}setSelectedAttr(t,e){t&&(e?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(e)))}isSelected(t){return t.hasAttribute("selected")}};M.ID="sd-list",M.ensureDefined=()=>{L.ensureDefined(),customElements.get(M.ID)||customElements.define(M.ID,M)};var jt=M;jt.ensureDefined();return Zt($e);})();
|
|
67
67
|
/*! Bundled license information:
|
|
68
68
|
|
|
69
69
|
@lit/reactive-element/css-tag.js:
|