/*! For license information please see treeview-stories-treeview-stories.aa7d3104.iframe.bundle.js.LICENSE.txt */
(globalThis.webpackChunk_spectrum_css_preview=globalThis.webpackChunk_spectrum_css_preview||[]).push([[7066,948],{"../components/treeview/stories/treeview.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Flat:()=>Flat,FoldersAndFiles:()=>FoldersAndFiles,Thumbnails:()=>Thumbnails,WithDropTarget:()=>WithDropTarget,WithSections:()=>WithSections,__namedExportsOrder:()=>__namedExportsOrder,default:()=>treeview_stories});var lit=__webpack_require__("../node_modules/lit/index.js"),class_map=__webpack_require__("../node_modules/lit/directives/class-map.js"),repeat=__webpack_require__("../node_modules/lit/directives/repeat.js"),style_map=__webpack_require__("../node_modules/lit/directives/style-map.js"),template=__webpack_require__("../components/icon/stories/template.js"),stories_template=__webpack_require__("../components/thumbnail/stories/template.js"),injectStylesIntoLinkTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js"),injectStylesIntoLinkTag_default=__webpack_require__.n(injectStylesIntoLinkTag),insertBySelector=__webpack_require__("../node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),treeview=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/treeview/index.css"),treeview_default=__webpack_require__.n(treeview),options={attributes:{"data-source":"processed"}};options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(treeview_default(),options);const Template=({rootClass="spectrum-TreeView",customClasses=[],customStyles={},size="m",variant,isQuiet,items,...globals})=>lit.qy`
		<ul
			class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--size${size?.toUpperCase()}`]:void 0!==size,[`${rootClass}--${variant}`]:void 0!==variant,[`${rootClass}--quiet`]:isQuiet,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
			style=${(0,style_map.W)(customStyles)}
		>
			${(0,repeat.u)(items,(item=>item.id),(item=>(({rootClass="spectrum-TreeView",size="m",type,id,link,label,isSelected,isDisabled,isOpen,isDropTarget,icon,iconSet,thumbnail,items,customClasses=[],...globals})=>"heading"===type?lit.qy`
			<li
				id=${id}
				class=${(0,class_map.H)({[`${rootClass}-section`]:!0,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
			>
				<div class="${rootClass}-heading">
					<span class="${rootClass}-itemLabel">${label}</span>
				</div>
				${void 0!==items&&items.length>0?Template({...globals,items,size,rootClass:"spectrum-TreeView",customClasses:["is-opened"]}):""}
			</li>
		`:lit.qy`
		<li
			id=${id}
			class=${(0,class_map.H)({[`${rootClass}-item`]:!0,"is-selected":isSelected,"is-disabled":isDisabled,"is-open":isOpen,"is-drop-target":isDropTarget,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
		>
			<a
				href=${link}
				target="_self"
				class="${rootClass}-itemLink"
				@click=${onclick??function(evt){if(isDisabled||!evt||!evt.target||void 0===items)return;evt.preventDefault();const closest=evt.target.closest(`.${rootClass}-item`);closest&&closest.classList.toggle("is-open")}}
			>
				${void 0!==items?(0,template.B)({...globals,size,setName:"ui",iconName:"ChevronRight",customClasses:[`${rootClass}-itemIndicator`]}):""}
				${icon?(0,template.B)({...globals,size,iconName:icon,setName:iconSet,customClasses:[`${rootClass}-itemIcon`]}):""}
				${thumbnail?(0,stories_template.B)({...globals,...thumbnail,size:"s"==size||"m"==size?"200":"l"==size?"400":"xl"==size?"600":"300",isLayer:!0,isSelected,customClasses:[`${rootClass}-itemThumbnail`]}):""}
				<span class="${rootClass}-itemLabel">${label}</span>
			</a>
			${void 0!==items&&items.length>0?Template({...globals,items,size,rootClass:"spectrum-TreeView",customClasses:["is-opened"]}):""}
		</li>
	`)({...globals,...item,size})))}
		</ul>
	`,treeview_stories={title:"Components/Tree view",description:"The typical usage of a treeview involves nesting a .spectrum-Treeview element within the .spectrum-TreeView-item parent element.",component:"Treeview",argTypes:{items:{table:{disable:!0}},variant:{table:{disable:!0}},size:{name:"Size",type:{name:"string",required:!0},table:{type:{summary:"string"},category:"Component"},options:["s","m","l","xl"],control:"select"},isQuiet:{name:"Quiet",type:{name:"boolean"},table:{type:{summary:"boolean"},category:"Component"},control:"boolean"},customStyles:{name:"Custom styles",description:"Storybook only styles for testing the story, applied to the parent element.",table:{type:{summary:"object"},category:"Advanced"},if:{arg:"customStyles"}}},args:{rootClass:"spectrum-TreeView",size:"m",isQuiet:!1,customStyles:{"max-inline-size":"600px"}},parameters:{actions:{handles:["click .spectrum-TreeView-itemLink"]},status:{type:"migrated"}}},Default=Template.bind({});Default.args={items:[{id:"label1",label:"Label 1",link:"#",isSelected:!0},{id:"group1",label:"Group 1",link:"#",isOpen:!0,items:[{id:"label2",label:"Label 2",link:"#",isDisabled:!0},{id:"label3",label:"Label 3",link:"#"}]},{id:"group2",label:"Group 2",link:"#",items:[{id:"label3",label:"Label 3",link:"#"},{id:"group3",label:"Group 3",link:"#",items:[{id:"label4",label:"Label 4",link:"#"},{id:"group4",label:"Group 4 (Empty)",link:"#",items:[]}]}]}]};const FoldersAndFiles=Template.bind({});FoldersAndFiles.args={items:[{id:"label1",label:"Label 1",link:"#",icon:"Document"},{id:"group1",label:"Group 1",link:"#",isOpen:!0,isSelected:!0,icon:"Folder",items:[{id:"label2",label:"Label 2",link:"#",icon:"Document"},{id:"label3",label:"Label 3",link:"#",icon:"Document"},{id:"label4",label:"This example has longer text. Per the guidelines, long text will truncate with an ellipsis, and the full text should be available in a tooltip.",link:"#",icon:"Document"}]},{id:"group2",label:"Group 2",link:"#",icon:"Folder",items:[{id:"label3",label:"Label 3",link:"#",icon:"Document"},{id:"group3",label:"Group 3",link:"#",icon:"Folder",items:[{id:"label4",label:"Label 4",link:"#",icon:"Document"}]}]}]};const Thumbnails=Template.bind({});Thumbnails.args={variant:"thumbnail",items:[{id:"group1",label:"Group 1",link:"#",isOpen:!0,thumbnail:{imageURL:"thumbnail.png",altText:"Woman crouching"},items:[{id:"label2",label:"Label 2",link:"#",isSelected:!0,thumbnail:{imageURL:"thumbnail.png",altText:"Woman crouching"}},{id:"label3",label:"Label 3",link:"#",thumbnail:{imageURL:"flowers.png",altText:"Flowers"}}]}]};const WithSections=Template.bind({});WithSections.args={items:[{type:"heading",label:"Section 1",items:[{id:"group1",label:"Group 1",link:"#",isOpen:!0,items:[{id:"label2",label:"Label 2",link:"#"},{id:"label3",label:"Label 3",link:"#"}]}]},{type:"heading",label:"Section 2",items:[{id:"label4",label:"Label 4",link:"#"}]}]};const WithDropTarget=Template.bind({});WithDropTarget.args={items:[{id:"label2",label:"Label 2",link:"#",isDropTarget:!0},{id:"label3",label:"Label 3",link:"#"}]};const Flat=Template.bind({});Flat.storyName="Flat Markup",Flat.args={items:[{id:"label1",label:"Label 1. This example has longer text. Per the guidelines, long text will truncate with an ellipsis, and the full text should be available in a tooltip.",link:"#",isSelected:!0},{id:"group1",label:"Group 1",link:"#",isOpen:!0,items:[]},{id:"label2",label:"Label 2",link:"#",isDisabled:!0,customClasses:["spectrum-TreeView-item--indent1"]},{id:"label3",label:"Label 3",link:"#",customClasses:["spectrum-TreeView-item--indent1"]},{id:"label4",label:"Label 4",link:"#"},{id:"group2",label:"Group 2",link:"#",isOpen:!0,items:[]},{id:"label5",label:"Label 5",link:"#",customClasses:["spectrum-TreeView-item--indent1"]},{id:"group3",label:"Group 3",link:"#",isOpen:!0,items:[],customClasses:["spectrum-TreeView-item--indent1"]},{id:"label6",label:"Label 6",link:"#",customClasses:["spectrum-TreeView-item--indent2"]}]};const __namedExportsOrder=["Default","FoldersAndFiles","Thumbnails","WithSections","WithDropTarget","Flat"]},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/opacitycheckerboard/index.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/components/opacitycheckerboard/index.css"},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/thumbnail/index.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/components/thumbnail/index.css"},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/treeview/index.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/components/treeview/index.css"},"../components/opacitycheckerboard/stories/template.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{B:()=>Template});var lit=__webpack_require__("../node_modules/lit/index.js"),class_map=__webpack_require__("../node_modules/lit/directives/class-map.js"),if_defined=__webpack_require__("../node_modules/lit/directives/if-defined.js"),style_map=__webpack_require__("../node_modules/lit/directives/style-map.js"),injectStylesIntoLinkTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js"),injectStylesIntoLinkTag_default=__webpack_require__.n(injectStylesIntoLinkTag),insertBySelector=__webpack_require__("../node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),opacitycheckerboard=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/opacitycheckerboard/index.css"),opacitycheckerboard_default=__webpack_require__.n(opacitycheckerboard),options={attributes:{"data-source":"processed"}};options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(opacitycheckerboard_default(),options);const Template=({rootClass="spectrum-OpacityCheckerboard",backgroundPosition,customClasses=[],customStyles={},id,content=[],role})=>lit.qy`
		<div
			class=${(0,class_map.H)({[rootClass]:!0,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
			style=${(0,if_defined.J)((0,style_map.W)({"--mod-opacity-checkerboard-position":backgroundPosition,...customStyles}))}
			role=${(0,if_defined.J)(role)}
			id=${(0,if_defined.J)(id)}
		>
			${content}
		</div>`},"../components/thumbnail/stories/template.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{B:()=>Template});var template=__webpack_require__("../components/opacitycheckerboard/stories/template.js"),lit=__webpack_require__("../node_modules/lit/index.js"),class_map=__webpack_require__("../node_modules/lit/directives/class-map.js"),if_defined=__webpack_require__("../node_modules/lit/directives/if-defined.js"),style_map=__webpack_require__("../node_modules/lit/directives/style-map.js"),when=__webpack_require__("../node_modules/lit-html/directives/when.js"),injectStylesIntoLinkTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js"),injectStylesIntoLinkTag_default=__webpack_require__.n(injectStylesIntoLinkTag),insertBySelector=__webpack_require__("../node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),thumbnail=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/thumbnail/index.css"),thumbnail_default=__webpack_require__.n(thumbnail),options={attributes:{"data-source":"processed"}};options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(thumbnail_default(),options);const Template=({rootClass="spectrum-Thumbnail",size="500",imageURL,svg,altText,isCover=!1,isDisabled=!1,isFocused=!1,isLayer=!1,isSelected=!1,backgroundColor,onclick,customClasses=[],customStyles={},id})=>{const image=imageURL?lit.qy`<img class="${rootClass}-image" src=${imageURL} alt=${(0,if_defined.J)(altText)}/>`:svg?lit.qy`${svg}`:"",checkerboardContent=lit.qy`
			<div class="${rootClass}-image-wrapper">
			${imageURL?lit.qy`<img
						class="${rootClass}-image"
						src=${imageURL}
						alt=${altText}
					/>`:""}
			${svg?lit.qy`${svg}`:""}
		</div>
	`;return isLayer?lit.qy`
			<div
				class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--cover`]:isCover,[`${rootClass}-layer`]:isLayer,"is-selected":isSelected,"is-disabled":isDisabled,"is-focused":isFocused,[`${rootClass}--size${size}`]:void 0!==size,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
				id=${(0,if_defined.J)(id)}
				@click=${onclick}
			>
				${(0,template.B)({componentOnly:!0,customClasses:[`${rootClass}-layer-inner`],content:checkerboardContent})}
			</div>
		`:backgroundColor?lit.qy`
			<div
				class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--cover`]:isCover,[`${rootClass}-layer`]:isLayer,"is-selected":isSelected,"is-disabled":isDisabled,"is-focused":isFocused,[`${rootClass}--size${size}`]:void 0!==size,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
				id=${(0,if_defined.J)(id)}
				@click=${onclick}
			>
				<div class="${rootClass}-background" style=${(0,style_map.W)({backgroundColor})}></div>
				<div class="${rootClass}-image-wrapper">
					${imageURL?lit.qy`<img
								class="${rootClass}-image"
								src=${imageURL}
								alt=${altText}
						  />`:""}
				</div>
			</div>
		`:lit.qy`
		<div
			class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--cover`]:isCover,[`${rootClass}-layer`]:isLayer,"is-selected":isSelected,"is-disabled":isDisabled,"is-focused":isFocused,[`${rootClass}--size${size}`]:void 0!==size,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
		style=${(0,if_defined.J)((0,style_map.W)({...customStyles}))}
		id=${(0,if_defined.J)(id)}
		@click=${onclick}
	>
			${(0,when.z)(backgroundColor,(()=>lit.qy`<div class="${rootClass}-background" style=${(0,if_defined.J)((0,style_map.W)({backgroundColor}))}></div>`))}
			${(0,template.B)({rootClass:backgroundColor?`${rootClass}-image-wrapper`:void 0,customClasses:isLayer?[`${rootClass}-layer-inner`]:backgroundColor?[]:[`${rootClass}-image-wrapper`],content:image?[image]:[]})}
		</div>
	`}},"../node_modules/lit-html/directives/when.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function n(n,r,t){return n?r(n):t?.(n)}__webpack_require__.d(__webpack_exports__,{z:()=>n})},"../node_modules/lit/directives/repeat.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{u:()=>c});var lit_html=__webpack_require__("../node_modules/lit-html/lit-html.js"),directive=__webpack_require__("../node_modules/lit-html/directive.js"),directive_helpers=__webpack_require__("../node_modules/lit-html/directive-helpers.js");const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=(0,directive.u$)(class extends directive.WL{constructor(e){if(super(e),e.type!==directive.OA.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return{values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=(0,directive_helpers.cN)(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v=[];let m,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v[k]=(0,directive_helpers.lx)(d[x],p[k]),x++,k++;else if(h[j]===a[w])v[w]=(0,directive_helpers.lx)(d[j],p[w]),j--,w--;else if(h[x]===a[w])v[w]=(0,directive_helpers.lx)(d[x],p[w]),(0,directive_helpers.Dx)(s,v[w+1],d[x]),x++,w--;else if(h[j]===a[k])v[k]=(0,directive_helpers.lx)(d[j],p[k]),(0,directive_helpers.Dx)(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=(0,directive_helpers.Dx)(s,d[x]);(0,directive_helpers.lx)(e,p[k]),v[k]=e}else v[k]=(0,directive_helpers.lx)(t,p[k]),(0,directive_helpers.Dx)(s,d[x],t),d[e]=null;k++}else(0,directive_helpers.KO)(d[j]),j--;else(0,directive_helpers.KO)(d[x]),x++;for(;k<=w;){const e=(0,directive_helpers.Dx)(s,v[w+1]);(0,directive_helpers.lx)(e,p[k]),v[k++]=e}for(;x<=j;){const e=d[x++];null!==e&&(0,directive_helpers.KO)(e)}return this.ut=a,(0,directive_helpers.mY)(s,v),lit_html.c0}})},"../node_modules/lit/directives/style-map.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{W:()=>o});var lit_html=__webpack_require__("../node_modules/lit-html/lit-html.js"),directive=__webpack_require__("../node_modules/lit-html/directive.js");const n="important",i=" !"+n,o=(0,directive.u$)(class extends directive.WL{constructor(t){if(super(t),t.type!==directive.OA.ATTRIBUTE||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e}}return lit_html.c0}})}}]);
//# sourceMappingURL=treeview-stories-treeview-stories.aa7d3104.iframe.bundle.js.map