@crombolo/backoffice-dist 0.51.1 → 0.53.2

package/dist/chunks/content-type-design-editor-tab.element-1b58pbt1.js

@@ -1,526 +0,0 @@
-import"./app.element-1fcz6x5m.js";import{Np,mR,lo,co,ed}from"./app.element-za0e8rg5.js";import"./app.element-k2q5cknn.js";import{R}from"./app.element-0rg25qzq.js";import{g}from"./app.element-mfaddkz2.js";import"./app.element-mzcgdgr3.js";import"./app.element-gf2wyrb5.js";import"./app.element-gjfbmszs.js";import"./app.element-dxszy42n.js";import"./app.element-ae0qtn7c.js";import"./app.element-t1wgdkd4.js";import"./app.element-bmybjrsv.js";import"./app.element-kqcdwj8b.js";import"./app.element-cryse3sn.js";import"./app.element-mr3eygb1.js";import"./app.element-tfxk665f.js";import{t,V}from"./app.element-kttzbwsf.js";import"./app.element-2w5fhqht.js";import"./app.element-ytjz2a4d.js";import"./app.element-cqgtdtst.js";import"./app.element-bakmanva.js";import{M}from"./app.element-fwzchjg1.js";import{i}from"./app.element-m7ak5dt7.js";import"./app.element-0g1w9h5z.js";import"./app.element-6c83ssfn.js";import{D}from"./app.element-eqm01rdg.js";import"./app.element-mndx6c4n.js";import"./app.element-52n4j0e1.js";import"./app.element-9xtz5gph.js";import"./app.element-96vtrp10.js";import{ki}from"./app.element-5g4ct877.js";import"./app.element-hm8yjhnk.js";import{H}from"./app.element-g8h8aqx6.js";import"./app.element-dqq0h7ek.js";import"./app.element-xqj3x9xj.js";import{Le}from"./app.element-qp773eqb.js";import"./app.element-7bwz3mk4.js";import"./app.element-rtzv1k4q.js";import"./app.element-w7q8ncb9.js";import"./app.element-qqff9xjj.js";import"./app.element-1zhqr2gv.js";import"./app.element-nbebgqce.js";import"./app.element-hh18y3k5.js";import"./app.element-jkra3rnr.js";import{X}from"./app.element-y1x01wy4.js";import"./app.element-sysx69zy.js";import"./app.element-79z8nf27.js";import{zE,gM,bM}from"./app.element-akrrk0va.js";import"./app.element-j9cgxz81.js";import"./app.element-rf5v4f2m.js";import{css as te,customElement as re,html as E,nothing as ie,property as oe,repeat as ne,state as S}from"@umbraco-cms/backoffice/external/lit";import{css as L,customElement as j,html as U,ifDefined as W,property as q,repeat as F,state as C,when as G}from"@umbraco-cms/backoffice/external/lit";class O extends g{#i;#r;constructor(a){super(a,mR);this.#i=new R(void 0),this.alias=this.#i.asObservable(),this.#r=new R(void 0),this.label=this.#r.asObservable()}setAlias(a){this.#i.setValue(a)}getAlias(){return this.#i.getValue()}setLabel(a){this.#r.setValue(a)}getLabel(){return this.#r.getValue()}destroy(){super.destroy(),this.#i.destroy(),this.#r.destroy()}}import{css as k,html as d,customElement as N,property as _,state as x,nothing as y}from"@umbraco-cms/backoffice/external/lit";var h=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,u;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(a,e,r,o);else for(var p=a.length-1;p>=0;p--)if(u=a[p])s=(n<3?u(s):n>3?u(e,r,s):u(e,r))||s;return n>3&&s&&Object.defineProperty(e,r,s),s},l=class extends t{constructor(){super(...arguments);this.#i=new O(this),this.#r=new ki(this),this.sortModeActive=!1,this.#u=(e)=>this.#o({sortOrder:parseInt(e.target.value)??0})}#i;#r;#t;set propertyStructureHelper(e){if(e===this._propertyStructureHelper)return;this._propertyStructureHelper=e,this.#e()}get propertyStructureHelper(){return this._propertyStructureHelper}get property(){return this._property}set property(e){let r=this._property;if(e===r)return;this._property=e,this.#i.setAlias(e?.alias),this.#i.setLabel(e?.name),this.#e(),this.#s(this._property?.dataType?.unique),this.requestUpdate("property",r)}async#e(){if(this._propertyStructureHelper&&this._property)this.observe(await this._propertyStructureHelper.contentTypeOfProperty(this._property.unique),(e)=>{this._inherited=this._propertyStructureHelper?.getStructureManager()?.getOwnerContentTypeUnique()!==e?.unique,this._inheritedContentTypeId=e?.unique,this._inheritedContentTypeName=e?.name},"observeIsOwnerProperty")}#o(e){if(!this._property||!this._propertyStructureHelper)return;this._propertyStructureHelper.partialUpdateProperty(this._property.unique,e)}#n(e,r){if(!this._property||!this._propertyStructureHelper)return;let o={};o[e]=r===null?void 0:r,this._propertyStructureHelper.partialUpdateProperty(this._property.unique,o)}async#s(e){if(!e){this._dataTypeName=void 0,this.#t=void 0;return}if(e===this.#t)return;this.#t=e,this.#r.requestByUnique(e).then((r)=>this._dataTypeName=r?.data?.name)}async#a(e){if(e.preventDefault(),e.stopImmediatePropagation(),!this._property||!this._property.unique)return;let r=this._property.unique;await D(this,{headline:`${this.localize.term("actions_delete")} property`,content:d`<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[this._property.name??r]}>Are you sure you want to delete the property <strong>${this._property.name??r}</strong></umb-localize></div>`,confirmLabel:"#actions_delete",color:"danger"}),this._propertyStructureHelper?.removeProperty(r)}#h(e){this.#o({name:e.target.value,alias:e.target.alias})}render(){return this._inherited?this.#c():this.#y()}#c(){if(!this.property)return;if(this.sortModeActive)return this.#p();else return d`
-				<div id="header">
-					<p>${this.localize.string(this.property.name)}<i>${this.property.alias}</i></p>
-					<p>${this.property.description??""}</p>
-				</div>
-				<div id="editor">
-					${this.#d()} ${this.#l()}
-					${this._inherited?d`<uui-tag look="default" class="inherited">
-								<uui-icon name="icon-merge"></uui-icon>
-								<span
-									>${this.localize.term("contentTypeEditor_inheritedFrom")}
-									<a href=${this.editContentTypePath+"edit/"+this._inheritedContentTypeId}>
-										${this._inheritedContentTypeName??"??"}
-									</a>
-								</span>
-							</uui-tag>`:y}
-				</div>
-			`}#y(){if(!this.property||!this.editPropertyTypePath)return;if(this.sortModeActive)return this.#p();else return d`
-				<div id="header">
-					<umb-input-with-alias
-						name="propertyTypeName"
-						id="name-alias-input"
-						required
-						.placeholder=${this.localize.term("placeholders_label")}
-						.label=${this.localize.term("placeholders_label")}
-						.aliasLabel=${this.localize.term("placeholders_enterAlias")}
-						.value=${this.property.name}
-						.alias=${this.property.alias}
-						@change=${this.#h}
-						${Le(this)}></umb-input-with-alias>
-					<umb-form-validation-message for="name-alias-input"></umb-form-validation-message>
-
-					<slot name="action-menu"></slot>
-					<p>
-						<uui-textarea
-							data-mark="input:description"
-							id="description-input"
-							.label=${this.localize.term("general_description")}
-							.placeholder=${this.localize.term("placeholders_enterDescription")}
-							.value=${this.property.description??""}
-							@input=${(e)=>{if(e.target)this.#n("description",e.target.value)}}
-							auto-height></uui-textarea>
-					</p>
-				</div>
-				<uui-button
-					id="editor"
-					look="outline"
-					label=${this.localize.term("contentTypeEditor_editorSettings")}
-					data-mark="action:editor-settings"
-					href=${this.editPropertyTypePath+bM.generateLocal({unique:this.property.unique})}>
-					${this.#d()} ${this.#l()}
-					<uui-action-bar>
-						<uui-button
-							label="${this.localize.term("actions_delete")}"
-							data-mark="action:delete"
-							@click="${this.#a}">
-							<uui-icon name="delete"></uui-icon>
-						</uui-button>
-					</uui-action-bar>
-				</uui-button>
-			`}#u;#p(){if(!this.property)return;return d`
-			<div class="sortable">
-				<uui-icon name="icon-grip"></uui-icon>
-				<span>${this.property.name}</span>
-				<span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
-			</div>
-			<uui-input
-				type="number"
-				?disabled=${this._inherited}
-				label="sort order"
-				data-mark="input:sort-order"
-				@change=${this.#u}
-				.value=${(this.property.sortOrder??0).toString()}></uui-input>
-		`}#d(){return this.property?.dataType?.unique?d`<div id="editor-name">${this._dataTypeName}</div>`:y}#l(){return this.property?d`<div class="types">
-					${this.#m()}
-					${this.property.appearance?.labelOnTop==!0?d`<uui-tag look="default">
-								<uui-icon name="icon-stretch-horizontal"></uui-icon>
-								<span>${this.localize.term("contentTypeEditor_displaySettingsLabelOnTop")}</span>
-							</uui-tag>`:y}
-					${this.property.validation.mandatory===!0?d`<uui-tag look="default">
-								<span>* ${this.localize.term("general_mandatory")}</span>
-							</uui-tag>`:y}
-					${this.property.visibility?.memberCanView===!0?d`<uui-tag look="default">
-								<uui-icon name="icon-eye"></uui-icon> ${this.localize.term("contentTypeEditor_showOnMemberProfile")}
-							</uui-tag>`:y}
-					${this.property.visibility?.memberCanEdit===!0?d`<uui-tag look="default">
-								<uui-icon name="icon-edit"></uui-icon> ${this.localize.term("contentTypeEditor_memberCanEdit")}
-							</uui-tag>`:y}
-					${this.property.isSensitive===!0?d`<uui-tag look="default">
-								<uui-icon name="icon-lock"></uui-icon> ${this.localize.term("contentTypeEditor_isSensitiveData")}
-							</uui-tag>`:y}
-				</div>`:y}#m(){if(!this.property)return y;if(this.ownerVariesByCulture&&this.ownerVariesBySegment&&!this.property.variesByCulture&&!this.property.variesBySegment)return d`
-				<uui-tag look="default">
-					<uui-icon name="icon-trending-up-down"></uui-icon> ${this.localize.term("contentTypeEditor_cultureAndVariantInvariantLabel")}
-				</uui-tag>
-			`;if(this.ownerVariesByCulture&&!this.property.variesByCulture)return d`<uui-tag look="default">
-				<uui-icon name="icon-trending-up-down"></uui-icon> ${this.localize.term("contentTypeEditor_cultureInvariantLabel")}
-			</uui-tag>`;if(this.ownerVariesBySegment&&!this.property.variesBySegment)return d`<uui-tag look="default">
-				<uui-icon name="icon-trending-up-down"></uui-icon> ${this.localize.term("contentTypeEditor_segmentInvariantLabel")}
-			</uui-tag>`;return y}static{this.styles=[i,k`
-			:host {
-				display: block;
-				border-bottom: 1px solid var(--uui-color-divider);
-				padding: var(--uui-size-layout-1) 0;
-			}
-			:host(:not([sort-mode-active])) {
-				display: grid;
-				grid-template-columns: 320px auto;
-				column-gap: var(--uui-size-space-5);
-				container-type: inline-size;
-			}
-
-			:host > * {
-				grid-column: span 2;
-			}
-
-			@container (width > 700px) {
-				:host(:not([orientation='vertical'])) > * {
-					grid-column: span 1;
-				}
-				#header {
-					position: sticky;
-					top: var(--uui-size-space-4);
-					height: min-content;
-				}
-			}
-
-			:host(:first-of-type) {
-				padding-top: 0;
-			}
-			:host(:last-of-type) {
-				border-bottom: none;
-			}
-
-			:host([sort-mode-active]) {
-				position: relative;
-				display: flex;
-				padding: 0;
-			}
-
-			:host([sort-mode-active]:not([_inherited])) {
-				cursor: grab;
-			}
-			:host([sort-mode-active][_inherited]) {
-				cursor: not-allowed;
-			}
-
-			:host([sort-mode-active]) .sortable {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				padding: 0 var(--uui-size-3);
-				gap: var(--uui-size-3);
-			}
-			:host([sort-mode-active][_inherited]) .sortable {
-				color: var(--uui-color-disabled-contrast);
-			}
-
-			:host([sort-mode-active]) uui-input {
-				max-width: 75px;
-			}
-
-			/* Placeholder style, used when property is being dragged.*/
-			:host(.--umb-sorter-placeholder) > * {
-				visibility: hidden;
-			}
-
-			:host(.--umb-sorter-placeholder)::after {
-				content: '';
-				inset: 0;
-				position: absolute;
-				border: 1px dashed var(--uui-color-divider-emphasis);
-				border-radius: var(--uui-border-radius);
-			}
-
-			:host([_inherited]) {
-				#header {
-					padding: 0 var(--uui-size-3, 9px);
-				}
-			}
-
-			p {
-				margin-top: 0;
-				margin-bottom: 0;
-			}
-
-			#header i {
-				opacity: 0.55;
-				float: right;
-			}
-
-			#header umb-input-with-alias {
-				--uui-input-border-color: transparent;
-			}
-			#header umb-input-with-alias,
-			#header uui-textarea {
-				width: 100%;
-			}
-
-			#description-input:not(:hover):not(:focus) {
-				--uui-textarea-border-color: transparent;
-			}
-
-			#editor {
-				position: relative;
-				min-height: 80px;
-				--uui-button-background-color: var(--uui-color-background);
-				--uui-button-background-color-hover: var(--uui-color-background);
-			}
-			#editor:not(uui-button) {
-				background-color: var(--uui-color-background);
-				border-radius: var(--uui-button-border-radius, var(--uui-border-radius, 3px));
-				min-height: 92px;
-			}
-			#editor uui-action-bar {
-				--uui-button-background-color: var(--uui-color-surface);
-				--uui-button-background-color-hover: var(--uui-color-surface);
-			}
-			#editor-name {
-				position: absolute;
-				top: var(--uui-size-space-3);
-				left: var(--uui-size-space-4);
-				font-size: var(--uui-type-small-size);
-				font-weight: 400;
-			}
-
-			.types > div uui-icon,
-			.inherited uui-icon {
-				vertical-align: sub;
-				margin-right: var(--uui-size-space-1);
-			}
-
-			.inherited {
-				position: absolute;
-				top: var(--uui-size-space-2);
-				right: var(--uui-size-space-2);
-			}
-
-			.types {
-				position: absolute;
-				bottom: var(--uui-size-space-2);
-				left: var(--uui-size-space-2);
-				display: flex;
-				flex-flow: wrap;
-				gap: var(--uui-size-space-2);
-			}
-
-			#editor uui-action-bar {
-				position: absolute;
-				top: var(--uui-size-space-2);
-				right: var(--uui-size-space-2);
-				opacity: 0;
-			}
-
-			#editor:hover uui-action-bar,
-			#editor:focus uui-action-bar,
-			#editor:focus-within uui-action-bar {
-				opacity: 1;
-			}
-
-			a {
-				color: inherit;
-			}
-
-			:host([drag-placeholder]) {
-				opacity: 0.5;
-			}
-			:host([drag-placeholder]) uui-input {
-				visibility: hidden;
-			}
-		`]}};h([_({attribute:!1})],l.prototype,"propertyStructureHelper",null);h([_({type:Object})],l.prototype,"property",null);h([_({type:Boolean,reflect:!0,attribute:"sort-mode-active"})],l.prototype,"sortModeActive",void 0);h([_({attribute:!1})],l.prototype,"editContentTypePath",void 0);h([_({attribute:!1})],l.prototype,"ownerVariesByCulture",void 0);h([_({attribute:!1})],l.prototype,"ownerVariesBySegment",void 0);h([_({type:Boolean,reflect:!0,attribute:"_inherited"})],l.prototype,"_inherited",void 0);h([x()],l.prototype,"_inheritedContentTypeId",void 0);h([x()],l.prototype,"_inheritedContentTypeName",void 0);h([_({type:String,reflect:!1})],l.prototype,"editPropertyTypePath",void 0);h([x()],l.prototype,"_dataTypeName",void 0);l=h([N("umb-content-type-design-editor-property")],l);var m=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,u;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(a,e,r,o);else for(var p=a.length-1;p>=0;p--)if(u=a[p])s=(n<3?u(s):n>3?u(e,r,s):u(e,r))||s;return n>3&&s&&Object.defineProperty(e,r,s),s},Y={getUniqueOfElement:(a)=>a.getAttribute("data-umb-property-id"),getUniqueOfModel:(a)=>a.unique,identifier:"content-type-property-sorter",itemSelector:"umb-content-type-design-editor-property",disabledItemSelector:"[_inherited]",containerSelector:"#property-list"},c=class extends t{#i;get containerId(){return this._containerId}set containerId(e){if(e===this._containerId)return;this._containerId=e,this.#a(),this.#e.setContainerId(e),this.#r?.setUniquePathValue("container-id",e===null?"root":e),this.#t?.setUniquePathValue("container-id",e===null?"root":e)}#r;#t;#e;#o;#n;#s;constructor(){super();this.#i=new X(this,{...Y,onChange:({model:e})=>{this._properties=e},onContainerChange:async({item:e})=>{if(this._containerId===void 0)throw Error("ContainerId is not set");if(this._ownerContentTypeUnique===void 0)throw Error("OwnerContentTypeUnique is not set");let r=this._containerId;if(this._containerId!==null)r=(await this.#e.getStructureManager()?.ensureContainerOf(this._containerId,this._ownerContentTypeUnique))?.id||this._containerId;this.#e.partialUpdateProperty(e.unique,{container:r?{id:r}:null})},onEnd:({item:e})=>{if(this._containerId===void 0)throw Error("ContainerId is not set.");let r=this._properties,o=r.findIndex((p)=>p.unique===e.unique);if(o===-1)return;let n=-1;if(o>0&&r.length>0)n=r[o-1].sortOrder;this.#e.partialUpdateProperty(e.unique,{sortOrder:++n});let s=o+1,u;while((u=r[s])!==void 0&&u.sortOrder<=n)this.#e.partialUpdateProperty(u.unique,{sortOrder:++n}),s++},onRequestDrop:async({unique:e})=>{let r=await this.getContext(lo);if(!r)throw Error("Could not get Workspace Context");return r.structure.getOwnerPropertyById(e)},requestExternalRemove:async({item:e})=>{let r=await this.getContext(lo);if(!r)throw Error("Could not get Workspace Context");return await r.structure.removeProperty(null,e.unique).then(()=>!0,()=>!1)},requestExternalInsert:async({item:e})=>{let r=await this.getContext(lo);if(!r)throw Error("Could not get Workspace Context");let o=this._containerId?{id:this._containerId}:null,n={...e,parent:o};return await r.structure.insertProperty(null,n).then(()=>!0,()=>!1)}}),this.#e=new ed(this),this.#s=new Promise((e,r)=>{this.#o=e,this.#n=r}),this._properties=[],this.consumeContext(Np,(e)=>{this.observe(e?.isSorting,(r)=>{this._sortModeActive=r},"_observeIsSorting")}),this.consumeContext(lo,async(e)=>{if(e)this.#e.setStructureManager(e.structure);this._ownerContentTypeUnique=e?.structure.getOwnerContentTypeUnique(),this.#a();let r=this.observe(e?.variesByCulture,(n)=>{this._ownerContentTypeVariesByCulture=n},"observeOwnerVariesByCulture")?.asPromise(),o=this.observe(e?.variesBySegment,(n)=>{this._ownerContentTypeVariesBySegment=n},"observeOwnerVariesBySegment")?.asPromise();if(r&&o&&this.#o)Promise.all([r,o]).then(()=>{this.#o?.(),this.#o=void 0,this.#n=void 0}).catch(()=>{})}),this.observe(this.#e.propertyStructure,(e)=>{this._properties=e,this.#i.setModel(this._properties)},null)}disconnectedCallback(){super.disconnectedCallback(),this.#n?.(Error("Component disconnected"))}async#a(){if(await this.#s,!this._ownerContentTypeUnique||this._containerId===void 0)return;if(this.#r?.destroy(),this.#r=new M(this,zE,"addPropertyModal").addUniquePaths(["container-id"]).addAdditionalPath("add-property/:sortOrder").onSetup(async(e)=>{if(!this._ownerContentTypeUnique||this._containerId===void 0)return!1;let r={};if(e.sortOrder!==void 0){let o=parseInt(e.sortOrder);if(o===-1)o=Math.max(...this._properties.map((n)=>n.sortOrder),-1)+1;r.sortOrder=o}if(this._ownerContentTypeVariesByCulture)r.variesByCulture=!0;if(this._ownerContentTypeVariesBySegment)r.variesBySegment=!0;return{data:{contentTypeUnique:this._ownerContentTypeUnique,preset:r}}}).observeRouteBuilder((e)=>{this._newPropertyPath=e({sortOrder:"-1"})+gM.generateLocal({containerUnique:this._containerId})}),this._containerId!==void 0)this.#r?.setUniquePathValue("container-id",this._containerId===null?"root":this._containerId);if(this.#t?.destroy(),this.#t=new M(this,zE,"editPropertyModal").addUniquePaths(["container-id"]).addAdditionalPath("edit-property").onSetup(async()=>{if(!this._ownerContentTypeUnique||this._containerId===void 0)return!1;return{data:{contentTypeUnique:this._ownerContentTypeUnique,preset:void 0}}}).observeRouteBuilder((e)=>{this._editPropertyTypePath=e(null)}),this._containerId!==void 0)this.#t?.setUniquePathValue("container-id",this._containerId===null?"root":this._containerId)}render(){return this._ownerContentTypeUnique?U`
-					<div id="property-list" ?sort-mode-active=${this._sortModeActive}>
-						${F(this._properties,(e)=>e.unique,(e)=>U`
-									<umb-content-type-design-editor-property
-										data-umb-property-id=${e.unique}
-										data-mark="property-type:${e.name}"
-										.editContentTypePath=${this.editContentTypePath}
-										.editPropertyTypePath=${this._editPropertyTypePath}
-										?sort-mode-active=${this._sortModeActive}
-										.propertyStructureHelper=${this.#e}
-										.property=${e}
-										.ownerVariesByCulture=${this._ownerContentTypeVariesByCulture}
-										.ownerVariesBySegment=${this._ownerContentTypeVariesBySegment}>
-									</umb-content-type-design-editor-property>
-								`)}
-					</div>
-
-					${G(!this._sortModeActive,()=>U`
-							<uui-button
-								id="btn-add"
-								href=${W(this._newPropertyPath)}
-								label=${this.localize.term("contentTypeEditor_addProperty")}
-								look="placeholder"></uui-button>
-						`)}
-				`:""}static{this.styles=[i,L`
-			:host {
-				display: block;
-			}
-
-			#property-list {
-				/* enables dropping things into this despite it begin empty. */
-				margin-top: -20px;
-				padding-top: 20px;
-			}
-
-			#btn-add {
-				width: 100%;
-				--uui-button-height: var(--uui-size-14);
-			}
-
-			#property-list[sort-mode-active]:not(:has(umb-content-type-design-editor-property)) {
-				/* Some height so that the sorter can target the area if the group is empty*/
-				min-height: var(--uui-size-layout-1);
-			}
-		`]}};m([q({type:String,attribute:"container-id",reflect:!1})],c.prototype,"containerId",null);m([q({attribute:!1})],c.prototype,"editContentTypePath",void 0);m([C()],c.prototype,"_properties",void 0);m([C()],c.prototype,"_ownerContentTypeUnique",void 0);m([C()],c.prototype,"_ownerContentTypeVariesByCulture",void 0);m([C()],c.prototype,"_ownerContentTypeVariesBySegment",void 0);m([C()],c.prototype,"_newPropertyPath",void 0);m([C()],c.prototype,"_editPropertyTypePath",void 0);m([C()],c.prototype,"_sortModeActive",void 0);c=m([j("umb-content-type-design-editor-properties")],c);import{css as K,customElement as J,html as v,nothing as z,property as T,repeat as Q,state as B,when as I}from"@umbraco-cms/backoffice/external/lit";import{UUIBlinkAnimationValue as Z,UUIBlinkKeyframes as ee}from"@umbraco-cms/backoffice/external/uui";var b=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,u;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(a,e,r,o);else for(var p=a.length-1;p>=0;p--)if(u=a[p])s=(n<3?u(s):n>3?u(e,r,s):u(e,r))||s;return n>3&&s&&Object.defineProperty(e,r,s),s},f=class extends t{constructor(){super(...arguments);this.sortModeActive=!1}set group(e){if(e===this._group)return;this._group=e,this._groupId=e?.ownerId??e?.ids[0],this.#i()}get group(){return this._group}set groupStructureHelper(e){if(e===this._groupStructureHelper)return;this._groupStructureHelper=e,this.#i()}get groupStructureHelper(){return this._groupStructureHelper}#i(){if(this.groupStructureHelper&&this.group){if(this.group.ownerId)this._hasOwnerContainer=!0;let e=this.group.ids.filter((r)=>r!==this.group.ownerId);if(e.length>0)this._inheritedFrom=e.map((r)=>this.groupStructureHelper.getContentTypeOfContainer(r)).filter((r)=>r!==void 0),this._inherited=!0;else this._inheritedFrom=void 0,this._inherited=!1}}#r(e,r){if(!this._groupStructureHelper||!this._group)return;let o=this._group.ownerId;if(!o)return;let n={};n[e]=r,this._groupStructureHelper.partialUpdateContainer(o,n)}#t(e){if(!this.groupStructureHelper||!this._group)return;let r=this._group.ownerId;if(!r)return;let o=e.target.value,n=this.groupStructureHelper.getStructureManager().makeContainerNameUniqueForOwnerContentType(r,o);if(n)o=n;this.#r("name",o),e.target.value=o}#e(e){if(!this.groupStructureHelper||!this._group)return;let r=this._group.ownerId;if(!r)return;if(e.target.value===""){let n=this.groupStructureHelper.getStructureManager().makeEmptyContainerName(r);this.#r("name",n),e.target.value=n}}async#o(e){if(e.preventDefault(),e.stopImmediatePropagation(),!this.groupStructureHelper||!this._group)return;if(this._group.ownerId===void 0)return;await D(this,{headline:`${this.localize.term("actions_delete")} group`,content:v`<umb-localize key="contentTypeEditor_confirmDeleteGroupMessage" .args=${[this._group.name??this._group.ownerId]}>
-					Are you sure you want to delete the group <strong>${this._group.name??this._group.ownerId}</strong>
-				</umb-localize>
-				</div>`,confirmLabel:"#actions_delete",color:"danger"}),this.groupStructureHelper.removeContainer(this._group.ownerId)}render(){if(this._inherited===void 0||!this._groupId)return z;return v`
-			<uui-box>
-				${this.#n()}
-				<umb-content-type-design-editor-properties
-					.editContentTypePath=${this.editContentTypePath}
-					.containerId=${this._groupId}></umb-content-type-design-editor-properties>
-			</uui-box>
-		`}#n(){return v`
-			<div slot="header" class="drag-handle">
-				<div>
-					${I(this.sortModeActive&&this._hasOwnerContainer,()=>v`<uui-icon name="icon-grip"></uui-icon>`)}
-					<uui-input
-						id="group-name"
-						label=${this.localize.term("contentTypeEditor_group")}
-						data-mark="input:group-name"
-						placeholder=${this.localize.term("placeholders_entername")}
-						.value=${this._group.name}
-						?disabled=${!this._hasOwnerContainer}
-						@blur=${this.#e}
-						@change=${this.#t}
-						${this._group.name===""?V():z}
-						auto-width></uui-input>
-				</div>
-			</div>
-			<div slot="header-actions">
-				${I(this._hasOwnerContainer===!1&&this._inheritedFrom&&this._inheritedFrom.length>0,()=>v`
-						<uui-tag look="default" class="inherited">
-							<uui-icon name="icon-merge"></uui-icon>
-							<span
-								>${this.localize.term("contentTypeEditor_inheritedFrom")}
-								${Q(this._inheritedFrom,(e)=>e.unique,(e)=>v`
-										<a href=${this.editContentTypePath+"edit/"+e.unique}>${e.name}</a>
-									`)}
-							</span>
-						</uui-tag>
-					`)}
-				${I(!this._inherited&&!this.sortModeActive,()=>v`
-						<uui-button compact label=${this.localize.term("actions_delete")} @click=${this.#o}>
-							<uui-icon name="delete"></uui-icon>
-						</uui-button>
-					`)}
-				${I(this.sortModeActive,()=>v`
-						<uui-input
-							type="number"
-							label=${this.localize.term("sort_sortOrder")}
-							data-mark="input:sort-order"
-							.value=${this.group.sortOrder.toString()}
-							?disabled=${!this._hasOwnerContainer}
-							@change=${(e)=>this.#r("sortOrder",parseInt(e.target.value)??0)}></uui-input>
-					`)}
-			</div>
-		`}static{this.styles=[i,ee,K`
-			:host {
-				position: relative;
-			}
-
-			:host([drag-placeholder]) {
-				opacity: 0.5;
-			}
-
-			:host::before,
-			:host::after {
-				content: '';
-				position: absolute;
-				pointer-events: none;
-				inset: 0;
-				border-radius: var(--uui-border-radius);
-				opacity: 0;
-				transition:
-					opacity 60ms linear 1ms,
-					border-color,
-					10ms;
-			}
-
-			:host::after {
-				display: block;
-				z-index: 1;
-				border: 2px solid transparent;
-			}
-
-			:host([drag-placeholder])::after {
-				opacity: 1;
-				border-color: var(--uui-color-interactive-emphasis);
-				animation: ${Z};
-			}
-			:host([drag-placeholder])::before {
-				background-color: var(--uui-color-interactive-emphasis);
-				opacity: 0.12;
-			}
-
-			:host([drag-placeholder]) uui-box {
-				--uui-box-default-padding: 0;
-			}
-			:host([drag-placeholder]) div[slot='header'],
-			:host([drag-placeholder]) div[slot='header-actions'] {
-				transition: opacity 60ms linear 1ms;
-				opacity: 0;
-			}
-			:host([drag-placeholder]) umb-content-type-design-editor-properties {
-				visibility: hidden;
-				display: none;
-			}
-
-			uui-box {
-				--uui-box-header-padding: 0;
-			}
-
-			div[slot='header'] {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding: var(--uui-size-space-4) var(--uui-size-space-5);
-			}
-
-			:host([has-owner-container]) div[slot='header'] {
-				cursor: grab;
-			}
-
-			div[slot='header'] > div {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-3);
-				width: 100%;
-			}
-
-			#group-name {
-				--uui-input-border-color: transparent;
-				min-width: 200px;
-			}
-
-			uui-input[type='number'] {
-				max-width: 75px;
-			}
-
-			.inherited uui-icon {
-				vertical-align: sub;
-			}
-
-			div[slot='header-actions'] {
-				padding: var(--uui-size-space-4) var(--uui-size-space-5);
-			}
-		`]}};b([T({attribute:!1})],f.prototype,"group",null);b([T({attribute:!1})],f.prototype,"groupStructureHelper",null);b([T({type:Boolean,attribute:"sort-mode-active",reflect:!0})],f.prototype,"sortModeActive",void 0);b([T({attribute:!1})],f.prototype,"editContentTypePath",void 0);b([B()],f.prototype,"_groupId",void 0);b([T({type:Boolean,reflect:!0,attribute:"has-owner-container"})],f.prototype,"_hasOwnerContainer",void 0);b([T({type:Boolean,reflect:!0,attribute:"inherited"})],f.prototype,"_inherited",void 0);b([B()],f.prototype,"_inheritedFrom",void 0);f=b([J("umb-content-type-design-editor-group")],f);var P=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,u;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(a,e,r,o);else for(var p=a.length-1;p>=0;p--)if(u=a[p])s=(n<3?u(s):n>3?u(e,r,s):u(e,r))||s;return n>3&&s&&Object.defineProperty(e,r,s),s},se={getUniqueOfElement:(a)=>a.group?.ownerId??a.group?.ids[0],getUniqueOfModel:(a)=>a.ownerId??a.ids[0],identifier:"content-type-container-sorter",itemSelector:"umb-content-type-design-editor-group",handleSelector:".drag-handle",disabledItemSelector:":not([has-owner-container])",containerSelector:".container-list"},w=class extends t{#i;#r;#t;get containerId(){return this.#t}set containerId(e){let r=this.#t;if(e===this.#t)return;this.#t=e,this.#e.setContainerId(e),this.requestUpdate("containerId",r)}#e;#o;constructor(){super();this.#i=new X(this,{...se,onChange:({model:e})=>{this._groups=e},onContainerChange:async({item:e})=>{if(this.#t===void 0)throw Error("ContainerId is not set");if(e.ownerId===void 0)throw Error("OwnerId is not set for the given container, we cannot move containers that are not owned by the current Document.");let r=this.#t;if(r!==null){let o=this.#e.getStructureManager();if(!o)throw Error("Could not get Structure Manager from Structure Helper");r=(await o.ensureContainerOf(r,o.getOwnerContentType().unique))?.id||null}this.#e.partialUpdateContainer(e.ownerId,{parent:r?{id:r}:null})},onEnd:({item:e})=>{if(e.ownerId===void 0)throw Error("OwnerId is not set for the given container, we cannot move containers that are not owned by the current Document.");let r=this._groups,o=r.findIndex((A)=>A.ownerId===e.ownerId);if(o===-1)return;let n=-1;if(o>0&&r.length>0)n=r[o-1].sortOrder;let s=e.ownerId;if(s===void 0)throw Error("OwnerId is not set for the given container, we cannot move containers that are not owned by the current Document.");this.#e.partialUpdateContainer(s,{sortOrder:++n});let u=o+1,p;while((p=r[u])!==void 0&&p.sortOrder<=n){if(p.ownerId)this.#e.partialUpdateContainer(p.ownerId,{sortOrder:++n});u++}},onRequestDrop:async({unique:e})=>{let r=this.#o;if(!r)throw Error("Could not get Workspace Context");return r.structure.getMergedContainerById(e)},requestExternalRemove:async({item:e})=>{let r=this.#o;if(!r)throw Error("Could not get Workspace Context");return await r.structure.removeContainer(null,e.ownerId,{preventRemovingProperties:!0}).then(()=>!0,()=>!1)},requestExternalInsert:async({item:e})=>{let r=this.#o;if(!r)throw Error("Could not get Workspace Context");if(e.ownerId===void 0)throw Error("OwnerId is not set, we cannot move containers that are not owned by the current Document.");let o=this.#t?{id:this.#t}:null,n={id:e.ownerId,name:e.name,sortOrder:e.sortOrder,type:e.type,parent:o};return await r.structure.insertContainer(null,n).then(()=>!0,()=>!1)}}),this._groups=[],this._hasProperties=!1,this.#e=new co(this),this.#n=()=>{let e=this._groups.length,r=e===0?0:this._groups[e-1].sortOrder+1;this.#e.addContainer(this.#t,r)},this.consumeContext(lo,(e)=>{this.#o=e,this.#e.setStructureManager(e?.structure);let r=e?.getEntityType();this.#r?.destroy(),this.#r=new M(this,H).addAdditionalPath(r??"unknown").onSetup(async()=>({data:{entityType:r,preset:{}}})).observeRouteBuilder((o)=>{this._editContentTypePath=o({})})}),this.consumeContext(Np,(e)=>{this.observe(e?.isSorting,(r)=>{this._sortModeActive=r},"_observeIsSorting")}),this.observe(this.#e.childContainers,(e)=>{this._groups=e,this.#i.setModel(this._groups)},null),this.observe(this.#e.hasProperties,(e)=>{this._hasProperties=e,this.requestUpdate("_hasProperties")},null)}#n;render(){return E`
-			${this.#t!==void 0?E`
-							<uui-box class="${this._hasProperties?"":"opaque"}">
-								<umb-content-type-design-editor-properties
-									.containerId=${this.containerId}
-									.editContentTypePath=${this._editContentTypePath}></umb-content-type-design-editor-properties>
-							</uui-box>
-						`:ie}
-
-				<div class="container-list" ?sort-mode-active=${this._sortModeActive}>
-					${ne(this._groups,(e)=>e.ids[0],(e)=>E`
-							<umb-content-type-design-editor-group
-								?sort-mode-active=${this._sortModeActive}
-								.editContentTypePath=${this._editContentTypePath}
-								.group=${e}
-								.groupStructureHelper=${this.#e}
-								data-umb-group-id=${e.ownerId??e.ids[0]}
-								data-mark="group:${e.name}">
-							</umb-content-type-design-editor-group>
-						`)}
-				</div>
-				${this.#s()}
-			</div>
-		`}#s(){if(this._sortModeActive)return;return E`
-			<uui-button
-				id="btn-add"
-				label=${this.localize.term("contentTypeEditor_addGroup")}
-				data-mark="action:add-group"
-				look="placeholder"
-				@click=${this.#n}></uui-button>
-		`}static{this.styles=[te`
-			#btn-add {
-				width: 100%;
-				--uui-button-height: var(--uui-size-24);
-			}
-
-			uui-box,
-			umb-content-type-design-editor-group {
-				margin-bottom: var(--uui-size-layout-1);
-			}
-			uui-box.opaque {
-				background-color: transparent;
-				border-color: transparent;
-				--uui-box-default-padding: 0;
-			}
-
-			.container-list {
-				display: grid;
-				gap: 10px;
-				align-content: start;
-			}
-
-			/* Ensure the container-list has some height when its empty so groups can be dropped into it.*/
-			.container-list {
-				margin-top: calc(var(--uui-size-layout-1) * -1);
-				padding-top: var(--uui-size-layout-1);
-			}
-
-			.container-list #convert-to-tab {
-				margin-bottom: var(--uui-size-layout-1);
-				display: flex;
-			}
-
-			.container-list[sort-mode-active] {
-				min-height: 100px;
-			}
-		`]}};P([oe({type:String})],w.prototype,"containerId",null);P([S()],w.prototype,"_groups",void 0);P([S()],w.prototype,"_hasProperties",void 0);P([S()],w.prototype,"_sortModeActive",void 0);P([S()],w.prototype,"_editContentTypePath",void 0);w=P([re("umb-content-type-design-editor-tab")],w);var Xe=w;export{w as UmbContentTypeDesignEditorTabElement,Xe as default};