urnovl-web-components 0.0.260 → 0.0.261

package/dist/cjs/ur-post-editor.cjs.entry.js

@@ -0,0 +1,388 @@
+'use strict';
+
+var index = require('./index-DlgBfuIH.js');
+require('./index-DqsOXF7F.js');
+require('./tab-BVwUIXQ4.js');
+require('./ur-text-field.cjs.entry.js');
+require('./ur-checkbox.cjs.entry.js');
+require('./ur-radio-button.cjs.entry.js');
+require('./ur-button.cjs.entry.js');
+require('./ur-button-icon.cjs.entry.js');
+require('./component-style-BC5DdXyd.js');
+require('./directive-CxKj9eM_.js');
+require('./extend-DbPiqimt.js');
+require('./get-DihLFVsH.js');
+require('./has-slot-CDodaVHS.js');
+require('./state-BClMM5R0.js');
+require('./query-assigned-elements-BJgmzm6i.js');
+require('./class-map-Epaosh8c.js');
+require('./ref-Dnp-_rKJ.js');
+require('./children-B1QguDFM.js');
+require('./attr-D_LyPdSc.js');
+require('./watch-MAiBzcfm.js');
+require('./observeResize-CIGibYBb.js');
+require('./uniqueId-CMEDvi2z.js');
+require('./when-CKWo9geR.js');
+require('./template-X5q71k2a.js');
+require('./ripple-mixin-CsKjDjw-.js');
+require('./appendTo-DN8OV-GK.js');
+require('./index-D9tgr8W-.js');
+require('./if-defined-CSIrgCHw.js');
+require('./live-_ZxdDKuu.js');
+require('./localize-BBHKPixn.js');
+require('./form-DQ4661h-.js');
+require('./default-value-DCmiPaS8.js');
+require('./svg-tag-BC3DRit2.js');
+require('./index-DIMJXlQp.js');
+require('./button-base-l-itW3Wo.js');
+require('./anchor-B2WOhfFL.js');
+require('./index-CealG8gc.js');
+require('./index-C90fgX4g.js');
+require('./radio-DWksGWLi.js');
+require('./index-DjZZ27FG.js');
+
+const urPostEditorCss = ":host{display:block}:host .editor-container{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:550px}:host .tabs-wrapper{margin-bottom:0.5rem}:host .tabs-wrapper mdui-tab{font-size:14px}:host .tabs-wrapper.edit-mode mdui-tab:not([active]){display:none}:host .tabs-wrapper.edit-mode mdui-tab[active]{pointer-events:none}:host .tab-content{display:flex;flex-direction:column;gap:1.5rem}:host .form-section{display:flex;flex-direction:column;gap:0.5rem}:host .section-label{font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.1px;color:rgb(var(--mdui-color-on-surface));margin-bottom:0.25rem}:host .media-upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;padding:2.5rem 1rem;border:2px dashed rgba(var(--mdui-color-outline), 0.5);border-radius:12px;cursor:pointer;transition:all 0.2s ease;background:rgba(var(--mdui-color-surface-variant), 0.2)}:host .media-upload-area:hover{border-color:rgb(var(--mdui-color-primary));background:rgba(var(--mdui-color-primary), 0.05)}:host .media-upload-area mdui-icon{font-size:48px;color:rgb(var(--mdui-color-on-surface-variant));opacity:0.6}:host .media-upload-text{font-size:14px;font-weight:500;color:rgb(var(--mdui-color-on-surface))}:host .media-upload-hint{font-size:12px;color:rgb(var(--mdui-color-on-surface-variant))}:host .media-preview-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:0.5rem}:host .media-preview-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:rgba(var(--mdui-color-surface-variant), 0.3)}:host .media-preview-item img{width:100%;height:100%;object-fit:cover}:host .media-preview-video{position:relative;width:100%;height:100%}:host .media-preview-video img{width:100%;height:100%;object-fit:cover}:host .media-preview-video .video-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:white;text-shadow:0 2px 4px rgba(0, 0, 0, 0.3)}:host .media-preview-video .video-indicator mdui-icon{font-size:40px}:host .media-remove-btn{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:rgba(0, 0, 0, 0.6);color:white;cursor:pointer;transition:background-color 0.2s}:host .media-remove-btn:hover{background:rgba(var(--mdui-color-error), 0.9)}:host .media-remove-btn mdui-icon{font-size:18px}:host .poll-options{display:flex;flex-direction:column;gap:0.5rem}:host .poll-options-list{display:flex;flex-direction:column;gap:0.75rem}:host .poll-option-row{display:flex;align-items:flex-start;gap:0.5rem}:host .poll-option-row ur-text-field{flex:1}:host .poll-option-row .remove-option-btn{margin-top:8px;flex-shrink:0}:host .add-option-btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:0.25rem;padding:0.5rem 0;border:none;background:transparent;cursor:pointer;font-size:14px;font-weight:500;color:rgb(var(--mdui-color-primary));transition:opacity 0.2s}:host .add-option-btn:hover{opacity:0.8}:host .add-option-btn mdui-icon{font-size:20px}:host .checkbox-section{padding:0}:host .checkbox-content{display:flex;flex-direction:column;gap:0.125rem}:host .checkbox-label{font-size:14px;font-weight:500;line-height:20px;color:rgb(var(--mdui-color-on-surface))}:host .checkbox-hint{font-size:12px;line-height:16px;color:rgb(var(--mdui-color-on-surface-variant))}:host .audience-options{display:flex;flex-direction:column;gap:0.5rem}:host .audience-option{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:rgba(var(--mdui-color-surface-variant), 0.3);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all 0.2s ease;text-align:left}:host .audience-option:hover{background:rgba(var(--mdui-color-surface-variant), 0.5)}:host .audience-option.selected{background:rgba(var(--mdui-color-primary), 0.1);border-color:rgb(var(--mdui-color-primary))}:host .audience-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(var(--mdui-color-on-surface), 0.08);color:rgb(var(--mdui-color-on-surface-variant));flex-shrink:0;transition:all 0.2s ease}:host .audience-option.selected .audience-icon{background:rgb(var(--mdui-color-primary));color:rgb(var(--mdui-color-on-primary))}:host .audience-icon mdui-icon{font-size:18px}:host .audience-text{display:flex;flex-direction:column;gap:0.125rem;flex:1}:host .audience-label{font-size:14px;font-weight:500;line-height:20px;color:rgb(var(--mdui-color-on-surface))}:host .audience-hint{font-size:12px;line-height:16px;color:rgb(var(--mdui-color-on-surface-variant))}:host .tier-selector{margin-top:-0.5rem;padding-left:1rem;border-left:3px solid rgba(var(--mdui-color-primary), 0.3)}:host .tier-mode-options{display:flex;flex-direction:column;gap:0.25rem}:host .tier-mode-content{display:flex;flex-direction:column;gap:0.125rem}:host .tier-mode-label{font-size:14px;font-weight:500;line-height:20px;color:rgb(var(--mdui-color-on-surface))}:host .tier-mode-hint{font-size:12px;line-height:16px;color:rgb(var(--mdui-color-on-surface-variant))}:host .tier-list{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.5rem;padding-left:0.25rem}:host .tier-item-content{display:flex;align-items:center;justify-content:space-between;flex:1;gap:0.5rem}:host .tier-name{font-size:13px;font-weight:500;color:rgb(var(--mdui-color-on-surface))}:host .tier-price{font-size:12px;font-weight:500;color:rgb(var(--mdui-color-on-surface-variant))}:host .form-actions{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid rgba(var(--mdui-color-outline-variant), 0.5);margin-top:0.5rem}@keyframes skeleton-loading{0%{background-position:-650px 0}100%{background-position:650px 0}}:host .loading{animation-duration:1.7s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:skeleton-loading;background:linear-gradient(\n        to right,\n        rgba(var(--mdui-color-on-background), 0.04) 2%,\n        rgba(var(--mdui-color-on-background), 0.12) 18%,\n        rgba(var(--mdui-color-on-background), 0.04) 33%\n    );background-size:1000px;border-radius:4px}:host .skeleton-tabs{height:48px;width:100%;border-radius:8px}:host .skeleton-field{height:56px;width:100%;border-radius:8px}:host .skeleton-field.tall{height:120px}:host .skeleton-button{height:40px;width:100px;border-radius:20px}";
+
+const UrPostEditor = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postSaved = index.createEvent(this, "postSaved");
+        this.postCancelled = index.createEvent(this, "postCancelled");
+        this.mediaUploadClicked = index.createEvent(this, "mediaUploadClicked");
+        this.mediaRemoveClicked = index.createEvent(this, "mediaRemoveClicked");
+        /**
+         * The post data to edit (null for create mode)
+         */
+        this.post = null;
+        /**
+         * Mode: 'create' or 'edit'
+         */
+        this.mode = 'create';
+        /**
+         * Show skeleton loading state
+         */
+        this.skeleton = false;
+        /**
+         * Loading state for save button
+         */
+        this.saving = false;
+        /**
+         * Whether the owner has subscription tiers (to show subscribers option)
+         */
+        this.hasSubscribers = false;
+        /**
+         * Available subscription tiers for the owner
+         */
+        this.tiers = [];
+        /**
+         * Uploaded media items (for media posts)
+         */
+        this.media = [];
+        /**
+         * Maximum number of media items allowed
+         */
+        this.maxMedia = 4;
+        // Tab text props for i18n
+        this.textTabText = 'Text';
+        this.mediaTabText = 'Images & Video';
+        this.linkTabText = 'Link';
+        this.pollTabText = 'Poll';
+        // Text props for i18n
+        this.titleLabelText = 'Title';
+        this.titlePlaceholderText = "What's on your mind?";
+        this.bodyLabelText = 'Body (optional)';
+        this.bodyPlaceholderText = 'Share more details...';
+        this.linkUrlLabelText = 'Link URL';
+        this.linkUrlPlaceholderText = 'https://...';
+        this.mediaUploadText = 'Drag and drop or click to upload';
+        this.mediaHintText = 'Images up to 4MB';
+        this.spoilerLabelText = 'Spoiler';
+        this.spoilerHintText = 'May ruin a surprise';
+        this.audienceLabelText = 'Who can see this?';
+        this.publicText = 'Public';
+        this.publicHintText = 'Anyone can see';
+        this.followersText = 'Followers';
+        this.followersHintText = 'Only your followers';
+        this.subscribersText = 'Subscribers';
+        this.subscribersHintText = 'Only your paying subscribers';
+        this.privateText = 'Private';
+        this.privateHintText = 'Only you can see';
+        // Tier selector text props
+        this.selectTiersText = 'Select tiers';
+        this.allTiersText = 'All tiers';
+        this.allTiersHintText = 'All paying subscribers can see';
+        this.specificTiersText = 'Specific tiers';
+        this.specificTiersHintText = 'Only selected tiers can see';
+        this.postBtnText = 'Post';
+        this.saveBtnText = 'Post';
+        this.savingBtnText = 'Posting...';
+        this.cancelBtnText = 'Cancel';
+        // Poll text props
+        this.pollOptionsLabelText = 'Poll options';
+        this.pollOptionPlaceholderText = 'Option';
+        this.addOptionText = 'Add another option';
+        this.maxPollOptions = 6;
+        /**
+         * Default tab to open when creating a post
+         */
+        this.defaultTab = 'text';
+        // Internal state
+        this.activeTab = 'text';
+        this.title = '';
+        this.body = '';
+        this.linkUrl = '';
+        this.pollOptions = ['', ''];
+        this.isSpoiler = false;
+        this.audience = 'public';
+        this.tierSelectionMode = 'all';
+        this.selectedTierIds = [];
+        this.handleTabChange = (e) => {
+            var _a;
+            // Block tab switching in edit mode
+            if (this.mode === 'edit') {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            const newTab = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+            if (newTab) {
+                this.activeTab = newTab;
+            }
+        };
+        this.handleTitleChange = (e) => {
+            this.title = e.detail.value;
+        };
+        this.handleBodyChange = (e) => {
+            this.body = e.detail.value;
+        };
+        this.handleLinkUrlChange = (e) => {
+            this.linkUrl = e.detail.value;
+        };
+        this.handleSpoilerChange = (e) => {
+            this.isSpoiler = e.detail.checked;
+        };
+        this.handleAudienceChange = (audience) => {
+            this.audience = audience;
+            // Reset tier selection when switching away from subscribers
+            if (audience !== 'subscribers') {
+                this.tierSelectionMode = 'all';
+                this.selectedTierIds = [];
+            }
+        };
+        this.handleTierSelectionModeChange = (mode) => {
+            this.tierSelectionMode = mode;
+            if (mode === 'all') {
+                this.selectedTierIds = [];
+            }
+        };
+        this.handlePollOptionChange = (index, e) => {
+            const newOptions = [...this.pollOptions];
+            newOptions[index] = e.detail.value;
+            this.pollOptions = newOptions;
+        };
+        this.handleRemovePollOption = (index) => {
+            if (this.pollOptions.length > 2) {
+                this.pollOptions = this.pollOptions.filter((_, i) => i !== index);
+            }
+        };
+        this.handleAddPollOption = () => {
+            if (this.pollOptions.length < this.maxPollOptions) {
+                this.pollOptions = [...this.pollOptions, ''];
+            }
+        };
+        this.handleMediaUploadClick = () => {
+            this.mediaUploadClicked.emit();
+        };
+        this.handleMediaRemove = (index) => {
+            this.mediaRemoveClicked.emit({ index, media: this.media[index] });
+        };
+        this.handleSave = () => {
+            var _a;
+            if (!this.isValid())
+                return;
+            const postData = {
+                _id: (_a = this.post) === null || _a === void 0 ? void 0 : _a._id,
+                type: this.activeTab,
+                title: this.title.trim(),
+                body: (this.activeTab === 'text' || this.activeTab === 'link' || this.activeTab === 'media')
+                    ? (this.body.trim() || undefined)
+                    : undefined,
+                linkUrl: this.activeTab === 'link' ? (this.linkUrl.trim() || undefined) : undefined,
+                pollOptions: this.activeTab === 'poll'
+                    ? this.pollOptions.filter(o => o.trim()).map(text => ({ text: text.trim() }))
+                    : undefined,
+                media: (this.activeTab === 'media' && this.media && this.media.length > 0)
+                    ? this.media
+                    : undefined,
+                isSpoiler: this.isSpoiler,
+                audience: this.audience,
+                // Only include audienceTiers for subscribers audience with specific tiers selected
+                audienceTiers: (this.audience === 'subscribers' && this.tierSelectionMode === 'specific' && this.selectedTierIds.length > 0)
+                    ? this.selectedTierIds
+                    : undefined,
+            };
+            this.postSaved.emit(postData);
+        };
+        this.handleCancel = () => {
+            this.postCancelled.emit();
+        };
+        this.handleTierModeRadioChange = (e) => {
+            const mode = e.detail.value;
+            this.handleTierSelectionModeChange(mode);
+        };
+        this.handleTierCheckboxChange = (tierId, e) => {
+            const checked = e.detail.checked;
+            if (checked && !this.selectedTierIds.includes(tierId)) {
+                this.selectedTierIds = [...this.selectedTierIds, tierId];
+            }
+            else if (!checked && this.selectedTierIds.includes(tierId)) {
+                this.selectedTierIds = this.selectedTierIds.filter(id => id !== tierId);
+            }
+        };
+    }
+    postChanged(newPost) {
+        this.initializeFromPost(newPost);
+    }
+    defaultTabChanged(newTab) {
+        // Only update activeTab if we're in create mode and no post is set
+        if (!this.post && this.mode === 'create') {
+            this.activeTab = newTab;
+        }
+    }
+    componentWillLoad() {
+        this.initializeFromPost(this.post);
+    }
+    initializeFromPost(post) {
+        var _a;
+        if (post) {
+            this.activeTab = post.type || this.defaultTab;
+            this.title = post.title || '';
+            this.body = post.body || '';
+            this.linkUrl = post.linkUrl || '';
+            this.pollOptions = ((_a = post.pollOptions) === null || _a === void 0 ? void 0 : _a.map(o => o.text)) || ['', ''];
+            this.isSpoiler = post.isSpoiler || false;
+            this.audience = post.audience || 'public';
+            // Handle tier selection
+            if (post.audienceTiers && post.audienceTiers.length > 0) {
+                this.tierSelectionMode = 'specific';
+                this.selectedTierIds = [...post.audienceTiers];
+            }
+            else {
+                this.tierSelectionMode = 'all';
+                this.selectedTierIds = [];
+            }
+        }
+        else {
+            // Default values for create mode
+            this.activeTab = this.defaultTab;
+            this.title = '';
+            this.body = '';
+            this.linkUrl = '';
+            this.pollOptions = ['', ''];
+            this.isSpoiler = false;
+            this.audience = 'public';
+            this.tierSelectionMode = 'all';
+            this.selectedTierIds = [];
+        }
+    }
+    isValid() {
+        if (!this.title.trim())
+            return false;
+        switch (this.activeTab) {
+            case 'text':
+                return true;
+            case 'media':
+                // For now, just require title (media upload is handled externally)
+                return true;
+            case 'link':
+                // Require a valid URL
+                return this.linkUrl.trim().length > 0;
+            case 'poll':
+                // Need at least 2 non-empty options
+                const validOptions = this.pollOptions.filter(o => o.trim());
+                return validOptions.length >= 2;
+            default:
+                return false;
+        }
+    }
+    renderSkeleton() {
+        return (index.h(index.Host, null, index.h("div", { class: "editor-container" }, index.h("div", { class: "skeleton-tabs loading" }), index.h("div", { class: "form-section" }, index.h("div", { class: "skeleton-field loading" }), index.h("div", { class: "skeleton-field tall loading" })), index.h("div", { class: "form-actions" }, index.h("div", { class: "skeleton-button loading" }), index.h("div", { class: "skeleton-button loading" })))));
+    }
+    renderPollOptions() {
+        const isEditMode = this.mode === 'edit';
+        const canAddMore = !isEditMode && this.pollOptions.length < this.maxPollOptions;
+        const canRemove = !isEditMode && this.pollOptions.length > 2;
+        return (index.h("div", { class: "poll-options" }, index.h("label", { class: "section-label" }, this.pollOptionsLabelText), index.h("div", { class: "poll-options-list" }, this.pollOptions.map((option, index$1) => (index.h("div", { class: "poll-option-row", key: index$1 }, index.h("ur-text-field", { label: `${this.pollOptionPlaceholderText} ${index$1 + 1}`, value: option, name: `pollOption${index$1}`, maxlength: 65, counter: !isEditMode, disabled: isEditMode, onValueChanged: (e) => this.handlePollOptionChange(index$1, e) }), canRemove && (index.h("ur-button-icon", { icon: "close", class: "remove-option-btn", onClick: () => this.handleRemovePollOption(index$1) }))))), canAddMore && (index.h("button", { type: "button", class: "add-option-btn", onClick: this.handleAddPollOption }, index.h("mdui-icon", { name: "add" }), this.addOptionText)))));
+    }
+    renderTextContent() {
+        return (index.h("div", { class: "form-section" }, index.h("ur-text-field", { label: this.bodyLabelText, placeholder: this.bodyPlaceholderText, value: this.body, name: "body", maxlength: 5000, counter: true, rows: 4, autosize: true, minRows: 3, onValueChanged: this.handleBodyChange })));
+    }
+    renderMediaContent() {
+        const hasMedia = this.media && this.media.length > 0;
+        const canAddMore = !this.media || this.media.length < this.maxMedia;
+        return [
+            // Uploaded media grid
+            hasMedia && (index.h("div", { class: "form-section" }, index.h("div", { class: "media-preview-grid" }, this.media.map((item, index$1) => (index.h("div", { class: "media-preview-item", key: index$1 }, item.type === 'video' ? (index.h("div", { class: "media-preview-video" }, index.h("img", { src: item.thumbnailUrl || item.url, alt: "" }), index.h("div", { class: "video-indicator" }, index.h("mdui-icon", { name: "play_circle" })))) : (index.h("img", { src: item.url, alt: "" })), index.h("button", { type: "button", class: "media-remove-btn", onClick: () => this.handleMediaRemove(index$1), "aria-label": "Remove" }, index.h("mdui-icon", { name: "close" })))))))),
+            // Media upload area (only if can add more)
+            canAddMore && (index.h("div", { class: "form-section" }, index.h("div", { class: "media-upload-area", onClick: this.handleMediaUploadClick }, index.h("mdui-icon", { name: "cloud_upload" }), index.h("span", { class: "media-upload-text" }, this.mediaUploadText), index.h("span", { class: "media-upload-hint" }, this.mediaHintText)))),
+            // Body (optional description)
+            index.h("div", { class: "form-section" }, index.h("ur-text-field", { label: this.bodyLabelText, placeholder: this.bodyPlaceholderText, value: this.body, name: "body", maxlength: 5000, counter: true, rows: 3, autosize: true, minRows: 2, onValueChanged: this.handleBodyChange }))
+        ];
+    }
+    renderLinkContent() {
+        return [
+            // Link URL input
+            index.h("div", { class: "form-section" }, index.h("ur-text-field", { label: this.linkUrlLabelText, placeholder: this.linkUrlPlaceholderText, value: this.linkUrl, name: "linkUrl", type: "url", required: true, onValueChanged: this.handleLinkUrlChange })),
+            // Body (optional description)
+            index.h("div", { class: "form-section" }, index.h("ur-text-field", { label: this.bodyLabelText, placeholder: this.bodyPlaceholderText, value: this.body, name: "body", maxlength: 5000, counter: true, rows: 3, autosize: true, minRows: 2, onValueChanged: this.handleBodyChange }))
+        ];
+    }
+    renderPollContent() {
+        return (index.h("div", { class: "form-section" }, this.renderPollOptions()));
+    }
+    renderTabContent() {
+        switch (this.activeTab) {
+            case 'text':
+                return this.renderTextContent();
+            case 'media':
+                return this.renderMediaContent();
+            case 'link':
+                return this.renderLinkContent();
+            case 'poll':
+                return this.renderPollContent();
+            default:
+                return null;
+        }
+    }
+    formatTierPrice(tier) {
+        var _a;
+        const price = (tier.pricePerMonth / 100).toFixed(2);
+        const currency = ((_a = tier.currency) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'EUR';
+        const symbol = currency === 'EUR' ? '€' : currency === 'USD' ? '$' : currency;
+        return `${symbol}${price}/mo`;
+    }
+    renderTierSelector() {
+        if (this.audience !== 'subscribers' || !this.tiers || this.tiers.length === 0) {
+            return null;
+        }
+        return (index.h("div", { class: "form-section tier-selector" }, index.h("label", { class: "section-label" }, this.selectTiersText), index.h("div", { class: "tier-mode-options" }, index.h("ur-radio-button", { name: "tierMode", value: "all", checked: this.tierSelectionMode === 'all', onValueSelected: this.handleTierModeRadioChange, fullWidth: true }, index.h("div", { class: "tier-mode-content" }, index.h("span", { class: "tier-mode-label" }, this.allTiersText), index.h("span", { class: "tier-mode-hint" }, this.allTiersHintText))), index.h("ur-radio-button", { name: "tierMode", value: "specific", checked: this.tierSelectionMode === 'specific', onValueSelected: this.handleTierModeRadioChange, fullWidth: true }, index.h("div", { class: "tier-mode-content" }, index.h("span", { class: "tier-mode-label" }, this.specificTiersText), index.h("span", { class: "tier-mode-hint" }, this.specificTiersHintText)))), this.tierSelectionMode === 'specific' && (index.h("div", { class: "tier-list" }, this.tiers.map(tier => (index.h("ur-checkbox", { key: tier._id, value: tier._id, checked: this.selectedTierIds.includes(tier._id), onValueChanged: (e) => this.handleTierCheckboxChange(tier._id, e), fullWidth: true }, index.h("div", { class: "tier-item-content" }, index.h("span", { class: "tier-name" }, tier.name), index.h("span", { class: "tier-price" }, this.formatTierPrice(tier))))))))));
+    }
+    renderAudienceSelector() {
+        return (index.h("div", { class: "form-section" }, index.h("label", { class: "section-label" }, this.audienceLabelText), index.h("div", { class: "audience-options" }, index.h("button", { type: "button", class: `audience-option ${this.audience === 'public' ? 'selected' : ''}`, onClick: () => this.handleAudienceChange('public') }, index.h("span", { class: "audience-icon" }, index.h("mdui-icon", { name: "public" })), index.h("span", { class: "audience-text" }, index.h("span", { class: "audience-label" }, this.publicText), index.h("span", { class: "audience-hint" }, this.publicHintText))), index.h("button", { type: "button", class: `audience-option ${this.audience === 'private' ? 'selected' : ''}`, onClick: () => this.handleAudienceChange('private') }, index.h("span", { class: "audience-icon" }, index.h("mdui-icon", { name: "lock" })), index.h("span", { class: "audience-text" }, index.h("span", { class: "audience-label" }, this.privateText), index.h("span", { class: "audience-hint" }, this.privateHintText))), index.h("button", { type: "button", class: `audience-option ${this.audience === 'followers' ? 'selected' : ''}`, onClick: () => this.handleAudienceChange('followers') }, index.h("span", { class: "audience-icon" }, index.h("mdui-icon", { name: "group" })), index.h("span", { class: "audience-text" }, index.h("span", { class: "audience-label" }, this.followersText), index.h("span", { class: "audience-hint" }, this.followersHintText))), this.hasSubscribers && (index.h("button", { type: "button", class: `audience-option ${this.audience === 'subscribers' ? 'selected' : ''}`, onClick: () => this.handleAudienceChange('subscribers') }, index.h("span", { class: "audience-icon" }, index.h("mdui-icon", { name: "loyalty" })), index.h("span", { class: "audience-text" }, index.h("span", { class: "audience-label" }, this.subscribersText), index.h("span", { class: "audience-hint" }, this.subscribersHintText)))))));
+    }
+    render() {
+        if (this.skeleton) {
+            return this.renderSkeleton();
+        }
+        const isCreateMode = this.mode === 'create';
+        const submitBtnText = isCreateMode ? this.postBtnText : this.saveBtnText;
+        return (index.h(index.Host, null, index.h("div", { class: "editor-container" }, index.h("div", { class: { 'tabs-wrapper': true, 'edit-mode': !isCreateMode } }, index.h("mdui-tabs", { value: this.activeTab, variant: "primary", onChange: this.handleTabChange }, index.h("mdui-tab", { value: "text" }, index.h("mdui-icon", { slot: "icon", name: "edit_note" }), this.textTabText), index.h("mdui-tab", { value: "media" }, index.h("mdui-icon", { slot: "icon", name: "image" }), this.mediaTabText), index.h("mdui-tab", { value: "link" }, index.h("mdui-icon", { slot: "icon", name: "link" }), this.linkTabText), index.h("mdui-tab", { value: "poll" }, index.h("mdui-icon", { slot: "icon", name: "poll" }), this.pollTabText))), index.h("div", { class: "form-section" }, index.h("ur-text-field", { label: this.titleLabelText, placeholder: this.titlePlaceholderText, value: this.title, name: "title", maxlength: 200, counter: true, required: true, onValueChanged: this.handleTitleChange })), index.h("div", { class: "tab-content" }, this.renderTabContent()), index.h("div", { class: "form-section checkbox-section" }, index.h("ur-checkbox", { checked: this.isSpoiler, onValueChanged: this.handleSpoilerChange }, index.h("div", { class: "checkbox-content" }, index.h("span", { class: "checkbox-label" }, this.spoilerLabelText), index.h("span", { class: "checkbox-hint" }, this.spoilerHintText)))), this.renderAudienceSelector(), this.renderTierSelector(), index.h("div", { class: "form-actions" }, index.h("ur-button", { variant: "text", onClick: this.handleCancel, disabled: this.saving }, this.cancelBtnText), index.h("ur-button", { variant: "filled", onClick: this.handleSave, disabled: !this.isValid() || this.saving }, this.saving ? this.savingBtnText : submitBtnText)))));
+    }
+    static get watchers() { return {
+        "post": ["postChanged"],
+        "defaultTab": ["defaultTabChanged"]
+    }; }
+};
+UrPostEditor.style = urPostEditorCss;
+
+exports.ur_post_editor = UrPostEditor;

