urnovl-web-components 0.0.261 → 0.0.263

package/dist/collection/components/ur-user/ur-user.css

@@ -18,6 +18,7 @@
     box-sizing: content-box;
     container-type: inline-size;
     container-name: user;
+    height: 100%;
 }
 
 :host .user {
@@ -25,7 +26,9 @@
     width: var(--user-width);
     border-radius: var(--user-border-radius);
     cursor: pointer;
-    display: block;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     text-decoration: none;
     color: inherit;
 }
@@ -68,6 +71,7 @@
     padding: 8px;
     row-gap: 8px;
     box-sizing: border-box;
+    flex-grow: 1;
 }
 
 :host .info:has(.loading) {
@@ -137,9 +141,18 @@
 
 :host .user .actions {
     padding-top: 10px;
+    margin-top: auto;
+}
+
+:host .user .actions.loading {
+    margin-top: auto;
+    margin-bottom: 12px;
 }
 
 :host .info .actions.loading {
+    height: 38px;
+    border-radius: 8px;
+    padding: 0;
     animation-duration: 1.7s;
     animation-fill-mode: forwards;
     animation-iteration-count: infinite;

package/dist/collection/components/ur-user-carousel/ur-user-carousel.css

@@ -12,8 +12,18 @@
     position: relative;
 }
 
+:host swiper-container::part(wrapper) {
+    align-items: stretch;
+}
+
 :host swiper-slide {
     width: var(--swiper-slide-width);
+    height: auto;
+    display: flex;
+}
+
+:host swiper-slide ur-user {
+    flex: 1;
 }
 
 :host ur-button-arrow-left,

package/dist/collection/components/ur-user-carousel/ur-user-carousel.js

@@ -62,7 +62,7 @@ export class UrUserCarousel {
         this.observer.disconnect();
     }
     render() {
-        return (h(Host, { key: 'a7e9d4b27d165d42b0848536c7f082202ab66232' }, h("div", { key: 'e834334118380640d0970bf6fbf70d2168d2cb85', class: "carousel" }, this.navigation && (h("ur-button-arrow-left", { key: 'cdb26094f195f3941ceef015b13c757cb73dac85', disabled: true })), this.navigation && (h("ur-button-arrow-right", { key: '28e58ee5dfa0f6e1757977dcf11a1de79b30c8a6', disabled: true })), h("swiper-container", { key: '8247ccc9247a0cccd9059029c9b23db7347f9e33', "breakpoint-base": "container", grid: this.grid, breakpoints: this.breakpoints, "slides-per-view": this.slidesPerView, "space-between": this.spaceBetween }, this.users.map((user, index) => {
+        return (h(Host, { key: '84108a119238dae360776eb52a74c38071d5ff49' }, h("div", { key: '7025b4b59012631cdc0bc5617e31fe044260a77c', class: "carousel" }, this.navigation && (h("ur-button-arrow-left", { key: '82257e932e77af7e98eea29274e6de2d13fbcd08', disabled: true })), this.navigation && (h("ur-button-arrow-right", { key: 'baa4e882a2675c18939310180a7925c9f60e2da8', disabled: true })), h("swiper-container", { key: '75efd3561c44f873fbfc55fb8e14b6b2f1bc7a38', "breakpoint-base": "container", grid: this.grid, breakpoints: this.breakpoints, "slides-per-view": this.slidesPerView, "space-between": this.spaceBetween }, this.users.map((user, index) => {
             if (is_custom_data(user)) {
                 return (h("swiper-slide", null, h("div", { class: "custom", innerHTML: user.content(index) })));
             }

package/dist/collection/components/ur-user-page-profile/ur-user-page-profile.js

@@ -85,11 +85,11 @@ export class UrUserPageProfile {
             'profile-mobile-main': this.platform === 'mobile-main',
             'profile-mobile-secondary': this.platform === 'mobile-secondary',
         };
-        return (h(Host, { key: '3525cccbe29135a4d5fe5249cd17433893314096', class: classes }, h("div", { key: '73525e8427495c099eb07470184c207c51baa375', class: classes }, this.platform === 'desktop' && (h("div", { key: '63022e9c68b9b9de918b454e04995e351060b1ee', class: "desktop-content" }, h("div", { key: '431779cf08bf71ed07c408263a65550d27a11ec4', class: "avatar" }, h("div", { key: '7bb25047c158b230bbf4fa21d7ed1e6971486703', class: "avatar-wrapper" }, h("ur-avatar", { key: 'd64b5835b83318a116b536632d8bdcb8e24cb3bf', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton }), this.isProfileOwner && this.showAvatarEdit && !this.skeleton && (h("ur-button-icon", { key: '7569ed30399c89590271fddb589f7659cf19e694', class: "avatar-edit-overlay", icon: "edit", variant: "filled", "border-radius": "50%", "button-width": "32px", "button-height": "32px", onClick: () => this.avatarEdit.emit() })))), h("div", { key: 'd037de5c2d3789c794d694c0e27058dba01db61f', class: "info" }, h("div", { key: 'a677a8634afb456ac1326e01982dc63ec76e8fe4', class: "name" }, this.skeleton ? h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name, !this.skeleton && this.isPartner && h("ur-icon", { key: 'de046a6c6f8870c98619b27293ff78f3c788cd30', class: "partner-badge", name: "verified", size: "18px" })), this.renderProfileType(), this.skeleton ? h("ur-long-description", { class: "about", skeleton: true }) : this.about && h("ur-long-description", { class: "about", description: this.about }), this.renderLocation(), this.renderSocialLinks(), this.renderWebsite()), this.isLoggedIn && this.renderActions())), this.platform === 'desktop' && [
+        return (h(Host, { key: '3b7c1835d79c9517d456284ec9faec91e4805cef', class: classes }, h("div", { key: 'fc61b8a0e4f1c2072f923b3f9d5abcf98561afd0', class: classes }, this.platform === 'desktop' && (h("div", { key: 'ebf91b7c5834b64f50778449a6ef7573cd3280c7', class: "desktop-content" }, h("div", { key: '97aaf3a2770aba4d1bffc76c71ae8a9cf19463d8', class: "avatar" }, h("div", { key: '25f5a0d83bace83aedfcd550aa6c2e3482086650', class: "avatar-wrapper" }, h("ur-avatar", { key: 'a2572e73b48253c7573c0d31009c090417034a46', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton }), this.isProfileOwner && this.showAvatarEdit && !this.skeleton && (h("ur-button-icon", { key: 'dcbf2aff95fb65f05904554df6332ab077abbcaf', class: "avatar-edit-overlay", icon: "edit", variant: "filled", "border-radius": "50%", "button-width": "32px", "button-height": "32px", onClick: () => this.avatarEdit.emit() })))), h("div", { key: '7bbcf34ae8cecd0fa5b25b2e0ffdd63a19493d3a', class: "info" }, h("div", { key: '915e0d40b645631d09a17f0bf389fc83e5c59725', class: "name" }, this.skeleton ? h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name, !this.skeleton && this.isPartner && h("ur-icon", { key: 'ca472d484026e33958c070852b89615f82871511', class: "partner-badge", name: "verified", size: "18px" })), this.renderProfileType(), this.skeleton ? h("ur-long-description", { class: "about", skeleton: true }) : this.about && h("ur-long-description", { class: "about", description: this.about }), this.renderLocation(), this.renderSocialLinks(), this.renderWebsite()), this.isLoggedIn && this.renderActions())), this.platform === 'desktop' && [
             this.renderStats(),
             this.renderUserCreationDate(),
             this.renderLogoutAction(),
-        ], this.platform === 'mobile-main' && (h("div", { key: '8502a854003fa0062030d660b5c825a3584765c9', class: "mobile-main-content" }, h("div", { key: '8f912a1774aa279bd7a3a62484f0869e01aa6efc', class: "avatar" }, h("div", { key: '81970b995c68a8f06e65c929f33d044de9eea4b1', class: "avatar-wrapper" }, h("ur-avatar", { key: 'f1bcb2779a551be29b609dcc3b9d3634edca4504', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton }), this.isProfileOwner && this.showAvatarEdit && !this.skeleton && (h("ur-button-icon", { key: 'ddea3a49902c776e1d44f518a587f1d768881cb0', class: "avatar-edit-overlay", icon: "edit", variant: "filled", "border-radius": "50%", "button-width": "32px", "button-height": "32px", onClick: () => this.avatarEdit.emit() })))), h("div", { key: '9d7ac258cbb5a5a73027a8d3702f9f4bf81eebd3', class: "info" }, h("div", { key: 'a6415dd0a6a615a0d5c9944ed6b84c9a7be32768', class: "name" }, this.skeleton ? h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name, !this.skeleton && this.isPartner && h("ur-icon", { key: '207be0be177a08a020517068d565ff346663389f', class: "partner-badge", name: "verified", size: "18px" })), this.renderProfileType(), this.skeleton ? h("ur-long-description", { class: "about", skeleton: true }) : this.about && h("ur-long-description", { class: "about", description: this.about })), this.isLoggedIn && this.renderActions())), this.platform === 'mobile-secondary' && [
+        ], this.platform === 'mobile-main' && (h("div", { key: '903f8f7f525a73d81c02b4553974b57b633d5a7e', class: "mobile-main-content" }, h("div", { key: '0499b2130de587bbf3b2765a6cab8428e6f0e760', class: "avatar" }, h("div", { key: '5a5d6acda5e0459eb858c24392ca3a4f26f3f2f6', class: "avatar-wrapper" }, h("ur-avatar", { key: '3af7b55896015d19b19f570c70679c46305ef772', border: "4px", radius: "50px", size: "96px", src: this.avatar, name: this.name, skeleton: this.skeleton }), this.isProfileOwner && this.showAvatarEdit && !this.skeleton && (h("ur-button-icon", { key: '9f3ab39bffbca52cd76f2c97f6aa69a9e19d3148', class: "avatar-edit-overlay", icon: "edit", variant: "filled", "border-radius": "50%", "button-width": "32px", "button-height": "32px", onClick: () => this.avatarEdit.emit() })))), h("div", { key: '4373ec525bb59333bca5e96e1f10aaa1d05805d1', class: "info" }, h("div", { key: '7c45060c67209090aa87e4ce796e0e8ef9178774', class: "name" }, this.skeleton ? h("div", { class: "skeleton-line loading", style: { width: '180px', height: '22px' } }) : this.name, !this.skeleton && this.isPartner && h("ur-icon", { key: 'ca70de36d01f088a7cb1dc76ea18b4507e2bdf73', class: "partner-badge", name: "verified", size: "18px" })), this.renderProfileType(), this.skeleton ? h("ur-long-description", { class: "about", skeleton: true }) : this.about && h("ur-long-description", { class: "about", description: this.about })), this.isLoggedIn && this.renderActions())), this.platform === 'mobile-secondary' && [
             this.renderLocation(),
             this.renderSocialLinks(),
             this.renderWebsite(),

package/dist/collection/components/ur-user-partnership-application/ur-user-partnership-application.js

@@ -193,7 +193,7 @@ export class UrUserPartnershipApplication {
         return (h("div", { class: "state-container error" }, h("ur-icon", { name: "error", size: "48px", class: "state-icon error-icon" }), h("h3", null, this.errorTitleText), h("p", null, this.getDisplayErrorMessage()), h("div", { class: "modal-actions" }, h("ur-button", { variant: "outlined", onClick: this.handleClose }, this.closeButtonText), h("ur-button", { variant: "filled", onClick: this.handleRetry }, this.tryAgainButtonText))));
     }
     render() {
-        return (h(Host, { key: '52df018abb6d9d75f8706f1061dc460820ea4df0' }, h("div", { key: 'c71abcd48391095c2c2ecc460e67a99e34d08ed3', class: "partnership-application" }, this.currentState === 'loading' && this.renderLoading(), this.currentState === 'pending' && this.renderPending(), this.currentState === 'approved' && this.renderApproved(), this.currentState === 'declined' && this.renderDeclined(), this.currentState === 'ineligible' && this.renderIneligible(), this.currentState === 'eligible' && this.renderEligible(), this.currentState === 'form' && this.renderForm(), this.currentState === 'submitting' && this.renderSubmitting(), this.currentState === 'success' && this.renderSuccess(), this.currentState === 'error' && this.renderError())));
+        return (h(Host, { key: 'a931f2676681f2e6f506b79d4f7a0fa8388eeed2' }, h("div", { key: '06afaa6fbd64416b138f2e105f0434504118fde2', class: "partnership-application" }, this.currentState === 'loading' && this.renderLoading(), this.currentState === 'pending' && this.renderPending(), this.currentState === 'approved' && this.renderApproved(), this.currentState === 'declined' && this.renderDeclined(), this.currentState === 'ineligible' && this.renderIneligible(), this.currentState === 'eligible' && this.renderEligible(), this.currentState === 'form' && this.renderForm(), this.currentState === 'submitting' && this.renderSubmitting(), this.currentState === 'success' && this.renderSuccess(), this.currentState === 'error' && this.renderError())));
     }
     static get is() { return "ur-user-partnership-application"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ur-user-profile/ur-user-profile.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class UrUserProfile {
     render() {
-        return (h(Host, { key: '73fdeb4d2b37211de33f53c711e0255e45acd6a1' }, h("slot", { key: 'b23ac6d98f50af41b3cf273894050485c724fa12' })));
+        return (h(Host, { key: 'ee3758412c6f610f74730e865a86db8fb6943a29' }, h("slot", { key: '7862ae27b30b6bf3095ce3ec729cc799384def8d' })));
     }
     static get is() { return "ur-user-profile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ur-user-profile-settings-form/ur-user-profile-settings-form.js

@@ -144,7 +144,7 @@ export class UrUserProfileSettingsForm {
         }
     }
     render() {
-        return (h(Host, { key: 'c1b04430ae2b09d213e3826e8e9120280daf2282', class: { stacked: this.stacked } }, h("div", { key: '206956759c578bee78102cd2d1ff616c4161b938', class: "settings-container" }, h("div", { key: '4f4c138570f4ef022331a6901f5891e6fb6a77b8', class: "settings-section" }, h("div", { key: '0938d8f292d759277eb1c9130e89f489013f91e7', class: "section-header" }, h("h2", { key: 'fdfbdb8c3dfbd130bdf690042a69dbe6155a5eed', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.personalInfoTitleText), h("p", { key: '969a746916f49985fe48314f78e165b603bc117f', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.personalInfoSubtitleText)), h("div", { key: '1ccbbbeddee15c24c0ccb5e3646c50d9029a97af', class: "form-group" }, h("ur-text-field", { key: 'c985a45cae87394897dbe7314eac06d9bf885147', label: this.firstNameLabelText, value: this.settings.firstName || '', name: "firstName", maxlength: 50, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('firstName', e) })), h("div", { key: '011a372efce5c1c3560328299112b2bebc088058', class: "form-group" }, h("ur-text-field", { key: '7019587cf1cfb2d9eeab72c274a81a0eb4e7ec74', label: this.lastNameLabelText, value: this.settings.lastName || '', name: "lastName", maxlength: 50, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('lastName', e) })), h("div", { key: '7878624f0bab667ed08559a77b4d0b07fe7d8eb6', class: "form-group" }, h("ur-text-field", { key: 'b04941d04cbdfa08addd31aa7064b2ac12f49597', label: this.displayNameLabelText, value: this.settings.displayName || '', name: "displayName", maxlength: 100, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('displayName', e) })), h("div", { key: '42dee5407c8071b54f2a650a8df674b1ddb25aab', class: "form-group" }, h("ur-text-field", { key: '9618bc6cacc36882a0b930d6bf4d9281f8763a30', label: this.locationLabelText, value: this.settings.location || '', name: "location", maxlength: 40, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('location', e) })), h("div", { key: '15d3cd1c7c7b1c7f8b1d4f36394bfdd14852d024', class: "form-group" }, h("ur-text-field", { key: 'ba68e4242becffa1ca21ee51578089f96c6c8c98', label: this.websiteLabelText, value: this.settings.website || '', name: "website", maxlength: 160, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('website', e) })), h("div", { key: '19b481b048ed72fefa9f1ee6ec560fed15aec62a', class: "form-group" }, h("ur-text-field", { key: '4bdae0c462ea50319bf89b9ecd646559db1feb77', label: this.aboutLabelText, value: this.settings.about || '', name: "about", maxlength: 160, counter: true, rows: 3, autosize: true, minRows: 3, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('about', e) }))), h("div", { key: '985c8fb566c26bfb706932364e998b80c21b5812', class: "settings-section" }, h("div", { key: '1dab0a661bbe3ffedb51bb2f291090a0b8864ef0', class: "section-header" }, h("h2", { key: '2aef388e0f4ba9b60ce8c92f6c35a26f2b0549c3', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.interactTitleText), h("p", { key: '2ebbc197389c7c333fcdd9e9c31296612bdb9e7b', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.interactSubtitleText)), h("div", { key: '5a27b6ef7f8e86b0e3e1763397382bdb9668f86e', class: "form-group social-header" }, h("span", { key: 'c155dfcb43c73387b32bc82125fa7dab65c5ee4f', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.facebookTitleText), h("div", { key: 'fc9187edb2fdbbd81789c2112efe76eb1f58c399', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.facebook_enabled, onSwitchChange: e => this.handleSwitchChange('facebook_enabled', e) }))), (this.socialEnabled.facebook || this.skeleton) && (h("div", { key: 'a37bba57e8b91236f5f0cf9057565d50334fc0da', class: "form-group social-field" }, !this.skeleton && h("span", { key: 'ba0a6e8799141b1bd105b09d2d3f983adfb48ee3', class: "prefix-label" }, this.facebookPrefixText), h("ur-text-field", { key: '80a6c9e979a8eceb8a2cb1640a4797eaf5f826da', label: this.facebookLabelText, value: this.settings.facebook || '', name: "facebook", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('facebook', e) }))), h("div", { key: '562a6f0d6dc0943ef3181704af134fb8c9c31046', class: "form-group social-header" }, h("span", { key: 'f11dda027334c570a94b07e9fe9cbd69a82418af', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.twitterTitleText), h("div", { key: '0bd8399103308d8f9b15cc61fd87e2399f02cafc', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.twitter_enabled, onSwitchChange: e => this.handleSwitchChange('twitter_enabled', e) }))), (this.socialEnabled.twitter || this.skeleton) && (h("div", { key: 'ef6e36fd7f7024d07e44c83918a8d853c9e01ae4', class: "form-group social-field" }, !this.skeleton && h("span", { key: '2eb006e14ac0039a0831d241ea764c205f032fa0', class: "prefix-label" }, this.twitterPrefixText), h("ur-text-field", { key: '1fae219dad0f3a305a486b181f7c50a1113989d5', label: this.twitterLabelText, value: this.settings.twitter || '', name: "twitter", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('twitter', e) }))), h("div", { key: '05ddbbe458644176a9cdfc5c06007bea9fd962ee', class: "form-group social-header" }, h("span", { key: '78f2945a6bc148b86ea7eb9f365f86d817dfb46d', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.linkedinTitleText), h("div", { key: '961723234d5210cb3fd288518808587b1dd479e8', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.linkedin_enabled, onSwitchChange: e => this.handleSwitchChange('linkedin_enabled', e) }))), (this.socialEnabled.linkedin || this.skeleton) && (h("div", { key: '886b8ef5d09d8bb4ca6840a27e278d94f606318a', class: "form-group social-field" }, !this.skeleton && h("span", { key: '8d478640cc87e9c1978df67f659c836dddc10e54', class: "prefix-label" }, this.linkedinPrefixText), h("ur-text-field", { key: '03c2b7d3b9d6f9c90c8ef9a5475499c39257c713', label: this.linkedinLabelText, value: this.settings.linkedin || '', name: "linkedin", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('linkedin', e) }))), h("div", { key: 'f80b07a470d6a23c5fd00984f0d2e9cd5ac4171c', class: "form-group social-header" }, h("span", { key: '6dcc9ddf4dfbfc20c26a4e16e6b42278856e392e', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.emailTitleText), h("div", { key: 'c6333466530fa51b0abe70d7f12f466a0fc10884', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.email_enabled, onSwitchChange: e => this.handleSwitchChange('email_enabled', e) }))), (this.socialEnabled.email || this.skeleton) && (h("div", { key: 'b8193378287a1a6dbda27b7ce892e71be339d80b', class: "form-group social-field" }, h("ur-text-field", { key: '676bcec3e42ecefe70258d5b0affcca7362379d2', label: this.emailLabelText, value: this.settings.email || '', name: "email", type: "email", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('email', e) })))), this.showShippingAddress && (h("div", { key: 'f13dcbf5b5dedf7aeeefbd4f3cb04a146485418c', class: "settings-section" }, h("div", { key: 'a211730ffa7286f3ed53dd770b1cc7a0e5ceae85', class: "section-header" }, h("h2", { key: 'ad4ba4b5f388bd67ff1674ecad088196dc39638f', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.shippingAddressTitleText), h("p", { key: '3fad3d4d7e0dbf285c9025b457382c93a4cc7fae', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.shippingAddressSubtitleText)), h("div", { key: 'f5dc7ec99babcfef3a86081e6632025ffd2b5203', class: "form-group" }, h("ur-text-field", { key: '6cc89e7a140b3926cfeb6255131549bce351ad11', label: this.shippingNameLabelText, value: this.settings.shippingName || '', name: "shippingName", maxlength: 100, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingName', e) })), h("div", { key: '38a322bf7dc38ee245051b13bc5612e6725d7541', class: "form-group" }, h("ur-text-field", { key: '1915ddb622d910bb039f78ccf078da22454e48b4', label: this.shippingLine1LabelText, value: this.settings.shippingLine1 || '', name: "shippingLine1", maxlength: 200, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingLine1', e) })), h("div", { key: 'bb296e92079385bc1326a5cb805a08d497b53aef', class: "form-group" }, h("ur-text-field", { key: '6a79a9c265a8004aa70fe775b0f7ab14fa30be4c', label: this.shippingLine2LabelText, value: this.settings.shippingLine2 || '', name: "shippingLine2", maxlength: 200, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingLine2', e) })), h("div", { key: '11403597b0d77f026a3058905ddcf8ba9960b4ca', class: "form-row" }, h("div", { key: '3c7d564400695adfb2d4e5f5cbcc1efe46e1d514', class: "form-group form-group-half" }, h("ur-text-field", { key: '97cdad61c8a07b170c66c539da6526b0c4dd23ad', label: this.shippingCityLabelText, value: this.settings.shippingCity || '', name: "shippingCity", maxlength: 100, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingCity', e) })), h("div", { key: '7376833a78b4115b109d2dd34fd9ce2628d9ca35', class: "form-group form-group-half" }, h("ur-text-field", { key: '126bb4885cc5d4acf5e632f9f169099e9bb5f3c1', label: this.shippingStateLabelText, value: this.settings.shippingState || '', name: "shippingState", maxlength: 100, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingState', e) }))), h("div", { key: 'b251bbe71744425163cad66632884f1d17a0f2a0', class: "form-row" }, h("div", { key: '37a421c39a82986e1f554dee4b926450d0c15029', class: "form-group form-group-half" }, h("ur-text-field", { key: 'b25d00d587205e62967d9e62d53e31b985bc153b', label: this.shippingPostalCodeLabelText, value: this.settings.shippingPostalCode || '', name: "shippingPostalCode", maxlength: 20, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingPostalCode', e) })), h("div", { key: '336a54fcd4ae676bd2c2a8c004be36333933c1bb', class: "form-group form-group-half" }, this.skeleton ? (h("div", { class: "skeleton-select" })) : (h("ur-select", { label: this.shippingCountryLabelText, value: this.settings.shippingCountry || '', variant: "filled", placement: "top", onValueChanged: e => this.handleInputChange('shippingCountry', e) }, this.countries.map(country => (h("mdui-menu-item", { value: country.value }, country.value))))))))), this.showAccountDeletion && (h("div", { key: 'fa5e450424bbff6defca843fb942cb0a9ba51ac5', class: "settings-section" }, h("div", { key: '10211e2b61069c4b9f85db25752a80a909624457', class: "section-header" }, h("div", { key: '4f55147a8ac461522b454301d6431fe52e510f68', class: "section-title-row" }, h("div", { key: '00fc8877c76d26fe30ab08dcd55bca7f36075a12', class: "section-text-group" }, h("h2", { key: '5291b42a95b6c57a43fb503f03ad06ea7f30cb4b', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.accountDeletionTitleText), h("p", { key: 'efbad9faa5aeb6652220e9c225ddc265b2399f39', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.accountDeletionSubtitleText)), h("div", { key: '0c0f404698b67b73e3b85e1b31a2a8bc90569b86', class: "button-wrapper" }, this.skeleton ? (h("div", { class: "skeleton-button" })) : (h("ur-button", { variant: "filled", backgroundColor: "rgb(var(--ur-color-error))", disabled: this.isDeleteButtonDisabled(), onClick: this.handleDeleteAccount }, this.deleteAccountButtonText))))), !this.skeleton && this.getDeletionStatusMessage() && (h("div", { key: 'fb6d3c739c547e2d6486b2b268d6bcdb17ff0990', class: "deletion-status-message" }, h("mdui-icon", { key: 'fdd60ce75144dd41596401d06fc4c1a05df043b0', name: "info" }), h("p", { key: 'ea111ee1836e2f97c558c592c0e6b9b2b8c5a701' }, this.getDeletionStatusMessage()))))))));
+        return (h(Host, { key: '1612a1ada2464b1ae7b83037e8d968568381dfac', class: { stacked: this.stacked } }, h("div", { key: 'b70378b07106c2b6afb54bc9b8913d992fb840c4', class: "settings-container" }, h("div", { key: '0aa6a094b74ec585ea32e35ad49cb4d6ba0882c3', class: "settings-section" }, h("div", { key: '3eb49c5bae17ac8ec805e7f236b8181a3678b8ef', class: "section-header" }, h("h2", { key: '77b3e0e7f5291d808bda003a90d7956543c99341', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.personalInfoTitleText), h("p", { key: '80e1d9c8a0a2139abb8b281b8b81d05134afa4e1', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.personalInfoSubtitleText)), h("div", { key: '6778a3c0bcd1ffdf81923512521c136ec9765089', class: "form-group" }, h("ur-text-field", { key: '073319db35cf054e46219fbfd7a97f77ff96b6b0', label: this.firstNameLabelText, value: this.settings.firstName || '', name: "firstName", maxlength: 50, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('firstName', e) })), h("div", { key: 'da300a53c02990b5ad11640af6cacc3b285322bd', class: "form-group" }, h("ur-text-field", { key: '2604ea7add33d87d0fed599e57d5fdf99f8cc9d9', label: this.lastNameLabelText, value: this.settings.lastName || '', name: "lastName", maxlength: 50, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('lastName', e) })), h("div", { key: '73fb6b33997bf170fb5d3b937cbeb22b2e467f01', class: "form-group" }, h("ur-text-field", { key: 'b5db1210690111df4f4de15cba5e175dfccfa5d2', label: this.displayNameLabelText, value: this.settings.displayName || '', name: "displayName", maxlength: 100, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('displayName', e) })), h("div", { key: 'd8da195487d3fada2ade55889483c2a26e371f6a', class: "form-group" }, h("ur-text-field", { key: 'e728cdf369b1687189aff375212fb4e7eca2f26a', label: this.locationLabelText, value: this.settings.location || '', name: "location", maxlength: 40, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('location', e) })), h("div", { key: 'c99ff09de1d324c96c3a53bbf72ed6119461d304', class: "form-group" }, h("ur-text-field", { key: '619f7f0a0d64338356284befc99805c31fb0d9fb', label: this.websiteLabelText, value: this.settings.website || '', name: "website", maxlength: 160, counter: true, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('website', e) })), h("div", { key: '2a164a3b6f1611569e6de59b8676d68f23f41492', class: "form-group" }, h("ur-text-field", { key: '5683b8f02a6830bcc21e296dc17963fc83272d9a', label: this.aboutLabelText, value: this.settings.about || '', name: "about", maxlength: 160, counter: true, rows: 3, autosize: true, minRows: 3, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('about', e) }))), h("div", { key: '6fa49bdf8d4958a759cfa71a861505901c2ccdb7', class: "settings-section" }, h("div", { key: '8e3033c441ba728fd5541c8458bf04916df108bd', class: "section-header" }, h("h2", { key: '3d1ec05858847c2014c158d37ab9069f910f857c', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.interactTitleText), h("p", { key: '54f8c35058f79a8ae0b9e5fe790aad29870f7c8c', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.interactSubtitleText)), h("div", { key: 'c261043e098cad6d838164ec41fdd99e1eece1a6', class: "form-group social-header" }, h("span", { key: '995b82311e980b940ec2abb7cbf8a3a4149057dc', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.facebookTitleText), h("div", { key: 'a458b24500c40dd78f5252c9de81c757a3371b66', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.facebook_enabled, onSwitchChange: e => this.handleSwitchChange('facebook_enabled', e) }))), (this.socialEnabled.facebook || this.skeleton) && (h("div", { key: '3dac105f60b7ff09f3b83abb58d5c2c0f6e689bd', class: "form-group social-field" }, !this.skeleton && h("span", { key: '708ef03196096efe83634859a632b03497bce17a', class: "prefix-label" }, this.facebookPrefixText), h("ur-text-field", { key: '87f94a3ac9131bd43895514db48ca58356b30f0a', label: this.facebookLabelText, value: this.settings.facebook || '', name: "facebook", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('facebook', e) }))), h("div", { key: 'd46d234d7d22e2c38fe9579e3d0e67852f28d8d9', class: "form-group social-header" }, h("span", { key: 'ca571577537b8ef22a851329444e13ddd2647813', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.twitterTitleText), h("div", { key: 'afd991df9d38b18ef40d0025947f5bf7726c21aa', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.twitter_enabled, onSwitchChange: e => this.handleSwitchChange('twitter_enabled', e) }))), (this.socialEnabled.twitter || this.skeleton) && (h("div", { key: '1921d10b11108aa482df8595cb38e87ecc19551a', class: "form-group social-field" }, !this.skeleton && h("span", { key: '80320341c4f1ee6cfee1aa6be73494fd930f9b89', class: "prefix-label" }, this.twitterPrefixText), h("ur-text-field", { key: 'c5777a5b81d40708511909c1d91e79188e3a98fa', label: this.twitterLabelText, value: this.settings.twitter || '', name: "twitter", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('twitter', e) }))), h("div", { key: '9e64224b4ea44ddeeda33094ed21c625521b2c83', class: "form-group social-header" }, h("span", { key: '41d4434f1eda2289218d6f9115f6cb2c92c6d688', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.linkedinTitleText), h("div", { key: 'e88600258cdf2f7674407a1da0f0713eb68d03f3', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.linkedin_enabled, onSwitchChange: e => this.handleSwitchChange('linkedin_enabled', e) }))), (this.socialEnabled.linkedin || this.skeleton) && (h("div", { key: '881ad02efb571c7b6feed44b004c3296d7e561cf', class: "form-group social-field" }, !this.skeleton && h("span", { key: '6d45adf6e0c5d95d4c434fc1a7eafdcd41c9d29b', class: "prefix-label" }, this.linkedinPrefixText), h("ur-text-field", { key: 'e35e56ed376e7673e89444c267ab09cacda756d2', label: this.linkedinLabelText, value: this.settings.linkedin || '', name: "linkedin", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('linkedin', e) }))), h("div", { key: '41a17b11703aa264c566e8296921da377c71c736', class: "form-group social-header" }, h("span", { key: '71f724ea2e0af3a2a3bca6203da3733ace126993', class: `social-name ${this.skeleton ? 'skeleton-text' : ''}` }, this.skeleton ? '\u00A0' : this.emailTitleText), h("div", { key: 'd0610bf78dcbadadcd72b85197cd3eb8887bc4d7', class: "toggle-wrapper" }, this.skeleton ? h("div", { class: "skeleton-switch" }) : h("ur-switch", { checked: this.settings.email_enabled, onSwitchChange: e => this.handleSwitchChange('email_enabled', e) }))), (this.socialEnabled.email || this.skeleton) && (h("div", { key: 'e8215181bb076011257d342a6c3033d0b1cf9c4c', class: "form-group social-field" }, h("ur-text-field", { key: '41be39d46f6a93b5666f53b428f73627d0cecc25', label: this.emailLabelText, value: this.settings.email || '', name: "email", type: "email", skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('email', e) })))), this.showShippingAddress && (h("div", { key: '4984165b75383f680d9eae0cb581821ed9b19228', class: "settings-section" }, h("div", { key: 'bc85bd4117b8d8fa34454cb32bef7fa646e35b6b', class: "section-header" }, h("h2", { key: 'b90a98efb0ad84382c02ed979a5d5c9319e2fdd3', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.shippingAddressTitleText), h("p", { key: 'cadf0af4f70df73ccdd2f3f4287d4a447b653baa', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.shippingAddressSubtitleText)), h("div", { key: '6f67e40d67da03c1cc04cdc999604ba77f46e8cc', class: "form-group" }, h("ur-text-field", { key: 'e1947bdecf940c5e7c61e5155178206f6ccf8fde', label: this.shippingNameLabelText, value: this.settings.shippingName || '', name: "shippingName", maxlength: 100, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingName', e) })), h("div", { key: '3bab257c6e4a94f226b8235bc4f85d84ea1e4075', class: "form-group" }, h("ur-text-field", { key: '37c9bb3e94e0d063a96453c9798719f1956784b2', label: this.shippingLine1LabelText, value: this.settings.shippingLine1 || '', name: "shippingLine1", maxlength: 200, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingLine1', e) })), h("div", { key: '9e893119e214b8845b958e087371e767d3932e46', class: "form-group" }, h("ur-text-field", { key: '21ef107a064a908f35c2aeb7ec0091c5beb73e34', label: this.shippingLine2LabelText, value: this.settings.shippingLine2 || '', name: "shippingLine2", maxlength: 200, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingLine2', e) })), h("div", { key: '1ec1407e779d24d4a02b4163d3d5533ab53b3b3b', class: "form-row" }, h("div", { key: '584c74e1ef77ca529951e70445737b9778f5198b', class: "form-group form-group-half" }, h("ur-text-field", { key: 'f46e5d7121da09446c486ebe989846a8f3ca0fd2', label: this.shippingCityLabelText, value: this.settings.shippingCity || '', name: "shippingCity", maxlength: 100, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingCity', e) })), h("div", { key: 'a3cde97498c59e0f3ee6c1c083c189c32bcd14dc', class: "form-group form-group-half" }, h("ur-text-field", { key: '08c3ee27e3abf4d0f82d8f68d91ff1c045def928', label: this.shippingStateLabelText, value: this.settings.shippingState || '', name: "shippingState", maxlength: 100, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingState', e) }))), h("div", { key: 'c1093c74b856f9ed323064c9abb9726cd8b1b33b', class: "form-row" }, h("div", { key: 'b5926c69d7293f75a12ad5b87fdfa4daf57d5774', class: "form-group form-group-half" }, h("ur-text-field", { key: '41f6830d088f4a27767420417febfb3d03a6bab6', label: this.shippingPostalCodeLabelText, value: this.settings.shippingPostalCode || '', name: "shippingPostalCode", maxlength: 20, skeleton: this.skeleton, onValueChanged: e => this.handleInputChange('shippingPostalCode', e) })), h("div", { key: '5c04a245b07583f23fc7531267d1ebfc2b7142a7', class: "form-group form-group-half" }, this.skeleton ? (h("div", { class: "skeleton-select" })) : (h("ur-select", { label: this.shippingCountryLabelText, value: this.settings.shippingCountry || '', variant: "filled", placement: "top", onValueChanged: e => this.handleInputChange('shippingCountry', e) }, this.countries.map(country => (h("mdui-menu-item", { value: country.value }, country.value))))))))), this.showAccountDeletion && (h("div", { key: '686904c34bf6dc91b29808e23d60034aa9fef854', class: "settings-section" }, h("div", { key: '2fa8a5899bf699bfbaf6f3f1c5eba66eb764a930', class: "section-header" }, h("div", { key: 'd86a3b92064113db8d1f6e11bc7906252c8e03b4', class: "section-title-row" }, h("div", { key: 'd61bf8e4100e7bd7a336d08b54e11610fc17a480', class: "section-text-group" }, h("h2", { key: '77f79ff16072ab1b9437f776e4b0d2b549c3c98b', class: `section-title ${this.skeleton ? 'skeleton-title' : ''}` }, this.skeleton ? '\u00A0' : this.accountDeletionTitleText), h("p", { key: '8b21a784c6bd3ee1e0ebd90635e4740b73cb7d79', class: `section-description ${this.skeleton ? 'skeleton-description' : ''}` }, this.skeleton ? '\u00A0' : this.accountDeletionSubtitleText)), h("div", { key: '9c44ddb9a06895fa47cf5ac9ad5702ad2fc81619', class: "button-wrapper" }, this.skeleton ? (h("div", { class: "skeleton-button" })) : (h("ur-button", { variant: "filled", backgroundColor: "rgb(var(--ur-color-error))", disabled: this.isDeleteButtonDisabled(), onClick: this.handleDeleteAccount }, this.deleteAccountButtonText))))), !this.skeleton && this.getDeletionStatusMessage() && (h("div", { key: 'd4b389277dae181268fb78c250c164072fb26fb4', class: "deletion-status-message" }, h("mdui-icon", { key: '578f6eff1d6e23f0e106faf2a5683c1d918ebf9a', name: "info" }), h("p", { key: 'c5aa149a6c7ddb0d3e716875b9bc49d120bc8d98' }, this.getDeletionStatusMessage()))))))));
     }
     static get is() { return "ur-user-profile-settings-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ur-user-profile-tabs/ur-user-profile-tabs.js

@@ -14,6 +14,7 @@ export class UrUserProfileTabs {
         this.settingsTabText = 'Settings';
         this.aboutTabText = 'About';
         this.earningsTabText = 'Earnings';
+        this.agreementsTabText = 'Agreements';
         this.isOwner = false;
         this.isPartner = false;
         this.homeTabEnabled = false; // Whether home tab is public (or if owner, always show)
@@ -81,6 +82,11 @@ export class UrUserProfileTabs {
                 text: () => this.earningsTabText,
                 visibleFor: 'partner',
             },
+            {
+                value: 'agreements',
+                text: () => this.agreementsTabText,
+                visibleFor: 'owner',
+            },
             {
                 value: 'statistics',
                 text: () => this.statisticsTabText,
@@ -119,7 +125,7 @@ export class UrUserProfileTabs {
     }
     render() {
         const visibleTabs = this.getVisibleTabs();
-        return (h(Host, { key: 'cc1cd1f74e29ba6d8ae275944d1d1bca4a6708b6' }, h("mdui-tabs", { key: '31ac1e55841e7578d91704c14d321e8b04ae325c', value: this.activeTab, onChange: this.handleTabChange, "full-width-tabs": this.fullWidthTabs }, visibleTabs.map(tab => (h("mdui-tab", { key: tab.value, value: tab.value }, tab.text()))), visibleTabs.map(tab => (h("mdui-tab-panel", { key: tab.value, slot: "panel", value: tab.value }, h("slot", { name: tab.value })))))));
+        return (h(Host, { key: 'afdac0cb6316db9b321dd9787498b57fc63ea8e0' }, h("mdui-tabs", { key: '0a0de5cee5dc03107c9690b8cf050dd122b0b22b', value: this.activeTab, onChange: this.handleTabChange, "full-width-tabs": this.fullWidthTabs }, visibleTabs.map(tab => (h("mdui-tab", { key: tab.value, value: tab.value }, tab.text()))), visibleTabs.map(tab => (h("mdui-tab-panel", { key: tab.value, slot: "panel", value: tab.value }, h("slot", { name: tab.value })))))));
     }
     static get is() { return "ur-user-profile-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -335,6 +341,26 @@ export class UrUserProfileTabs {
                 "attribute": "earnings-tab-text",
                 "defaultValue": "'Earnings'"
             },
+            "agreementsTabText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agreements-tab-text",
+                "defaultValue": "'Agreements'"
+            },
             "isOwner": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/ur-work-overview/ur-work-overview.js

@@ -102,27 +102,27 @@ export class UrWorkOverview {
         this.expanded = false;
     }
     render() {
-        return (h(Host, { key: '4fde2296af7b0d85a573e88ce86c137bbc34df40' }, this.deviceSize === 'large' && (h("div", { key: '242cded3662996439f76d369c41405014ec8c94c', class: `cover-total ${this.skeleton ? 'skeleton-cover' : ''}`, style: !this.skeleton ? { backgroundImage: `url(${this.coverImage})` } : {} }, h("div", { key: '0ea70ffbdc29e2a57de60bb3211cf11f8e68fdb9', class: "cover-blur-overlay" }), h("div", { key: '3c391c93c1001572e344ec1809d3ea0af9366bfe', class: "cover-gradient-overlay" }))), h("div", { key: 'ea25582a4680ba1b545f651ed6af9f84f07fffef', class: `overview ${this.deviceSize === 'small' ? 'small-device' : 'large-device'}` }, h("div", { key: '0e292a0b615c0895c0f3b6f464322c50541b70b2', class: "cover" }, h("div", { key: 'b28388a4d9dfe22f2f2e9a99370273beb04c5e23', class: "inner-cover-hld" }, h("div", { key: '35bbf79b9af69760194ad165b865aa32fae9513f', class: "inner-cover" }, this.skeleton ? (h("div", { class: "cover-skeleton loading" })) : (h("img", { class: "cover-image", src: this.coverImage, alt: "Work Cover" }))))), h("div", { key: 'f1585dc19c4f3554250370393f93cbd32b6c2cca', class: "work-content" }, h("div", { key: '4d024c2513f13743bec23009e5dd86afcb5bdac8', class: "main-content" }, h("div", { key: '46131f767390feada7f092f7c99878e0cc0f942a', class: "upper-hld" }, this.renderStatusChips(), h("div", { key: '2d2b7764f7a854e65e3c1d550de7aad2b49b53f2', class: "title-hld" }, this.skeleton ? (h("h1", { class: "title-text title-skeleton loading" }, "\u00A0")) : (h("div", null, h("h1", { class: "title-text" }, this.workTitle), this.edition && this.parentWorkTitle && (h("div", { class: "edition-subtitle" }, this.editionOfText, " ", h("span", { class: "parent-work-link", onClick: () => this.onParentWorkClick() }, this.parentWorkTitle))))))), this.skeleton ? (h("span", { class: "story-stats stats-skeleton loading" }, "\u00A0")) : (h("span", { class: "story-stats" }, this.rating > 0 && (h("span", { class: "story-stat rating-stat" }, this.renderStars(), h("span", { class: "story-stat-value rating-value" }, this.rating.toFixed(1)), this.ratingCount > 0 && (h("span", { class: "story-stat-label rating-count" }, "(", this.ratingCount.toLocaleString(), ")")))), this.rating > 0 && (this.wantToRead > 0 || this.currentlyReading > 0) && h("span", { class: "story-stat-separator" }, "\u00B7"), this.wantToRead > 0 && (h("span", { class: "story-stat" }, h("span", { class: "story-stat-value" }, this.wantToRead), h("span", { class: "story-stat-label" }, this.wantToReadText))), this.wantToRead > 0 && this.currentlyReading > 0 && h("span", { class: "story-stat-separator" }, "\u00B7"), this.currentlyReading > 0 && (h("span", { class: "story-stat" }, h("span", { class: "story-stat-value" }, this.currentlyReading), h("span", { class: "story-stat-label" }, this.currentlyReadingText))))), this.edition && h("slot", { key: '0a6049a4d1a8bcaff1b31e97f1eb8e101384d616', name: "statistics" }), h("div", { key: 'd89ea1162712fd1b75e61819b04d7617973116ff', class: "actions-holder" }, this.skeleton ? (h("ur-button", { skeleton: true, class: "summary-action", "full-width": this.deviceSize === 'large' ? false : true })) : (h("ur-button", { class: "summary-action", variant: "filled", "full-width": this.deviceSize === 'large' ? false : true, onClick: () => this.onBuyStory() }, this.buyOnAmazonText)))), h("div", { key: 'defed75fef8c08b25b27042e4b30897d226963aa', class: "description" }, h("div", { key: '7d381513c4772e9d9a71f1c17dca824b8b44549f', class: "description-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.descriptionText))), this.skeleton ? (h("ur-long-description", { skeleton: true })) : (h("slot", { name: "description" }))), h("div", { key: '11ee3545fde60aa7dbb978a36f5c0162a4e72f95', class: "work-details" }, this.skeleton ? ([
+        return (h(Host, { key: 'dfcad0c4f9ee51054efd1b6506d76639fddbdb81' }, this.deviceSize === 'large' && (h("div", { key: 'eebcdaf9666ef3be10576f27339734af29b5a27c', class: `cover-total ${this.skeleton ? 'skeleton-cover' : ''}`, style: !this.skeleton ? { backgroundImage: `url(${this.coverImage})` } : {} }, h("div", { key: '36d5758e7337bc5892f3af48df6a8cf95d1fd664', class: "cover-blur-overlay" }), h("div", { key: '4ad21fc62f325d1996348ebfb2e333bc31d4ad8a', class: "cover-gradient-overlay" }))), h("div", { key: '784ed247db482a3b8638f2470998efd9df5b834f', class: `overview ${this.deviceSize === 'small' ? 'small-device' : 'large-device'}` }, h("div", { key: '91c02cc07cc9c177965ffa44a6c193e0e697faa1', class: "cover" }, h("div", { key: 'd3edab38f03ef32967f9047095eb6e629ab0b85e', class: "inner-cover-hld" }, h("div", { key: 'f8131534797801d72c3532bc1d767b7583d82dc9', class: "inner-cover" }, this.skeleton ? (h("div", { class: "cover-skeleton loading" })) : (h("img", { class: "cover-image", src: this.coverImage, alt: "Work Cover" }))))), h("div", { key: '630c67739b7ddcc048a2b61db5459e39187a3f3d', class: "work-content" }, h("div", { key: '1b402cdfd21501f59609730e309ce87753310867', class: "main-content" }, h("div", { key: '93d99972d6e1437ea971b0bacee191d8692a7ad6', class: "upper-hld" }, this.renderStatusChips(), h("div", { key: 'a9c118649d19726540700f39833beaf4b0bbc9f0', class: "title-hld" }, this.skeleton ? (h("h1", { class: "title-text title-skeleton loading" }, "\u00A0")) : (h("div", null, h("h1", { class: "title-text" }, this.workTitle), this.edition && this.parentWorkTitle && (h("div", { class: "edition-subtitle" }, this.editionOfText, " ", h("span", { class: "parent-work-link", onClick: () => this.onParentWorkClick() }, this.parentWorkTitle))))))), this.skeleton ? (h("span", { class: "story-stats stats-skeleton loading" }, "\u00A0")) : (h("span", { class: "story-stats" }, this.rating > 0 && (h("span", { class: "story-stat rating-stat" }, this.renderStars(), h("span", { class: "story-stat-value rating-value" }, this.rating.toFixed(1)), this.ratingCount > 0 && (h("span", { class: "story-stat-label rating-count" }, "(", this.ratingCount.toLocaleString(), ")")))), this.rating > 0 && (this.wantToRead > 0 || this.currentlyReading > 0) && h("span", { class: "story-stat-separator" }, "\u00B7"), this.wantToRead > 0 && (h("span", { class: "story-stat" }, h("span", { class: "story-stat-value" }, this.wantToRead), h("span", { class: "story-stat-label" }, this.wantToReadText))), this.wantToRead > 0 && this.currentlyReading > 0 && h("span", { class: "story-stat-separator" }, "\u00B7"), this.currentlyReading > 0 && (h("span", { class: "story-stat" }, h("span", { class: "story-stat-value" }, this.currentlyReading), h("span", { class: "story-stat-label" }, this.currentlyReadingText))))), this.edition && h("slot", { key: 'fd2caee79ac4507d9049a5eca158c15fa5891084', name: "statistics" }), h("div", { key: '57f1e3e104df3403bd1f3722b9f5ca45a65a0579', class: "actions-holder" }, this.skeleton ? (h("ur-button", { skeleton: true, class: "summary-action", "full-width": this.deviceSize === 'large' ? false : true })) : (h("ur-button", { class: "summary-action", variant: "filled", "full-width": this.deviceSize === 'large' ? false : true, onClick: () => this.onBuyStory() }, this.buyOnAmazonText)))), h("div", { key: 'e8486fae79c0535dd7f424ea477e8043e318ce38', class: "description" }, h("div", { key: 'c6884f23c4f1ffeabf2bc7a076ddd88c6f5b5534', class: "description-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.descriptionText))), this.skeleton ? (h("ur-long-description", { skeleton: true })) : (h("slot", { name: "description" }))), h("div", { key: '85ca8e1b101af72cd2c1e1749fca65d885c57567', class: "work-details" }, this.skeleton ? ([
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" })
-        ]) : (this.renderGenreChips())), h("div", { key: '8bdf6f7b47621b9c5b80aa5e808c795025e58133', class: "author-section" }, h("div", { key: '6b0df04da4020586603357cdfd8187c2344e97e3', class: "author-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.authorText))), h("div", { key: '5a3ac2c9119645aaca560120dc8fb5bed60ea73c', class: "author-holder" }, h("slot", { key: '53b8eabe87f3e80e3ee17566ebcd950a6ca1c889', name: "author" }))), (this.skeleton || (this.subjectPeople && this.subjectPeople.split(',').map(p => p.trim()).filter(p => p !== '' && p !== 'Loading').length > 0)) && (h("div", { key: 'c68bd6c710997b2bf236afabb235877cd6e0d816', class: "subject-section" }, h("div", { key: '53b3956749cf3e9241e665b9ee7e435f45b0e6d6', class: "subject-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.peopleText))), h("div", { key: '8e4f031289e36fdebc38b9453abab57874b50b5e', class: "subject-chips" }, this.skeleton ? ([
+        ]) : (this.renderGenreChips())), h("div", { key: '61c998db38052a9f32adb59487062d38285f3b4c', class: "author-section" }, h("div", { key: 'da7ac604f3661314d96bb21237d8b726051aafa8', class: "author-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.authorText))), h("div", { key: 'a402bfc66c00cd08e6b3600e76ad2c85cc19fc0d', class: "author-holder" }, h("slot", { key: '0d3c49048f47edb768dea3273714b3f48bef4e4f', name: "author" }))), (this.skeleton || (this.subjectPeople && this.subjectPeople.split(',').map(p => p.trim()).filter(p => p !== '' && p !== 'Loading').length > 0)) && (h("div", { key: 'dcaec9a8875cd8484b2f17e0bb0c77f53b07f0c4', class: "subject-section" }, h("div", { key: '7b33f43c0320654d5140f64a07403fbf96ff44ee', class: "subject-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.peopleText))), h("div", { key: '855ca09d3cea0b61767a646d204bebe5ffc3417a', class: "subject-chips" }, this.skeleton ? ([
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" })
-        ]) : (this.renderPeopleChips())))), (this.skeleton || (this.subjectPlaces && this.subjectPlaces.split(',').map(p => p.trim()).filter(p => p !== '' && p !== 'Loading').length > 0)) && (h("div", { key: '3c0fa8454a195ca9785b1df6c2d147d9717ba01a', class: "subject-section" }, h("div", { key: '00ac60e68d9a2e4fe79724c6ca6ed98f31cdf4ba', class: "subject-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.placesText))), h("div", { key: '2a66eca5d79159f9b00fd8a800a40844a52e1025', class: "subject-chips" }, this.skeleton ? ([
+        ]) : (this.renderPeopleChips())))), (this.skeleton || (this.subjectPlaces && this.subjectPlaces.split(',').map(p => p.trim()).filter(p => p !== '' && p !== 'Loading').length > 0)) && (h("div", { key: '53e96ecf2521622b955a7cb644e5e852d3215a53', class: "subject-section" }, h("div", { key: '8bc330fdacb48bd485506d7414245d69e88e2411', class: "subject-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.placesText))), h("div", { key: '574bcc60ea4e382a0df1607393649e262a3f8ba1', class: "subject-chips" }, this.skeleton ? ([
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" })
-        ]) : (this.renderPlacesChips())))), (this.skeleton || (this.subjectTimes && this.subjectTimes.split(',').map(t => t.trim()).filter(t => t !== '' && t !== 'Loading').length > 0)) && (h("div", { key: '7afdf0d2f0b1a9e5ae0093471520f1473ad8466b', class: "subject-section" }, h("div", { key: '49389ad93391b104f67dd8afbe7b8d2933aa7f21', class: "subject-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.timePeriodsText))), h("div", { key: '5d484c6e5b5ee58d7acdaa70d8d5bd6062916022', class: "subject-chips" }, this.skeleton ? ([
+        ]) : (this.renderPlacesChips())))), (this.skeleton || (this.subjectTimes && this.subjectTimes.split(',').map(t => t.trim()).filter(t => t !== '' && t !== 'Loading').length > 0)) && (h("div", { key: '27e4482795977123305579bf9a8817efa89e38e0', class: "subject-section" }, h("div", { key: '48ffee8f5c7d0138d404c536aa1b7800aa7f49ad', class: "subject-header" }, this.skeleton ? (h("span", { class: "label label-skeleton loading" }, "\u00A0")) : (h("span", { class: "label" }, this.timePeriodsText))), h("div", { key: '16e9d05b58f6253f0deada460d9bf83bffc0ed19', class: "subject-chips" }, this.skeleton ? ([
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" }),
             h("ur-chip", { skeleton: true, size: "28px", class: "info-chip" })
-        ]) : (this.renderTimesChips())))), this.edition && h("slot", { key: '68a94874f95521d89c9c6312f7b2e1c5ede95393', name: "secondary-statistics" }), h("slot", { key: '41f142a86064c2dec222a657bb84fd05408a2a5f', name: "editions" }), h("slot", { key: 'b44d279687195bda6db3df6256fdca33eba505a1', name: "chapters" })), h("div", { key: '6fb27faa405013ee680d4f8d6ddadd32b2a7cb10', class: "ad-space" }, "\u00A0"))));
+        ]) : (this.renderTimesChips())))), this.edition && h("slot", { key: '013362969fa37713f9c16352e0d1bb39d33db6b1', name: "secondary-statistics" }), h("slot", { key: '69f8b827c5e5dd80d98a4e1f851bb5297376cd21', name: "editions" }), h("slot", { key: 'e3abe90a618ef084de83b4956c3792c3e52762c0', name: "chapters" })), h("div", { key: '98eb204f4c1b398d0ab65375c704f7f784c2718e', class: "ad-space" }, "\u00A0"))));
     }
     renderStars() {
         const stars = [];

package/dist/collection/stories/Canvas.stories.js

@@ -0,0 +1,68 @@
+import { html } from "lit";
+import "../components/ur-canvas/ur-canvas";
+export default {
+    title: 'Urnovl/Business/Canvas',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        height: { control: 'text', description: 'CSS height of the canvas' },
+        readonly: { control: 'boolean', description: 'Disable editing' },
+        canvasTitle: { control: 'text', description: 'Title shown in top-left panel' },
+    },
+};
+export const EmptyCanvas = {
+    render: () => html `
+        <div style="width: 100%; height: 100vh;">
+            <ur-canvas canvas-title="My Story Canvas"></ur-canvas>
+        </div>
+    `,
+};
+const PRELOADED_JSON = JSON.stringify({
+    fabric: {
+        version: '6.6.1',
+        objects: [
+            { _uid: 'obj-1', subTargetCheck: false, interactive: false, type: 'Group', version: '6.6.1', originX: 'left', originY: 'top', left: 275, top: 489, width: 201, height: 201, fill: 'rgb(0,0,0)', stroke: null, strokeWidth: 0, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: { color: 'rgba(0,0,0,0.08)', blur: 10, offsetX: 2, offsetY: 4, affectStroke: false, nonScaling: false, type: 'shadow' }, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0, layoutManager: { type: 'layoutManager', strategy: 'fit-content' }, objects: [
+                    { rx: 4, ry: 4, type: 'Rect', version: '6.6.1', originX: 'center', originY: 'center', left: 0, top: 0, width: 200, height: 200, fill: '#FEF3C7', stroke: null, strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: null, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0 },
+                    { fontSize: 32, fontWeight: 'normal', fontFamily: 'Open Sans, sans-serif', fontStyle: 'normal', lineHeight: 1.16, text: "that's a sticker", charSpacing: 0, textAlign: 'center', styles: [], pathStartOffset: 0, pathSide: 'left', pathAlign: 'baseline', underline: false, overline: false, linethrough: false, textBackgroundColor: '', direction: 'ltr', minWidth: 20, splitByGrapheme: false, type: 'Textbox', version: '6.6.1', originX: 'center', originY: 'center', left: 0, top: 0, width: 170, height: 78.1056, fill: '#333', stroke: null, strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: null, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0 },
+                ] },
+            { _uid: 'obj-2', subTargetCheck: false, interactive: false, type: 'Group', version: '6.6.1', originX: 'left', originY: 'top', left: 811, top: 308, width: 201, height: 201, fill: 'rgb(0,0,0)', stroke: null, strokeWidth: 0, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: { color: 'rgba(0,0,0,0.08)', blur: 10, offsetX: 2, offsetY: 4, affectStroke: false, nonScaling: false, type: 'shadow' }, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0, layoutManager: { type: 'layoutManager', strategy: 'fit-content' }, objects: [
+                    { rx: 4, ry: 4, type: 'Rect', version: '6.6.1', originX: 'center', originY: 'center', left: 0, top: 0, width: 200, height: 200, fill: '#F0ABFC', stroke: null, strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: null, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0 },
+                    { fontSize: 32, fontWeight: 'normal', fontFamily: 'Open Sans, sans-serif', fontStyle: 'normal', lineHeight: 1.16, text: 'second sticker', charSpacing: 0, textAlign: 'center', styles: [], pathStartOffset: 0, pathSide: 'left', pathAlign: 'baseline', underline: false, overline: false, linethrough: false, textBackgroundColor: '', direction: 'ltr', minWidth: 20, splitByGrapheme: false, type: 'Textbox', version: '6.6.1', originX: 'center', originY: 'center', left: 0, top: 0, width: 170, height: 78.1056, fill: '#333', stroke: null, strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: null, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0 },
+                ] },
+            { _uid: 'obj-3', _isSticker: true, fontSize: 48, fontWeight: 'normal', fontFamily: 'Times New Roman', fontStyle: 'normal', lineHeight: 1.16, text: '\uD83D\uDC4D', charSpacing: 0, textAlign: 'center', styles: [], pathStartOffset: 0, pathSide: 'left', pathAlign: 'baseline', underline: false, overline: false, linethrough: false, textBackgroundColor: '', direction: 'ltr', minWidth: 20, splitByGrapheme: false, type: 'Textbox', version: '6.6.1', originX: 'center', originY: 'center', left: 473.8763, top: 735.0871, width: 65.9063, height: 54.24, fill: 'rgb(0,0,0)', stroke: null, strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', strokeDashOffset: 0, strokeLineJoin: 'miter', strokeUniform: false, strokeMiterLimit: 4, scaleX: 2.8496, scaleY: 2.8496, angle: 0, flipX: false, flipY: false, opacity: 1, shadow: null, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0 },
+            { _uid: 'obj-4', _isShapeGroup: true, subTargetCheck: false, interactive: false, type: 'Group', version: '6.6.1', originX: 'left', originY: 'top', left: 804, top: 566, width: 287, height: 301, fill: 'rgb(0,0,0)', stroke: null, strokeWidth: 0, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, opacity: 1, visible: true, backgroundColor: '', fillRule: 'nonzero', paintFirst: 'fill', globalCompositeOperation: 'source-over', skewX: 0, skewY: 0, layoutManager: { type: 'layoutManager', strategy: 'fit-content' }, objects: [
+                    { rx: 2, ry: 2, type: 'Rect', version: '6.6.1', originX: 'center', originY: 'center', left: 0, top: 0, width: 286, height: 300, fill: 'transparent', stroke: '#333333', strokeWidth: 2, strokeUniform: true },
+                    { fontSize: 16, fontWeight: 'normal', fontFamily: 'Open Sans, sans-serif', fontStyle: 'normal', lineHeight: 1.16, text: '', charSpacing: 0, textAlign: 'center', styles: [], type: 'Textbox', version: '6.6.1', originX: 'center', originY: 'center', left: 0, top: 0, width: 254, fill: '#333', stroke: null, strokeWidth: 1, selectable: false, evented: false },
+                ] },
+        ],
+        background: 'transparent',
+    },
+    connectors: [
+        { id: 'conn-1', sourceUid: 'obj-1', sourceAnchor: 'right', targetUid: 'obj-2', targetAnchor: 'left', freeEnd: null, startHead: 'none', endHead: 'arrow', pathType: 'curved', strokeStyle: 'solid', thickness: 2 },
+    ],
+    commentPins: [
+        { id: 1, sceneX: 331, sceneY: 348, text: 'test comment' },
+    ],
+});
+export const PreloadedCanvas = {
+    render: () => html `
+        <div style="width: 100%; height: 100vh;">
+            <ur-canvas value=${PRELOADED_JSON} canvas-title="Chapter 1 Planning"></ur-canvas>
+        </div>
+    `,
+};
+export const ReadonlyCanvas = {
+    render: () => html `
+        <div style="width: 100%; height: 100vh;">
+            <ur-canvas value=${PRELOADED_JSON} canvas-title="Chapter 1 Planning" .readonly=${true}></ur-canvas>
+        </div>
+    `,
+};
+export const Skeleton = {
+    render: () => html `
+        <div style="width: 100%; height: 100vh;">
+            <ur-canvas .skeleton=${true}></ur-canvas>
+        </div>
+    `,
+};