package/dist/cjs/ur-post-prompt.cjs.entry.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-DlgBfuIH.js');
+
+const urPostPromptCss = ":host{display:block;width:100%;--ur-color-surface:var(--mdui-color-surface);--ur-color-surface-container:var(--mdui-color-surface-container);--ur-color-surface-container-high:var(--mdui-color-surface-container-high);--ur-color-on-surface-variant:var(--mdui-color-on-surface-variant);--ur-color-outline-variant:var(--mdui-color-outline-variant)}:host .post-prompt{display:flex;align-items:center;gap:12px;background:rgb(var(--ur-color-surface));border-radius:12px}:host .post-prompt.disabled{opacity:0.5;pointer-events:none}:host .input-area{flex:1;min-height:40px;padding:4px 16px;background:rgba(var(--mdui-color-surface-variant), 0.3);border-radius:25px;display:flex;align-items:center;cursor:pointer;transition:background-color 0.2s ease}:host .input-area:hover{background:rgba(var(--mdui-color-surface-variant), 0.5)}:host .placeholder{color:rgb(var(--ur-color-on-surface-variant));font-size:14px;user-select:none}:host .action-buttons{display:flex;gap:4px;flex-shrink:0;position:relative;top:2px}";
+
+const UrPostPrompt = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.promptClick = index.createEvent(this, "promptClick");
+        // Placeholder text
+        this.placeholder = "What's on your mind?";
+        // Disabled state
+        this.disabled = false;
+        // Avatar variant (for pages vs users)
+        this.avatarVariant = 'user';
+        // Mobile layout
+        this.mobile = false;
+        // Padding
+        this.padding = '8px';
+        // Tooltip text props (i18n)
+        this.linkTooltip = 'Add link';
+        this.mediaTooltip = 'Add images';
+        this.pollTooltip = 'Create poll';
+        this.handleInputClick = () => {
+            if (this.disabled)
+                return;
+            this.promptClick.emit({ tab: 'text' });
+        };
+        this.handleLinkClick = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.promptClick.emit({ tab: 'link' });
+        };
+        this.handleMediaClick = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.promptClick.emit({ tab: 'media' });
+        };
+        this.handlePollClick = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.promptClick.emit({ tab: 'poll' });
+        };
+    }
+    render() {
+        return (index.h("div", { key: '3e296f57f4e4c44ad12152a2a3c47f346a6abade', class: { 'post-prompt': true, 'disabled': this.disabled, 'mobile': this.mobile }, style: { padding: this.padding } }, index.h("ur-avatar", { key: '1d92b2ceb74554433c6a13c4fb2fe3d97b975a43', src: this.userPicture, name: this.userName, size: "40px", variant: this.avatarVariant }), index.h("div", { key: '796a70ac57738707ce54ba99a8aeb6d7fc35c5fd', class: "input-area", onClick: this.handleInputClick }, index.h("span", { key: '29f3c5bf8eaa6e6987095dc3f48dc52d1a9fdcc9', class: "placeholder" }, this.placeholder)), index.h("div", { key: '44ae382d0f0576412d89921614b1b92d6f7e7f5f', class: "action-buttons" }, index.h("ur-tooltip", { key: '1aadd8a7768364684856c2c7cbb4c067de978fac', content: this.mediaTooltip, placement: "bottom", disabled: this.mobile }, index.h("ur-button-icon", { key: '6c6122084b6cd49d27d449379a32c8b809dd67af', icon: "image", variant: "standard", onClick: this.handleMediaClick, disabled: this.disabled })), !this.mobile && (index.h("ur-tooltip", { key: 'd5375424d9bf47e472833aed180b40470de1ba24', content: this.linkTooltip, placement: "bottom" }, index.h("ur-button-icon", { key: 'dfe7d92e784130daf66d2bfd75227330148f6059', icon: "link", variant: "standard", onClick: this.handleLinkClick, disabled: this.disabled }))), !this.mobile && (index.h("ur-tooltip", { key: 'b86d97786207a2cad2360a4a43688499c8d722d4', content: this.pollTooltip, placement: "bottom" }, index.h("ur-button-icon", { key: 'e611a21f1839d3b4d6f1e82f40799464b82dbd08', icon: "ballot", variant: "standard", onClick: this.handlePollClick, disabled: this.disabled }))))));
+    }
+};
+UrPostPrompt.style = urPostPromptCss;
+
+exports.ur_post_prompt = UrPostPrompt;

package/dist/cjs/ur-profile-card.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DlgBfuIH.js');
-require('./ur-avatar-COaGB2q6.js');
+require('./ur-avatar-BV3tq4vp.js');
 require('./ur-button.cjs.entry.js');
 require('./ur-button-icon.cjs.entry.js');
 require('./ur-tooltip-8JU9DWrs.js');
@@ -91,7 +91,7 @@ const UrProfileCard = class {
         const actualAvatarSize = this.big ? '150px' : this.avatarSize;
         const actualBorderRadius = this.big ? '12px' : (this.profileType === 'page' ? '12px' : '50%');
         const actualNameFontSize = this.big ? '18px' : this.nameFontSize;
-        return (index.h(index.Host, { key: 'd7748b1bb65d9a1505a8da9aa41f9ed66a5dedfe' }, index.h("div", { key: '2a05397ad882121a0b767195f2d242098ebb1924', class: `profile-card ${this.big ? 'big' : ''}` }, index.h("div", { key: 'bc384dffa8bf268b68c325032d5fcf258c0b1b12', class: "profile-container" }, index.h("a", { key: '98c8819b27b37564e8daaefa3c2f79a24196bc49', href: this.profileHref, class: "avatar-link", onClick: (e) => { e.preventDefault(); this.handleProfileLink(); } }, index.h("ur-avatar", { key: '68c33dfa97fb0f20d310b4f70600410dd262f920', size: actualAvatarSize, class: "avatar", variant: this.profileType, radius: actualBorderRadius, src: this.avatarSrc, name: this.name, skeleton: this.skeleton })), index.h("span", { key: '1ae014b677a7cf0bd4d016534ad71a1e94135089', class: "profile-info" }, this.skeleton ? (index.h("span", { class: "name-skeleton loading", style: { width: '80px', height: actualNameFontSize } })) : (index.h("div", { class: "name-container" }, index.h("a", { href: this.profileHref, class: "name-link", onClick: (e) => { e.preventDefault(); this.handleProfileLink(); } }, index.h("span", { class: "name", style: { fontSize: actualNameFontSize } }, this.name), this.isPartner && index.h("ur-icon", { class: "partner-badge", name: "verified", size: "14px" })), this.metadata && (index.h("span", { class: "metadata" }, this.metadata)))), this.showDescription && (index.h("div", { key: '913810cd9f4185e17bf568384a879b9c93d7240e', class: "description-container" }, this.skeleton ? (index.h("span", { class: "description-skeleton loading", style: { width: '120px', height: '10px' } })) : this.big ? (index.h("ur-long-description", { description: this.description, showMoreText: this.showMoreText, showLessText: this.showLessText, markdown: this.markdown })) : (index.h("span", { class: "description-text" }, this.description)))))), index.h("div", { key: 'a9f733bc63204837d84bc75653746e9b915ec083', class: "actions-container" }, !this.isOwner && !this.hideFollowActions && (index.h("ur-button", { key: 'db8332b6235ad4c69734e07dc8bef628c400515f', buttonHeight: this.buttonHeight, class: "follow-button", onClick: this.isFollowing ? this.onUnfollow : this.onFollow, variant: this.isFollowing ? 'text' : 'outlined', skeleton: this.skeleton }, this.isFollowing ? this.unfollowButtonText : this.followButtonText)), this.profileType === 'user' && this.showMemberActions && !this.skeleton && (index.h("ur-tooltip", { key: '4413f3e9cb29dfa6f5ef6e73770683e964c79492', content: this.memberActionsTooltipText, placement: "bottom", trigger: "hover", colorScheme: "dark", "open-delay": "200", "close-delay": "100" }, index.h("ur-button-icon", { key: '8ba7fd113f43d6d70e1f30c1782c84463c1f4501', buttonHeight: this.buttonHeight, buttonWidth: this.buttonWidth, class: "member-actions-button", icon: "close", onClick: this.onRemoveMember }))), this.profileType === 'page' && this.showPageActions && !this.skeleton && (index.h("ur-tooltip", { key: 'a483284151933e9ceabd46a2363c38f267103bdf', content: this.pageActionsTooltipText, placement: "bottom", trigger: "hover", colorScheme: "dark", "open-delay": "200", "close-delay": "100" }, index.h("ur-button-icon", { key: '01f2401e1a01946036ad684c43338897e92906e5', buttonHeight: this.buttonHeight, buttonWidth: this.buttonWidth, class: "page-actions-button", icon: "close", onClick: this.onRemovePage })))))));
+        return (index.h(index.Host, { key: '2377b213dcc9cdeae0ad202c4bdb8a6040164be0' }, index.h("div", { key: '7a60adf5328b7fd2ad5f0e6e9c4cfef2954098e2', class: `profile-card ${this.big ? 'big' : ''}` }, index.h("div", { key: 'ed311462c30b9380c32425c7784eeff77f344438', class: "profile-container" }, index.h("a", { key: '1f64d2dea7e01faa6507e7bd4df3c0903f8a3719', href: this.profileHref, class: "avatar-link", onClick: (e) => { e.preventDefault(); this.handleProfileLink(); } }, index.h("ur-avatar", { key: '457ac5c718c63fdf80224941617fa6f14618c22e', size: actualAvatarSize, class: "avatar", variant: this.profileType, radius: actualBorderRadius, src: this.avatarSrc, name: this.name, skeleton: this.skeleton })), index.h("span", { key: 'f7af9fd8a3a9c37f9ab720a28690c4903bb46ed6', class: "profile-info" }, this.skeleton ? (index.h("span", { class: "name-skeleton loading", style: { width: '80px', height: actualNameFontSize } })) : (index.h("div", { class: "name-container" }, index.h("a", { href: this.profileHref, class: "name-link", onClick: (e) => { e.preventDefault(); this.handleProfileLink(); } }, index.h("span", { class: "name", style: { fontSize: actualNameFontSize } }, this.name), this.isPartner && index.h("ur-icon", { class: "partner-badge", name: "verified", size: "14px" })), this.metadata && (index.h("span", { class: "metadata" }, this.metadata)))), this.showDescription && (index.h("div", { key: 'e2e829ce64f05ed27a761f21272dea962571e73a', class: "description-container" }, this.skeleton ? (index.h("span", { class: "description-skeleton loading", style: { width: '120px', height: '10px' } })) : this.big ? (index.h("ur-long-description", { description: this.description, showMoreText: this.showMoreText, showLessText: this.showLessText, markdown: this.markdown })) : (index.h("span", { class: "description-text" }, this.description)))))), index.h("div", { key: 'f9cca6e2c4fcdaa71b7ce7427804f923d7bfa148', class: "actions-container" }, !this.isOwner && !this.hideFollowActions && (index.h("ur-button", { key: 'c26fef214c706736af2e3542a502b7fd986c134b', buttonHeight: this.buttonHeight, class: "follow-button", onClick: this.isFollowing ? this.onUnfollow : this.onFollow, variant: this.isFollowing ? 'text' : 'outlined', skeleton: this.skeleton }, this.isFollowing ? this.unfollowButtonText : this.followButtonText)), this.profileType === 'user' && this.showMemberActions && !this.skeleton && (index.h("ur-tooltip", { key: '76e15aec3816342291903b9fcb0a2ae7c2eb8170', content: this.memberActionsTooltipText, placement: "bottom", trigger: "hover", colorScheme: "dark", "open-delay": "200", "close-delay": "100" }, index.h("ur-button-icon", { key: '60eea5405fcfc3d80dfb1a7bb7b39bb1920cf69d', buttonHeight: this.buttonHeight, buttonWidth: this.buttonWidth, class: "member-actions-button", icon: "close", onClick: this.onRemoveMember }))), this.profileType === 'page' && this.showPageActions && !this.skeleton && (index.h("ur-tooltip", { key: '985d9bf5d01b23425b4722aada0a6834535275af', content: this.pageActionsTooltipText, placement: "bottom", trigger: "hover", colorScheme: "dark", "open-delay": "200", "close-delay": "100" }, index.h("ur-button-icon", { key: 'ba06ca8dd1434972e2ecd8dc197bd7092a2b6dee', buttonHeight: this.buttonHeight, buttonWidth: this.buttonWidth, class: "page-actions-button", icon: "close", onClick: this.onRemovePage })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ur-profile.cjs.entry.js

@@ -114,11 +114,11 @@ const UrProfile = class {
         this.member_since = 'May 25, 20215';
     }
     render() {
-        return (index.h(index.Host, { key: 'd639f31e4910315b84656991dfd1b831531057a9' }, index.h("div", { key: '52b8dce89f07d859d41165f874f55b625bf6b1c9', class: "profile" }, index.h("div", { key: '2170c1c3257260137f12e1258c03c7c7d878a818', class: "name" }, this.name), this.description && index.h("div", { key: '512974b6af7485fbaf8cbfd0e0b3e44a2efedf2e', class: "description" }, this.description), this.location && index.h("div", { key: 'de15dfde3f67c1c0f0fc4efb182740acaf0ed9ea', class: "location" }, this.location), index.h("div", { key: '28aaddd49593e6120fc6b3d9edde53b1d25f9ff2', class: "social" }, this.facebook_url && index.h("a", { key: 'c2f3f97a41b425d66a64174034ebc4fe73b3332d', href: this.facebook_url, title: "facebook", target: "_blank" }, index.h("span", { key: '5aac86c3b9ced58c09d8e712ed8c6c398e7ba0c9', class: "icon", innerHTML: Icons.facebook })), this.twitter_url && index.h("a", { key: '5e18703b059978dae56f1eddc22d2e10c4cf0d02', href: this.twitter_url, title: "twitter", target: "_blank" }, index.h("span", { key: 'bb0ecc9f2fb4537eaf86669227c1f442e3d1783b', class: "icon", innerHTML: Icons.twitter })), this.linkedin_url && index.h("a", { key: '6256c406f626c80740b3828ad796c2d9c6a2dd12', href: this.linkedin_url, title: "linkedin", target: "_blank" }, index.h("span", { key: '578f3967d86bf8f74188fc3224db8fe1ab16d7af', class: "icon", innerHTML: Icons.linkedin })), this.email && index.h("a", { key: 'b2500492b6166a38d03ed55cc2fa579bb8799492', href: "mailto:" + this.email, title: "email", target: "_blank" }, index.h("span", { key: 'd50edc4439ac7f7b112ab5bc5b338f4924daf65c', class: "icon", innerHTML: Icons.email })), this.phone && index.h("a", { key: '7ab9e6c89afeb905671372ee7aae9a1e9f06a1a2', href: "tel:" + this.phone, title: "phone", target: "_blank" }, index.h("span", { key: 'faaeb7a9792cd2f3e128fd0f66fe5ca83a964344', class: "icon", innerHTML: Icons.phone }))), this.website && index.h("a", { key: '81c55436f9485deb14d4c14013ad546a38ebee2e', class: "website", href: this.website, title: "website", target: "_blank" }, index.h("span", { key: '0f5b9ee00b590ed091c7d5c8d78bd53626b478ed', class: "icon", innerHTML: Icons.website }), this.website), this.show_follow && index.h("div", { key: 'de868cf709263d9186ba8e0583a6ea91325b54a5', class: "follow-action action" }, index.h("mdui-button", { key: 'b3703cf0f7e5a859ae86ce089f406d8bbaaace56' }, "Follow")), this.show_donate && index.h("div", { key: '8b369c0c89e07b83d9213dc400515f9f07445717', class: "donate-action action" }, index.h("mdui-button", { key: 'b07dae9b1858b8e8c3c74d4eb71d5c1393b9a6f4', variant: "outlined" }, "Donate")), this.show_become_member && index.h("div", { key: '415f6d63d4ff690142235f1839c834ad064cfbd0', class: "member-action action" }, index.h("mdui-button", { key: '5a8e11a1d60f64632b03a499f4c1661a8f0a2654', variant: "outlined" }, "Become Member")), this.show_send_message && index.h("div", { key: 'f4adb5e511c005c95b49fa5d9949187c19cca56b', class: "message-action action" }, index.h("mdui-button", { key: 'c939b0ff17e6016b626b0ce3de8a097ec09ed4b7', variant: "outlined" }, "Message")), this.show_stats && index.h("div", { key: '99e9fa639f38ecf8d866e22759a221d674c5f238', class: "stats" }, index.h("div", { key: '2502af7fe674e4ad0075ae7757031c38e066f40c', class: "stat" }, index.h("span", { key: '7d1a4874d3ab38fea5f5939c17d0e3a5a58ef9e4', class: "label" }, "Stories"), index.h("span", { key: '77ad010ed54e7365db39900967d8c548abaace29', class: "value" }, this.stories_count)), index.h("div", { key: 'cfd7d114851a2968eb1341ecf0e7bd32114f3498', class: "stat" }, index.h("span", { key: '7de7392a30c3709ee0e0af5a0677a679596d6544', class: "label" }, "Views"), index.h("span", { key: '49e4d206ebb6568a8c717bfef3a935d960dee24e', class: "value" }, this.views_count)), index.h("div", { key: '5d6b7ebc5904a39a219c138fdda8edadf15385ca', class: "stat" }, index.h("span", { key: 'f4edc920e1df2aeed6373ee0f01d5d4e4cb1e855', class: "label" }, "Followers"), index.h("span", { key: '505780cccbd88403a21232f931d2d1b009c6d6a9', class: "value" }, this.followers_count)), index.h("div", { key: '85a4da15bd3bb8ff8e3ddf671ca24b1f30a80031', class: "stat" }, index.h("span", { key: '428d9e401eb85df7071c39fb20225d3356ea1d38', class: "label" }, "Writers"), index.h("span", { key: 'e5e6da6667bfe76d4c65a5cb483bbf3250fd613b', class: "value" }, this.writers_count))), this.show_languages && this.languages.trim().length > 0 && index.h("div", { key: '55985eacd6e0144c13af83e63ad3bc0e6d7cc276', class: "languages" }, index.h("div", { key: '2b511a64cb5fe6ae6e4ed5679496c542a7e0888b', class: "title" }, "Languages"), index.h("div", { key: '60da68797c121c2124554e7fd625c74a626600fb', class: "pills" }, this.languages.split(',').map((language) => {
+        return (index.h(index.Host, { key: '5d67f7430ac063ab4130e44d872e96861869ff49' }, index.h("div", { key: '0a4407109ecc5510681192eddb59e01ac9a48ed6', class: "profile" }, index.h("div", { key: '67172778f1cd4c13111a1d89bc6d4c4ef9bf6707', class: "name" }, this.name), this.description && index.h("div", { key: 'e8641878e800019fc393d478662d6d0e935c8435', class: "description" }, this.description), this.location && index.h("div", { key: '1fb01a18c10d01f2200f4d17a5eafcce621fe139', class: "location" }, this.location), index.h("div", { key: '4e6e00384d21e05bc79cdba68fe4e69db0e9e2d6', class: "social" }, this.facebook_url && index.h("a", { key: 'a7bf20b5720747ce453a16cf8cae6612a1947d12', href: this.facebook_url, title: "facebook", target: "_blank" }, index.h("span", { key: 'e0b7de355d66cfccf4c8d7c989418ff500768a17', class: "icon", innerHTML: Icons.facebook })), this.twitter_url && index.h("a", { key: 'd202b950303a181b1e5e3d7231f1d21d404123f8', href: this.twitter_url, title: "twitter", target: "_blank" }, index.h("span", { key: '50cb83feb41ee8807855bb04612655d463b8e973', class: "icon", innerHTML: Icons.twitter })), this.linkedin_url && index.h("a", { key: '9ba30186191d46d93739ca89cd2dbe5f3f16735c', href: this.linkedin_url, title: "linkedin", target: "_blank" }, index.h("span", { key: 'aa90042d97e2696a664a2c2b4bed2fddd5b85ad2', class: "icon", innerHTML: Icons.linkedin })), this.email && index.h("a", { key: '1964d9113092dc68bd891b0c6f4e72c8daf98f19', href: "mailto:" + this.email, title: "email", target: "_blank" }, index.h("span", { key: 'fb492c3af46fa363f7e2b94fc696ff490dd9ad3d', class: "icon", innerHTML: Icons.email })), this.phone && index.h("a", { key: '460f2f347ddd9df7202e481f9ffae333cf611e0f', href: "tel:" + this.phone, title: "phone", target: "_blank" }, index.h("span", { key: '0e4e5723112eeb62deeb597685de33d40a4b8113', class: "icon", innerHTML: Icons.phone }))), this.website && index.h("a", { key: '10fe61545fef58405fdf94a0df5bac7d7a0d67eb', class: "website", href: this.website, title: "website", target: "_blank" }, index.h("span", { key: '2dbc3f42678806bfac36140ebe2a95b6d46104ab', class: "icon", innerHTML: Icons.website }), this.website), this.show_follow && index.h("div", { key: 'fcbf95c540c24c4b3f24397128ea9a5b60439f5d', class: "follow-action action" }, index.h("mdui-button", { key: '506b2bc1e3fa5c13a364947c807f7f28c56be4ae' }, "Follow")), this.show_donate && index.h("div", { key: '1152f24d79243f43294be81d25e081f4b39ed5ba', class: "donate-action action" }, index.h("mdui-button", { key: 'ec3d12b4365a1fae71527338895b6a010a5c6fdd', variant: "outlined" }, "Donate")), this.show_become_member && index.h("div", { key: 'd72972fe2ad850146a8caf7b7fef4d56c13b09d0', class: "member-action action" }, index.h("mdui-button", { key: 'a348761a9f3ce9c996aa5b45342d50ca07c84987', variant: "outlined" }, "Become Member")), this.show_send_message && index.h("div", { key: 'e85db3e4ac705eb7a20f46c7ba5ef846168ad95c', class: "message-action action" }, index.h("mdui-button", { key: '7f0feb17bd3beda95451d1b5765c41da0b3850f2', variant: "outlined" }, "Message")), this.show_stats && index.h("div", { key: 'e6c01688fe4d37273ab3d1bb10ce548dc2ab093d', class: "stats" }, index.h("div", { key: '151b8ac31d51f1daa59ed553fc3cea92e06c2f3b', class: "stat" }, index.h("span", { key: '7618898d58386b218bddab8d1ab04e1513f4d737', class: "label" }, "Stories"), index.h("span", { key: '0d9e4f914f7810637c24cb7f331635ffcc9743c7', class: "value" }, this.stories_count)), index.h("div", { key: '66fbc4ad7c56270de74e9f803aca72a60b73763b', class: "stat" }, index.h("span", { key: 'b5a995eb158cec61c55a5599ad5279d33289e7db', class: "label" }, "Views"), index.h("span", { key: '5afbe4d930a051f6cf69f74227876c7ea67b0c85', class: "value" }, this.views_count)), index.h("div", { key: '79a3c6cdff0bacd6ae242af0a543aa8cab6d6b0e', class: "stat" }, index.h("span", { key: 'bfe4c2cb54aef07d51732c3fb52715ff1f268f13', class: "label" }, "Followers"), index.h("span", { key: 'f6796ee0352ff0dc07dbe73b918fdfa1c4909658', class: "value" }, this.followers_count)), index.h("div", { key: 'cc0dbd846dd9414d50a778cf9baf0643101f31ae', class: "stat" }, index.h("span", { key: '32bad76197438152ab8344a0229db9d71c262692', class: "label" }, "Writers"), index.h("span", { key: '298209d09f9cf3114e7a456320525b8d5a1b0b83', class: "value" }, this.writers_count))), this.show_languages && this.languages.trim().length > 0 && index.h("div", { key: '25c0d536429f007798baff6d792f058c354d37ff', class: "languages" }, index.h("div", { key: '2b112c72e4c7f261c8f54e37d3f832051e19d700', class: "title" }, "Languages"), index.h("div", { key: '187f600961963a812a009f50304eb95ad33c9002', class: "pills" }, this.languages.split(',').map((language) => {
             return index.h("div", { class: "pill" }, language.trim());
-        }))), this.show_genres && this.genres.trim().length > 0 && index.h("div", { key: 'c4b7f1d5fa94041f5e5da220d84f1072820ce327', class: "genres" }, index.h("div", { key: '51c68c0b54b0218629b843255f555be23beb4c0d', class: "title" }, "Genres"), index.h("div", { key: '702cc49e448ac040eb71c5d3c35ae56688ba78e3', class: "pills" }, this.genres.split(',').map((genre) => {
+        }))), this.show_genres && this.genres.trim().length > 0 && index.h("div", { key: 'e59274c475bb6af4f4718d312978f6cbdd2ea186', class: "genres" }, index.h("div", { key: 'aedbc84e90ed4419f64332352bca9dfc28918d98', class: "title" }, "Genres"), index.h("div", { key: '87633f47f8b4d9da11a867cf2aa529f78bec43dd', class: "pills" }, this.genres.split(',').map((genre) => {
             return index.h("div", { class: "pill" }, genre.trim());
-        }))), this.show_member_since && this.member_since.trim().length > 0 && index.h("div", { key: 'a2bccf4bcb25a6e25665bcaca8541ddc847303df', class: "member_since" }, "Member Since: ", this.member_since.trim()))));
+        }))), this.show_member_since && this.member_since.trim().length > 0 && index.h("div", { key: 'd903c0ea88b5bdd0f32a810d61fdaa14d3465d1e', class: "member_since" }, "Member Since: ", this.member_since.trim()))));
     }
 };
 UrProfile.style = urProfileCss;

package/dist/cjs/ur-radio-button.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-DlgBfuIH.js');
+require('./radio-DWksGWLi.js');
+require('./component-style-BC5DdXyd.js');
+require('./directive-CxKj9eM_.js');
+require('./state-BClMM5R0.js');
+require('./class-map-Epaosh8c.js');
+require('./ref-Dnp-_rKJ.js');
+require('./get-DihLFVsH.js');
+require('./watch-MAiBzcfm.js');
+require('./attr-D_LyPdSc.js');
+require('./svg-tag-BC3DRit2.js');
+require('./index-DqsOXF7F.js');
+require('./extend-DbPiqimt.js');
+require('./has-slot-CDodaVHS.js');
+require('./ripple-mixin-CsKjDjw-.js');
+require('./children-B1QguDFM.js');
+require('./appendTo-DN8OV-GK.js');
+
+const urRadioButtonCss = ":host{display:block}:host mdui-radio.full-width{width:100%}";
+
+const UrRadioButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueSelected = index.createEvent(this, "valueSelected");
+        this.disabled = false;
+        this.checked = false;
+        this.value = '';
+        this.name = ''; // Name of the group
+        this.fullWidth = false;
+        this.handleClick = () => {
+            if (!this.disabled && !this.checked) {
+                // Emit event to let parent handle state change
+                this.valueSelected.emit({ value: this.value });
+            }
+        };
+    }
+    // Sync checked state with mdui-radio when prop changes
+    checkedChanged(newValue) {
+        var _a;
+        const radio = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('mdui-radio');
+        if (radio && radio.checked !== newValue) {
+            radio.checked = newValue;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '3a3fd806f9f6f0217cf62562e3410f46c9c1eeeb' }, index.h("mdui-radio", { key: '8189d97fe9a40a9cf88656fc6e90c5d926bc1f30', checked: this.checked, disabled: this.disabled, name: this.name, onClick: this.handleClick, class: this.fullWidth ? 'full-width' : '' }, index.h("slot", { key: '53faebb679e1e74094454d4e7eb923efceda58e3' }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["checkedChanged"]
+    }; }
+};
+UrRadioButton.style = urRadioButtonCss;
+
+exports.ur_radio_button = UrRadioButton;