@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.132 → 2.0.0-next.134
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +59 -49
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +11 -22
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js +8 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js.map +1 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts +6 -0
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts.map +1 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js +13 -2
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js.map +1 -1
- package/dist/components/user-menu/user-menu.d.ts +11 -6
- package/dist/components/user-menu/user-menu.d.ts.map +1 -1
- package/dist/components/user-menu/user-menu.js +38 -46
- package/dist/components/user-menu/user-menu.js.map +1 -1
- package/dist/generated/locales/es-419.d.ts +1 -5
- package/dist/generated/locales/es-419.d.ts.map +1 -1
- package/dist/generated/locales/es-419.js +1 -5
- package/dist/generated/locales/es-419.js.map +1 -1
- package/dist/generated/locales/fi-FI.d.ts +1 -5
- package/dist/generated/locales/fi-FI.d.ts.map +1 -1
- package/dist/generated/locales/fi-FI.js +1 -5
- package/dist/generated/locales/fi-FI.js.map +1 -1
- package/package.json +1 -1
- package/script/agent-docs/frontmatter.ts +1 -1
- package/script/generate-bundle-entry.ts +9 -4
- package/script/sync-agent-docs.test.ts +9 -0
- package/src/components/automation-button-readout-stack/automation-button-readout-stack.css +9 -1
- package/src/components/automation-button-readout-stack/automation-button-readout-stack.ts +15 -2
- package/src/components/user-menu/user-menu.stories.ts +23 -0
- package/src/components/user-menu/user-menu.ts +49 -62
- package/src/generated/locales/es-419.ts +1 -5
- package/src/generated/locales/fi-FI.ts +1 -5
package/custom-elements.json
CHANGED
|
@@ -4828,7 +4828,7 @@
|
|
|
4828
4828
|
{
|
|
4829
4829
|
"kind": "variable",
|
|
4830
4830
|
"name": "ObcAutomationButtonReadoutStack",
|
|
4831
|
-
"default": "class extends LitElement { constructor() { super(...arguments); this.readouts = []; this.tag = null; this.size = \"regular\"; this.idTagOrientation = \"top\"; } renderTag() { if (this.tag === null) return nothing; return html`<div class=\"tag\">${this.tag}</div>`; } renderValueContainer(type, icon, content) { return html`<div class=\"readout-item ${type}\"> ${icon} <div class=\"value-container\"> <div class=\"label-container\">${content}</div> </div> </div>`; } renderValueText(text) { return html`<span class=\"value-text\">${text}</span>`; } renderValue(readout) { const v = readout.value.toFixed(0); const zeroPadding = v.length < readout.nDigits ? \"0\".repeat(readout.nDigits - v.length) : \"\";
|
|
4831
|
+
"default": "class extends LitElement { constructor() { super(...arguments); this.readouts = []; this.tag = null; this.size = \"regular\"; this.idTagOrientation = \"top\"; } renderTag() { if (this.tag === null) return nothing; return html`<div class=\"tag\">${this.tag}</div>`; } renderValueContainer(type, icon, content) { return html`<div class=\"readout-item ${type}\"> ${icon} <div class=\"value-container\"> <div class=\"label-container\">${content}</div> </div> </div>`; } renderValueText(text) { return html`<span class=\"value-text\">${text}</span>`; } /** * Numeric readout with hinted zeros. * * The minus sign occupies a digit slot, so the readout stays `nDigits` wide * and the sign renders ahead of the hinted padding (`-05`, not `0-5`). */ renderValue(readout) { const v = readout.value.toFixed(0); const sign = v.startsWith(\"-\") ? \"-\" : \"\"; const digits = sign ? v.slice(1) : v; const zeroPadding = v.length < readout.nDigits ? \"0\".repeat(readout.nDigits - v.length) : \"\"; let directionIcon = nothing; if (readout.icon == \"arrow\") { if (readout.direction == \"up\") { directionIcon = html`<obi-arrow-up-google class=\"icon\" useCssColor ></obi-arrow-up-google>`; } else if (readout.direction == \"down\") { directionIcon = html`<obi-arrow-down-google class=\"icon\" useCssColor ></obi-arrow-down-google>`; } else if (readout.direction == \"left\") { directionIcon = html`<obi-arrow-left-google class=\"icon\" useCssColor ></obi-arrow-left-google>`; } else if (readout.direction == \"right\") { directionIcon = html`<obi-arrow-right-google class=\"icon\" useCssColor ></obi-arrow-right-google>`; } } else if (readout.icon == \"chevron\") { if (readout.direction == \"up\") { directionIcon = html`<obi-chevron-double-up-google class=\"icon\" useCssColor ></obi-chevron-double-up-google>`; } else if (readout.direction == \"down\") { directionIcon = html`<obi-chevron-double-down-google class=\"icon\" useCssColor ></obi-chevron-double-down-google>`; } else if (readout.direction == \"left\") { directionIcon = html`<obi-chevron-double-left-google class=\"icon\" useCssColor ></obi-chevron-double-left-google>`; } else if (readout.direction == \"right\") { directionIcon = html`<obi-chevron-double-right-google class=\"icon\" useCssColor ></obi-chevron-double-right-google>`; } } const content = html` <span class=\"value-text\" >${sign}${zeroPadding ? html`<span class=\"hinted-zero\" aria-hidden=\"true\" >${zeroPadding}</span >` : nothing}${digits}</span > <span class=\"unit\">${readout.unit}</span> `; return this.renderValueContainer(\"value\", directionIcon, content); } renderStateOff(readout) { let offIcon = html``; if (readout.hasIcon) { offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`; } const content = this.renderValueText(readout.value); return this.renderValueContainer(\"state-off\", offIcon, content); } renderStateOn(readout) { let onIcon = html``; if (readout.hasIcon) { onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`; } const content = this.renderValueText(readout.value); return this.renderValueContainer(\"state-on\", onIcon, content); } renderButton(readout) { const v = readout.value.toFixed(1); let temperatureIcon = html``; if (readout.hasIcon) { temperatureIcon = html`<obi-temperature-air class=\"icon\" useCssColor ></obi-temperature-air>`; } const content = html` ${this.renderValueText(v)} <span class=\"unit\">${readout.unit}</span> `; return html`<obc-button class=\"readout-button\" part=\"readout-button\"> ${this.renderValueContainer(\"button\", temperatureIcon, content)} </obc-button>`; } renderReadout(readout) { if (readout.type === \"value\") { return this.renderValue(readout); } else if (readout.type === \"state-on\") { return this.renderStateOn(readout); } else if (readout.type === \"state-off\") { return this.renderStateOff(readout); } else if (readout.type === \"button\") { return this.renderButton(readout); } else { throw new Error(\"Invalid readout type\"); } } render() { const displayableReadouts = this.readouts.filter( (readout) => readout.type === \"value\" || readout.type === \"state-off\" || readout.type === \"state-on\" || readout.type === \"button\" ); const renderedReadouts = displayableReadouts.map( (r) => this.renderReadout(r) ); const tag = this.renderTag(); const elements = []; if (this.idTagOrientation === \"top\") { elements.push(tag); elements.push(...renderedReadouts); } else { elements.push(...renderedReadouts); elements.push(tag); } return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`; } }"
|
|
4832
4832
|
}
|
|
4833
4833
|
],
|
|
4834
4834
|
"exports": [
|
|
@@ -8061,7 +8061,7 @@
|
|
|
8061
8061
|
{
|
|
8062
8062
|
"kind": "variable",
|
|
8063
8063
|
"name": "ObcUserMenu",
|
|
8064
|
-
"default": "class extends LitElement { constructor() { super(...arguments); this.type = \"sign-in\"; this.size = \"regular\"; this.hasRecentlySignedIn = false; this.username = \"\"; this.password = \"\"; this.usernameError = \"\"; this.passwordError = \"\"; this.recentUsers = []; this.signedInActions = []; } get defaultSignedInActions() { return [ { id: \"calendar\", label: msg(\"Calendar\") }, { id: \"log\", label: msg(\"Log\") }, { id: \"preferences\", label: msg(\"Preferences\") }, { id: \"user-account\", label: msg(\"User account\") } ]; } get defaultRecentUsers() { const label = msg(\"Username\"); return [ { initials: \"AB\", label }, { initials: \"CD\", label }, { initials: \"EF\", label } ]; } renderTextInput(placeholder, type = HTMLInputTypeAttribute.Text, value = \"\", onInput, errorText = \"\") { const isPassword = type === HTMLInputTypeAttribute.Password; return html` <obc-text-input-field .placeholder=${placeholder} .type=${type} .textAlign=${ObcTextInputFieldTextAlign.Left} .value=${value} .error=${Boolean(errorText)} .errorText=${errorText} .required=${true} .hasClearButton=${!isPassword} @input=${onInput} > </obc-text-input-field> `; } renderUserButtons(count, isLarge) { const size = isLarge ? Size.large : Size.regular; const users = (this.recentUsers.length ? this.recentUsers : this.defaultRecentUsers).slice(0, count); return html` <div class=${classMap({ users: true, large: isLarge, single: users.length === 1 })} > ${users.map( (user) => html` <obc-user-button .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${size} .initials=${user.initials} .label=${user.label} @click=${() => this.handleRecentUserClick(user)} ></obc-user-button> ` )} </div> `; } renderUserProfile(layout, size, initials, label) { const userButtonSize = size === \"large\" ? Size.large : Size.regular; const fallbackUser = this.recentUsers[0] ?? this.defaultRecentUsers[0]; const resolvedInitials = initials ?? this.userInitials ?? fallbackUser.initials; const resolvedLabel = label ?? this.userLabel ?? fallbackUser.label; return html` <div class=${classMap({ \"user-profile\": true, [layout]: true })} > <obc-user-button class=${classMap({ \"user-avatar\": true, [`size-${size}`]: true })} .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${userButtonSize} .initials=${resolvedInitials} .label=${resolvedLabel} ></obc-user-button> </div> `; } getSignedInActionIcon(actionId) { switch (actionId) { case \"calendar\": return html`<obi-calendar-google></obi-calendar-google>`; case \"log\": return html`<obi-log-open-google></obi-log-open-google>`; case \"preferences\": return html`<obi-settings-iec></obi-settings-iec>`; case \"user-account\": return html`<obi-user></obi-user>`; default: return nothing; } } normalizeActionId(actionId) { return actionId.trim().toLowerCase().replace(/[^a-z0-9]+/g, \"-\"); } handleSignedInActionClick(action) { this.dispatchEvent( new CustomEvent(\"signed-in-action-click\", { detail: { id: action.id, label: action.label } }) ); } handleRecentUserClick(user) { this.dispatchEvent( new CustomEvent(\"recent-user-click\", { detail: { initials: user.initials, label: user.label } }) ); } handleUsernameInput(event) { const target = event.target; this.username = target.value ?? \"\"; if (this.username) { this.usernameError = \"\"; } } handlePasswordInput(event) { const target = event.target; this.password = target.value ?? \"\"; if (this.password) { this.passwordError = \"\"; } } validateSignIn() { let valid = true; const needsUsername = this.type === \"sign-in\"; if (needsUsername && !this.username) { this.usernameError = msg(\"Username is required\"); valid = false; } if (!this.password) { this.passwordError = msg(\"Password is required\"); valid = false; } return valid; } handleSignInClick() { if (!this.validateSignIn()) { return; } this.dispatchEvent( new CustomEvent(\"sign-in-click\", { detail: { username: this.username, password: this.password } }) ); } handleSignOutClick() { this.dispatchEvent(new CustomEvent(\"sign-out-click\")); } renderSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError )} ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.hasRecentlySignedIn ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError )} ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> <div class=\"divider\" aria-hidden=\"true\"></div> ${this.hasRecentlySignedIn ? html` <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderUserSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> <div class=\"user-primary\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"fields\"> ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> </div> ${this.hasRecentlySignedIn ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderUserSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> <div class=\"divider\" aria-hidden=\"true\"></div> ${this.hasRecentlySignedIn ? html` <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderLoadingSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"vertical\", \"large\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderLoadingSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderSignedIn() { const actions = this.signedInActions.length ? this.signedInActions : this.defaultSignedInActions; return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-primary signed-in\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"nav-container\"> ${actions.map((action) => { const normalizedId = this.normalizeActionId(action.id); return html` <obc-navigation-item .label=${action.label} hasIcon @click=${() => this.handleSignedInActionClick(action)} > <span slot=\"icon\"> <slot name=\"signed-in-action-icon-${normalizedId}\"> ${this.getSignedInActionIcon(normalizedId)} </slot> </span> </obc-navigation-item> `; })} </div> <div class=\"button-container\"> <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } renderSignedInSmall() { const actions = this.signedInActions.length ? this.signedInActions : this.defaultSignedInActions; const primaryAction = actions[2]; return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"button-container\"> ${primaryAction ? html` <obc-button variant=${ButtonVariant.normal} fullWidth @click=${() => this.handleSignedInActionClick(primaryAction)} > ${primaryAction.label} </obc-button> ` : nothing} <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } render() { let content = nothing; if (this.type === \"sign-in\") { content = this.size === \"small\" ? this.renderSignInSmall() : this.renderSignIn(); } if (this.type === \"user-sign-in\") { content = this.size === \"small\" ? this.renderUserSignInSmall() : this.renderUserSignIn(); } if (this.type === \"loading-sign-in\") { content = this.size === \"small\" ? this.renderLoadingSignInSmall() : this.renderLoadingSignIn(); } if (this.type === \"signed-in\") { content = this.size === \"small\" ? this.renderSignedInSmall() : this.renderSignedIn(); } return html` <div class=${classMap({ card: true, [`size-${this.size}`]: true, [`type-${this.type}`]: true })} > ${content} </div> `; } }"
|
|
8064
|
+
"default": "class extends LitElement { constructor() { super(...arguments); this.type = \"sign-in\"; this.size = \"regular\"; this.hasRecentlySignedIn = false; this.username = \"\"; this.password = \"\"; this.usernameError = \"\"; this.passwordError = \"\"; this.recentUsers = []; this.signedInActions = []; } get showRecentUsers() { return this.hasRecentlySignedIn && this.recentUsers.length > 0; } renderTextInput(placeholder, type = HTMLInputTypeAttribute.Text, value = \"\", onInput, errorText = \"\") { const isPassword = type === HTMLInputTypeAttribute.Password; return html` <obc-text-input-field .placeholder=${placeholder} .type=${type} .textAlign=${ObcTextInputFieldTextAlign.Left} .value=${value} .error=${Boolean(errorText)} .errorText=${errorText} .required=${true} .hasClearButton=${!isPassword} @input=${onInput} > </obc-text-input-field> `; } renderUserButtons(count, isLarge) { const size = isLarge ? Size.large : Size.regular; const users = this.recentUsers.slice(0, count); return html` <div class=${classMap({ users: true, large: isLarge, single: users.length === 1 })} > ${users.map( (user) => html` <obc-user-button .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${size} .initials=${user.initials} .label=${user.label} @click=${() => this.handleRecentUserClick(user)} ></obc-user-button> ` )} </div> `; } renderUserProfile(layout, size) { if (!this.userInitials && !this.userLabel) { return nothing; } const userButtonSize = size === \"large\" ? Size.large : Size.regular; return html` <div class=${classMap({ \"user-profile\": true, [layout]: true })} > <obc-user-button class=${classMap({ \"user-avatar\": true, [`size-${size}`]: true })} .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${userButtonSize} .initials=${this.userInitials ?? \"\"} .label=${this.userLabel ?? \"\"} ></obc-user-button> </div> `; } getSignedInActionIcon(actionId) { switch (actionId) { case \"calendar\": return html`<obi-calendar-google></obi-calendar-google>`; case \"log\": return html`<obi-log-open-google></obi-log-open-google>`; case \"preferences\": return html`<obi-settings-iec></obi-settings-iec>`; case \"user-account\": return html`<obi-user></obi-user>`; default: return nothing; } } normalizeActionId(actionId) { return actionId.trim().toLowerCase().replace(/[^a-z0-9]+/g, \"-\"); } handleSignedInActionClick(action) { this.dispatchEvent( new CustomEvent(\"signed-in-action-click\", { detail: { id: action.id, label: action.label } }) ); } handleRecentUserClick(user) { this.dispatchEvent( new CustomEvent(\"recent-user-click\", { detail: { initials: user.initials, label: user.label } }) ); } handleUsernameInput(event) { const target = event.target; this.username = target.value ?? \"\"; if (this.username) { this.usernameError = \"\"; } } handlePasswordInput(event) { const target = event.target; this.password = target.value ?? \"\"; if (this.password) { this.passwordError = \"\"; } } validateSignIn() { let valid = true; const needsUsername = this.type === \"sign-in\"; if (needsUsername && !this.username) { this.usernameError = msg(\"Username is required\"); valid = false; } if (!this.password) { this.passwordError = msg(\"Password is required\"); valid = false; } return valid; } handleSignInClick() { if (!this.validateSignIn()) { return; } this.dispatchEvent( new CustomEvent(\"sign-in-click\", { detail: { username: this.username, password: this.password } }) ); } handleSignOutClick() { this.dispatchEvent(new CustomEvent(\"sign-out-click\")); } renderSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError )} ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError )} ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderUserSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> <div class=\"user-primary\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"fields\"> ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> </div> ${this.showRecentUsers ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderUserSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderLoadingSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"vertical\", \"large\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderLoadingSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderSignedIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-primary signed-in\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"divider\" aria-hidden=\"true\"></div> ${this.signedInActions.length ? html` <div class=\"nav-container\"> ${this.signedInActions.map((action) => { const normalizedId = this.normalizeActionId(action.id); return html` <obc-navigation-item .label=${action.label} hasIcon @click=${() => this.handleSignedInActionClick(action)} > <span slot=\"icon\"> <slot name=\"signed-in-action-icon-${normalizedId}\"> ${this.getSignedInActionIcon(normalizedId)} </slot> </span> </obc-navigation-item> `; })} </div> ` : nothing} <div class=\"button-container\"> <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } renderSignedInSmall() { const primaryAction = this.signedInActions.find( (action) => action.id === this.primaryActionId ); return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"button-container\"> ${primaryAction ? html` <obc-button variant=${ButtonVariant.normal} fullWidth @click=${() => this.handleSignedInActionClick(primaryAction)} > ${primaryAction.label} </obc-button> ` : nothing} <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } render() { let content = nothing; if (this.type === \"sign-in\") { content = this.size === \"small\" ? this.renderSignInSmall() : this.renderSignIn(); } if (this.type === \"user-sign-in\") { content = this.size === \"small\" ? this.renderUserSignInSmall() : this.renderUserSignIn(); } if (this.type === \"loading-sign-in\") { content = this.size === \"small\" ? this.renderLoadingSignInSmall() : this.renderLoadingSignIn(); } if (this.type === \"signed-in\") { content = this.size === \"small\" ? this.renderSignedInSmall() : this.renderSignedIn(); } return html` <div class=${classMap({ card: true, [`size-${this.size}`]: true, [`type-${this.type}`]: true })} > ${content} </div> `; } }"
|
|
8065
8065
|
}
|
|
8066
8066
|
],
|
|
8067
8067
|
"exports": [
|
|
@@ -44107,7 +44107,8 @@
|
|
|
44107
44107
|
"text": "AutomationButtonReadoutStackValue"
|
|
44108
44108
|
}
|
|
44109
44109
|
}
|
|
44110
|
-
]
|
|
44110
|
+
],
|
|
44111
|
+
"description": "Numeric readout with hinted zeros.\n\nThe minus sign occupies a digit slot, so the readout stays `nDigits` wide\nand the sign renders ahead of the hinted padding (`-05`, not `0-5`)."
|
|
44111
44112
|
},
|
|
44112
44113
|
{
|
|
44113
44114
|
"kind": "method",
|
|
@@ -64389,7 +64390,7 @@
|
|
|
64389
64390
|
"declarations": [
|
|
64390
64391
|
{
|
|
64391
64392
|
"kind": "class",
|
|
64392
|
-
"description": "`<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n\nProvides multiple layouts for authentication and account access states, including\nsign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n\n### Features\n- **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n- **Size Options:** Regular and small sizes for compact layouts.\n- **Recent Users:** Optional \"Recently signed in\" section for quick access.\n- **Navigation Actions:** Signed-in state
|
|
64393
|
+
"description": "`<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n\nProvides multiple layouts for authentication and account access states, including\nsign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n\n### Features\n- **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n- **Size Options:** Regular and small sizes for compact layouts.\n- **Recent Users:** Optional \"Recently signed in\" section for quick access.\n- **Navigation Actions:** Signed-in state lists the actions it is given.\n\n### Variants\n- `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n- `size`: `regular`, `small`\n\n### Usage Guidelines\nUse `obc-user-menu` in authentication or account panels where quick access to\nsign-in, profile, or account actions is needed. The `user-sign-in` type is\nbest for fast re-auth flows; `loading-sign-in` is for pending auth states.\n\n### Properties and Configuration\n- `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n- `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n- `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n Defaults to `false`.\n- `username` (`string`): Current username value for sign-in layouts.\n- `password` (`string`): Current password value for sign-in layouts.\n- `usernameError` (`string`): Error message for the username field.\n- `passwordError` (`string`): Error message for the password field.\n- `userInitials` (`string`): Initials for the primary user profile.\n- `userLabel` (`string`): Label for the primary user profile.\n- `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n \"Recently signed in\" section. Empty renders no section.\n- `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n signed-in navigation list. Empty renders no actions.\n- `primaryActionId` (`string`): Id of the action promoted to a button in the\n small signed-in layout.\n\n### Events\n- `sign-in-click` – Fired when a sign-in button is clicked.\n- `sign-out-click` – Fired when the sign-out button is clicked.\n- `signed-in-action-click` – Fired when a signed-in action is clicked.\n- `recent-user-click` – Fired when a recent user button is clicked.\n\n### Slots\n- `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n `{id}` is the normalized action id.\n\n### Example\n```html\n<obc-user-menu\n type=\"user-sign-in\"\n size=\"small\"\n hasRecentlySignedIn=\"false\"\n userInitials=\"JD\"\n userLabel=\"John Doe\"\n></obc-user-menu>\n```",
|
|
64393
64394
|
"name": "ObcUserMenu",
|
|
64394
64395
|
"slots": [
|
|
64395
64396
|
{
|
|
@@ -64495,13 +64496,15 @@
|
|
|
64495
64496
|
},
|
|
64496
64497
|
{
|
|
64497
64498
|
"kind": "field",
|
|
64498
|
-
"name": "
|
|
64499
|
-
"
|
|
64500
|
-
|
|
64499
|
+
"name": "primaryActionId",
|
|
64500
|
+
"type": {
|
|
64501
|
+
"text": "string | undefined"
|
|
64502
|
+
},
|
|
64503
|
+
"description": "Id of the action promoted to a button in the small signed-in layout."
|
|
64501
64504
|
},
|
|
64502
64505
|
{
|
|
64503
64506
|
"kind": "field",
|
|
64504
|
-
"name": "
|
|
64507
|
+
"name": "showRecentUsers",
|
|
64505
64508
|
"privacy": "private",
|
|
64506
64509
|
"readonly": true
|
|
64507
64510
|
},
|
|
@@ -64575,20 +64578,6 @@
|
|
|
64575
64578
|
"type": {
|
|
64576
64579
|
"text": "'large' | 'regular'"
|
|
64577
64580
|
}
|
|
64578
|
-
},
|
|
64579
|
-
{
|
|
64580
|
-
"name": "initials",
|
|
64581
|
-
"optional": true,
|
|
64582
|
-
"type": {
|
|
64583
|
-
"text": "string"
|
|
64584
|
-
}
|
|
64585
|
-
},
|
|
64586
|
-
{
|
|
64587
|
-
"name": "label",
|
|
64588
|
-
"optional": true,
|
|
64589
|
-
"type": {
|
|
64590
|
-
"text": "string"
|
|
64591
|
-
}
|
|
64592
64581
|
}
|
|
64593
64582
|
]
|
|
64594
64583
|
},
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js
CHANGED
|
@@ -59,7 +59,14 @@ const compentStyle = css`* {
|
|
|
59
59
|
display: flex;
|
|
60
60
|
justify-content: center;
|
|
61
61
|
align-items: center;
|
|
62
|
-
gap:
|
|
62
|
+
gap: 0;
|
|
63
|
+
}
|
|
64
|
+
.readout-stack .value-text .hinted-zero {
|
|
65
|
+
color: var(
|
|
66
|
+
--obc-automation-button-readout-stack-hinted-color,
|
|
67
|
+
var(--element-disabled-color)
|
|
68
|
+
);
|
|
69
|
+
font-weight: var(--global-typography-generic-l-font-weight-regular);
|
|
63
70
|
}
|
|
64
71
|
.readout-stack.small .readout-item {
|
|
65
72
|
font-family: var(--global-typography-font-family);
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button-readout-stack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"automation-button-readout-stack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts
CHANGED
|
@@ -56,6 +56,12 @@ export declare class ObcAutomationButtonReadoutStack extends LitElement {
|
|
|
56
56
|
renderTag(): typeof nothing | HTMLTemplateResult;
|
|
57
57
|
private renderValueContainer;
|
|
58
58
|
private renderValueText;
|
|
59
|
+
/**
|
|
60
|
+
* Numeric readout with hinted zeros.
|
|
61
|
+
*
|
|
62
|
+
* The minus sign occupies a digit slot, so the readout stays `nDigits` wide
|
|
63
|
+
* and the sign renders ahead of the hinted padding (`-05`, not `0-5`).
|
|
64
|
+
*/
|
|
59
65
|
renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult;
|
|
60
66
|
renderStateOff(readout: AutomationButtonReadoutStackStateOff): HTMLTemplateResult;
|
|
61
67
|
renderStateOn(readout: AutomationButtonReadoutStackStateOn): HTMLTemplateResult;
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button-readout-stack.d.ts","sourceRoot":"","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAI7E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,oBAAY,gCAAgC;IAC1C,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oCAAoC;IACnD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,4BAA4B,GACpC,iCAAiC,GACjC,mCAAmC,GACnC,oCAAoC,GACpC,kCAAkC,CAAC;AAEvC;;GAEG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IAE7D,QAAQ,EAAE,4BAA4B,EAAE,CAAM;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,IAAI,EAAE,gCAAgC,CACP;IAC/B,gBAAgB,EAAE,gBAAgB,CAAwB;IAEtE,SAAS,IAAI,OAAO,OAAO,GAAG,kBAAkB;IAMhD,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,eAAe;IAIvB,WAAW,CAAC,OAAO,EAAE,iCAAiC,GAAG,kBAAkB;
|
|
1
|
+
{"version":3,"file":"automation-button-readout-stack.d.ts","sourceRoot":"","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAI7E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,oBAAY,gCAAgC;IAC1C,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oCAAoC;IACnD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,4BAA4B,GACpC,iCAAiC,GACjC,mCAAmC,GACnC,oCAAoC,GACpC,kCAAkC,CAAC;AAEvC;;GAEG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IAE7D,QAAQ,EAAE,4BAA4B,EAAE,CAAM;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,IAAI,EAAE,gCAAgC,CACP;IAC/B,gBAAgB,EAAE,gBAAgB,CAAwB;IAEtE,SAAS,IAAI,OAAO,OAAO,GAAG,kBAAkB;IAMhD,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,eAAe;IAIvB;;;;;OAKG;IACH,WAAW,CAAC,OAAO,EAAE,iCAAiC,GAAG,kBAAkB;IAmE3E,cAAc,CACZ,OAAO,EAAE,oCAAoC,GAC5C,kBAAkB;IAUrB,aAAa,CACX,OAAO,EAAE,mCAAmC,GAC3C,kBAAkB;IAUrB,YAAY,CACV,OAAO,EAAE,kCAAkC,GAC1C,kBAAkB;IAqBrB,aAAa,CAAC,OAAO,EAAE,4BAA4B,GAAG,kBAAkB;IAc/D,MAAM;IA0Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF"}
|
|
@@ -58,10 +58,17 @@ let ObcAutomationButtonReadoutStack = class extends LitElement {
|
|
|
58
58
|
renderValueText(text) {
|
|
59
59
|
return html`<span class="value-text">${text}</span>`;
|
|
60
60
|
}
|
|
61
|
+
/**
|
|
62
|
+
* Numeric readout with hinted zeros.
|
|
63
|
+
*
|
|
64
|
+
* The minus sign occupies a digit slot, so the readout stays `nDigits` wide
|
|
65
|
+
* and the sign renders ahead of the hinted padding (`-05`, not `0-5`).
|
|
66
|
+
*/
|
|
61
67
|
renderValue(readout) {
|
|
62
68
|
const v = readout.value.toFixed(0);
|
|
69
|
+
const sign = v.startsWith("-") ? "-" : "";
|
|
70
|
+
const digits = sign ? v.slice(1) : v;
|
|
63
71
|
const zeroPadding = v.length < readout.nDigits ? "0".repeat(readout.nDigits - v.length) : "";
|
|
64
|
-
const paddedValue = zeroPadding + v;
|
|
65
72
|
let directionIcon = nothing;
|
|
66
73
|
if (readout.icon == "arrow") {
|
|
67
74
|
if (readout.direction == "up") {
|
|
@@ -109,7 +116,11 @@ let ObcAutomationButtonReadoutStack = class extends LitElement {
|
|
|
109
116
|
}
|
|
110
117
|
}
|
|
111
118
|
const content = html`
|
|
112
|
-
|
|
119
|
+
<span class="value-text"
|
|
120
|
+
>${sign}${zeroPadding ? html`<span class="hinted-zero" aria-hidden="true"
|
|
121
|
+
>${zeroPadding}</span
|
|
122
|
+
>` : nothing}${digits}</span
|
|
123
|
+
>
|
|
113
124
|
<span class="unit">${readout.unit}</span>
|
|
114
125
|
`;
|
|
115
126
|
return this.renderValueContainer("value", directionIcon, content);
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button-readout-stack.js","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './automation-button-readout-stack.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-arrow-up-google.js';\nimport '../../icons/icon-arrow-down-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-on.js';\nimport '../../icons/icon-temperature-air.js';\nimport '../button/button.js';\n\nexport enum AutomationButtonReadoutStackSize {\n small = 'small',\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\nexport enum IdTagOrientation {\n top = 'top',\n bottom = 'bottom',\n}\n\nexport interface AutomationButtonReadoutStackValue {\n type: 'value';\n value: number;\n nDigits: number;\n unit: string;\n direction: 'up' | 'down' | 'left' | 'right' | 'none';\n icon: 'none' | 'arrow' | 'chevron';\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n type: 'state-on';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n type: 'state-off';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackButton {\n type: 'button';\n value: number;\n hasIcon: boolean;\n unit: string;\n}\n\nexport type AutomationButtonReadoutStack =\n | AutomationButtonReadoutStackValue\n | AutomationButtonReadoutStackStateOn\n | AutomationButtonReadoutStackStateOff\n | AutomationButtonReadoutStackButton;\n\n/**\n * @experimental\n */\n@customElement('obc-automation-button-readout-stack')\nexport class ObcAutomationButtonReadoutStack extends LitElement {\n @property({type: Array, attribute: false})\n readouts: AutomationButtonReadoutStack[] = [];\n @property({type: String}) tag: string | null = null;\n @property() size: AutomationButtonReadoutStackSize =\n AutomationButtonReadoutStackSize.regular;\n @property() idTagOrientation: IdTagOrientation = IdTagOrientation.top;\n\n renderTag(): typeof nothing | HTMLTemplateResult {\n if (this.tag === null) return nothing;\n\n return html`<div class=\"tag\">${this.tag}</div>`;\n }\n\n private renderValueContainer(\n type: string,\n icon: HTMLTemplateResult | typeof nothing,\n content: HTMLTemplateResult\n ): HTMLTemplateResult {\n return html`<div class=\"readout-item ${type}\">\n ${icon}\n <div class=\"value-container\">\n <div class=\"label-container\">${content}</div>\n </div>\n </div>`;\n }\n\n private renderValueText(text: string): HTMLTemplateResult {\n return html`<span class=\"value-text\">${text}</span>`;\n }\n\n renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n const v = readout.value.toFixed(0);\n const zeroPadding =\n v.length < readout.nDigits ? '0'.repeat(readout.nDigits - v.length) : '';\n const paddedValue = zeroPadding + v;\n\n let directionIcon: HTMLTemplateResult | typeof nothing = nothing;\n if (readout.icon == 'arrow') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-arrow-up-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-arrow-down-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-arrow-left-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-arrow-right-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-right-google>`;\n }\n } else if (readout.icon == 'chevron') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-chevron-double-up-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-chevron-double-down-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-chevron-double-left-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-chevron-double-right-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-right-google>`;\n }\n }\n const content = html`\n ${this.renderValueText(paddedValue)}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return this.renderValueContainer('value', directionIcon, content);\n }\n\n renderStateOff(\n readout: AutomationButtonReadoutStackStateOff\n ): HTMLTemplateResult {\n let offIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-off', offIcon, content);\n }\n\n renderStateOn(\n readout: AutomationButtonReadoutStackStateOn\n ): HTMLTemplateResult {\n let onIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-on', onIcon, content);\n }\n\n renderButton(\n readout: AutomationButtonReadoutStackButton\n ): HTMLTemplateResult {\n const v = readout.value.toFixed(1); // Format as 000.0\n\n let temperatureIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n temperatureIcon = html`<obi-temperature-air\n class=\"icon\"\n useCssColor\n ></obi-temperature-air>`;\n }\n\n const content = html`\n ${this.renderValueText(v)}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return html`<obc-button class=\"readout-button\" part=\"readout-button\">\n ${this.renderValueContainer('button', temperatureIcon, content)}\n </obc-button>`;\n }\n\n renderReadout(readout: AutomationButtonReadoutStack): HTMLTemplateResult {\n if (readout.type === 'value') {\n return this.renderValue(readout);\n } else if (readout.type === 'state-on') {\n return this.renderStateOn(readout);\n } else if (readout.type === 'state-off') {\n return this.renderStateOff(readout);\n } else if (readout.type === 'button') {\n return this.renderButton(readout);\n } else {\n throw new Error('Invalid readout type');\n }\n }\n\n override render() {\n const displayableReadouts = this.readouts.filter(\n (readout) =>\n readout.type === 'value' ||\n readout.type === 'state-off' ||\n readout.type === 'state-on' ||\n readout.type === 'button'\n );\n\n const renderedReadouts = displayableReadouts.map((r) =>\n this.renderReadout(r)\n );\n const tag = this.renderTag();\n const elements: unknown[] = [];\n\n if (this.idTagOrientation === IdTagOrientation.top) {\n elements.push(tag);\n elements.push(...renderedReadouts);\n } else {\n elements.push(...renderedReadouts);\n elements.push(tag);\n }\n\n return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-button-readout-stack': ObcAutomationButtonReadoutStack;\n }\n}\n"],"names":["AutomationButtonReadoutStackSize","IdTagOrientation"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"automation-button-readout-stack.js","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './automation-button-readout-stack.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-arrow-up-google.js';\nimport '../../icons/icon-arrow-down-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-on.js';\nimport '../../icons/icon-temperature-air.js';\nimport '../button/button.js';\n\nexport enum AutomationButtonReadoutStackSize {\n small = 'small',\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\nexport enum IdTagOrientation {\n top = 'top',\n bottom = 'bottom',\n}\n\nexport interface AutomationButtonReadoutStackValue {\n type: 'value';\n value: number;\n nDigits: number;\n unit: string;\n direction: 'up' | 'down' | 'left' | 'right' | 'none';\n icon: 'none' | 'arrow' | 'chevron';\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n type: 'state-on';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n type: 'state-off';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackButton {\n type: 'button';\n value: number;\n hasIcon: boolean;\n unit: string;\n}\n\nexport type AutomationButtonReadoutStack =\n | AutomationButtonReadoutStackValue\n | AutomationButtonReadoutStackStateOn\n | AutomationButtonReadoutStackStateOff\n | AutomationButtonReadoutStackButton;\n\n/**\n * @experimental\n */\n@customElement('obc-automation-button-readout-stack')\nexport class ObcAutomationButtonReadoutStack extends LitElement {\n @property({type: Array, attribute: false})\n readouts: AutomationButtonReadoutStack[] = [];\n @property({type: String}) tag: string | null = null;\n @property() size: AutomationButtonReadoutStackSize =\n AutomationButtonReadoutStackSize.regular;\n @property() idTagOrientation: IdTagOrientation = IdTagOrientation.top;\n\n renderTag(): typeof nothing | HTMLTemplateResult {\n if (this.tag === null) return nothing;\n\n return html`<div class=\"tag\">${this.tag}</div>`;\n }\n\n private renderValueContainer(\n type: string,\n icon: HTMLTemplateResult | typeof nothing,\n content: HTMLTemplateResult\n ): HTMLTemplateResult {\n return html`<div class=\"readout-item ${type}\">\n ${icon}\n <div class=\"value-container\">\n <div class=\"label-container\">${content}</div>\n </div>\n </div>`;\n }\n\n private renderValueText(text: string): HTMLTemplateResult {\n return html`<span class=\"value-text\">${text}</span>`;\n }\n\n /**\n * Numeric readout with hinted zeros.\n *\n * The minus sign occupies a digit slot, so the readout stays `nDigits` wide\n * and the sign renders ahead of the hinted padding (`-05`, not `0-5`).\n */\n renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n const v = readout.value.toFixed(0);\n const sign = v.startsWith('-') ? '-' : '';\n const digits = sign ? v.slice(1) : v;\n const zeroPadding =\n v.length < readout.nDigits ? '0'.repeat(readout.nDigits - v.length) : '';\n\n let directionIcon: HTMLTemplateResult | typeof nothing = nothing;\n if (readout.icon == 'arrow') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-arrow-up-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-arrow-down-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-arrow-left-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-arrow-right-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-right-google>`;\n }\n } else if (readout.icon == 'chevron') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-chevron-double-up-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-chevron-double-down-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-chevron-double-left-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-chevron-double-right-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-right-google>`;\n }\n }\n const content = html`\n <span class=\"value-text\"\n >${sign}${zeroPadding\n ? html`<span class=\"hinted-zero\" aria-hidden=\"true\"\n >${zeroPadding}</span\n >`\n : nothing}${digits}</span\n >\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return this.renderValueContainer('value', directionIcon, content);\n }\n\n renderStateOff(\n readout: AutomationButtonReadoutStackStateOff\n ): HTMLTemplateResult {\n let offIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-off', offIcon, content);\n }\n\n renderStateOn(\n readout: AutomationButtonReadoutStackStateOn\n ): HTMLTemplateResult {\n let onIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-on', onIcon, content);\n }\n\n renderButton(\n readout: AutomationButtonReadoutStackButton\n ): HTMLTemplateResult {\n const v = readout.value.toFixed(1); // Format as 000.0\n\n let temperatureIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n temperatureIcon = html`<obi-temperature-air\n class=\"icon\"\n useCssColor\n ></obi-temperature-air>`;\n }\n\n const content = html`\n ${this.renderValueText(v)}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return html`<obc-button class=\"readout-button\" part=\"readout-button\">\n ${this.renderValueContainer('button', temperatureIcon, content)}\n </obc-button>`;\n }\n\n renderReadout(readout: AutomationButtonReadoutStack): HTMLTemplateResult {\n if (readout.type === 'value') {\n return this.renderValue(readout);\n } else if (readout.type === 'state-on') {\n return this.renderStateOn(readout);\n } else if (readout.type === 'state-off') {\n return this.renderStateOff(readout);\n } else if (readout.type === 'button') {\n return this.renderButton(readout);\n } else {\n throw new Error('Invalid readout type');\n }\n }\n\n override render() {\n const displayableReadouts = this.readouts.filter(\n (readout) =>\n readout.type === 'value' ||\n readout.type === 'state-off' ||\n readout.type === 'state-on' ||\n readout.type === 'button'\n );\n\n const renderedReadouts = displayableReadouts.map((r) =>\n this.renderReadout(r)\n );\n const tag = this.renderTag();\n const elements: unknown[] = [];\n\n if (this.idTagOrientation === IdTagOrientation.top) {\n elements.push(tag);\n elements.push(...renderedReadouts);\n } else {\n elements.push(...renderedReadouts);\n elements.push(tag);\n }\n\n return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-button-readout-stack': ObcAutomationButtonReadoutStack;\n }\n}\n"],"names":["AutomationButtonReadoutStackSize","IdTagOrientation"],"mappings":"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"}
|
|
@@ -36,7 +36,7 @@ export type ObcUserMenuSignedInAction = {
|
|
|
36
36
|
* - **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.
|
|
37
37
|
* - **Size Options:** Regular and small sizes for compact layouts.
|
|
38
38
|
* - **Recent Users:** Optional "Recently signed in" section for quick access.
|
|
39
|
-
* - **Navigation Actions:** Signed-in state
|
|
39
|
+
* - **Navigation Actions:** Signed-in state lists the actions it is given.
|
|
40
40
|
*
|
|
41
41
|
* ### Variants
|
|
42
42
|
* - `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`
|
|
@@ -51,7 +51,7 @@ export type ObcUserMenuSignedInAction = {
|
|
|
51
51
|
* - `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.
|
|
52
52
|
* - `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.
|
|
53
53
|
* - `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.
|
|
54
|
-
* Defaults to `
|
|
54
|
+
* Defaults to `false`.
|
|
55
55
|
* - `username` (`string`): Current username value for sign-in layouts.
|
|
56
56
|
* - `password` (`string`): Current password value for sign-in layouts.
|
|
57
57
|
* - `usernameError` (`string`): Error message for the username field.
|
|
@@ -59,9 +59,11 @@ export type ObcUserMenuSignedInAction = {
|
|
|
59
59
|
* - `userInitials` (`string`): Initials for the primary user profile.
|
|
60
60
|
* - `userLabel` (`string`): Label for the primary user profile.
|
|
61
61
|
* - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the
|
|
62
|
-
* "Recently signed in" section.
|
|
62
|
+
* "Recently signed in" section. Empty renders no section.
|
|
63
63
|
* - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the
|
|
64
|
-
* signed-in navigation list.
|
|
64
|
+
* signed-in navigation list. Empty renders no actions.
|
|
65
|
+
* - `primaryActionId` (`string`): Id of the action promoted to a button in the
|
|
66
|
+
* small signed-in layout.
|
|
65
67
|
*
|
|
66
68
|
* ### Events
|
|
67
69
|
* - `sign-in-click` – Fired when a sign-in button is clicked.
|
|
@@ -103,6 +105,8 @@ export type ObcUserMenuSignedInAction = {
|
|
|
103
105
|
* @property recentUsers - Recent users for the "Recently signed in" section.
|
|
104
106
|
* @property signedInActions - Actions shown in the signed-in navigation list.
|
|
105
107
|
* @availableWhen signedInActions type==signedIn
|
|
108
|
+
* @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.
|
|
109
|
+
* @availableWhen primaryActionId type==signedIn && size==small
|
|
106
110
|
* @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).
|
|
107
111
|
* @fires {CustomEvent<{username: string, password: string}>} sign-in-click - Fired when a sign-in button is clicked.
|
|
108
112
|
* @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.
|
|
@@ -133,8 +137,9 @@ export declare class ObcUserMenu extends LitElement {
|
|
|
133
137
|
recentUsers: ObcUserMenuUser[];
|
|
134
138
|
/** Actions shown in the signed-in navigation list. */
|
|
135
139
|
signedInActions: ObcUserMenuSignedInAction[];
|
|
136
|
-
|
|
137
|
-
|
|
140
|
+
/** Id of the action promoted to a button in the small signed-in layout. */
|
|
141
|
+
primaryActionId?: string;
|
|
142
|
+
private get showRecentUsers();
|
|
138
143
|
private renderTextInput;
|
|
139
144
|
private renderUserButtons;
|
|
140
145
|
private renderUserProfile;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../src/components/user-menu/user-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAalC,oBAAY,eAAe;IACzB,MAAM,YAAY;IAClB,UAAU,iBAAiB;IAC3B,aAAa,oBAAoB;IACjC,QAAQ,cAAc;CACvB;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../src/components/user-menu/user-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAalC,oBAAY,eAAe;IACzB,MAAM,YAAY;IAClB,UAAU,iBAAiB;IAC3B,aAAa,oBAAoB;IACjC,QAAQ,cAAc;CACvB;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACf,IAAI,EAAE,eAAe,CAA0B;IAE/C,IAAI,EAAE,eAAe,CAA2B;IAG1E,mBAAmB,UAAS;IAEF,QAAQ,SAAM;IAEd,QAAQ,SAAM;IAEd,aAAa,SAAM;IAEnB,aAAa,SAAM;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAG7C,WAAW,EAAE,eAAe,EAAE,CAAM;IAGpC,eAAe,EAAE,yBAAyB,EAAE,CAAM;IAExB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEnD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,iBAAiB;IA8BzB,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IA2CpB,OAAO,CAAC,iBAAiB;IA4CzB,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,qBAAqB;IAwC7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,mBAAmB;IAkClB,MAAM;IAwCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
|
|
@@ -48,21 +48,8 @@ let ObcUserMenu = class extends LitElement {
|
|
|
48
48
|
this.recentUsers = [];
|
|
49
49
|
this.signedInActions = [];
|
|
50
50
|
}
|
|
51
|
-
get
|
|
52
|
-
return
|
|
53
|
-
{ id: "calendar", label: msg("Calendar") },
|
|
54
|
-
{ id: "log", label: msg("Log") },
|
|
55
|
-
{ id: "preferences", label: msg("Preferences") },
|
|
56
|
-
{ id: "user-account", label: msg("User account") }
|
|
57
|
-
];
|
|
58
|
-
}
|
|
59
|
-
get defaultRecentUsers() {
|
|
60
|
-
const label = msg("Username");
|
|
61
|
-
return [
|
|
62
|
-
{ initials: "AB", label },
|
|
63
|
-
{ initials: "CD", label },
|
|
64
|
-
{ initials: "EF", label }
|
|
65
|
-
];
|
|
51
|
+
get showRecentUsers() {
|
|
52
|
+
return this.hasRecentlySignedIn && this.recentUsers.length > 0;
|
|
66
53
|
}
|
|
67
54
|
renderTextInput(placeholder, type = HTMLInputTypeAttribute.Text, value = "", onInput, errorText = "") {
|
|
68
55
|
const isPassword = type === HTMLInputTypeAttribute.Password;
|
|
@@ -83,7 +70,7 @@ let ObcUserMenu = class extends LitElement {
|
|
|
83
70
|
}
|
|
84
71
|
renderUserButtons(count, isLarge) {
|
|
85
72
|
const size = isLarge ? Size.large : Size.regular;
|
|
86
|
-
const users =
|
|
73
|
+
const users = this.recentUsers.slice(0, count);
|
|
87
74
|
return html`
|
|
88
75
|
<div
|
|
89
76
|
class=${classMap({
|
|
@@ -107,11 +94,11 @@ let ObcUserMenu = class extends LitElement {
|
|
|
107
94
|
</div>
|
|
108
95
|
`;
|
|
109
96
|
}
|
|
110
|
-
renderUserProfile(layout, size
|
|
97
|
+
renderUserProfile(layout, size) {
|
|
98
|
+
if (!this.userInitials && !this.userLabel) {
|
|
99
|
+
return nothing;
|
|
100
|
+
}
|
|
111
101
|
const userButtonSize = size === "large" ? Size.large : Size.regular;
|
|
112
|
-
const fallbackUser = this.recentUsers[0] ?? this.defaultRecentUsers[0];
|
|
113
|
-
const resolvedInitials = initials ?? this.userInitials ?? fallbackUser.initials;
|
|
114
|
-
const resolvedLabel = label ?? this.userLabel ?? fallbackUser.label;
|
|
115
102
|
return html`
|
|
116
103
|
<div
|
|
117
104
|
class=${classMap({
|
|
@@ -127,8 +114,8 @@ let ObcUserMenu = class extends LitElement {
|
|
|
127
114
|
.variant=${Variant.initials}
|
|
128
115
|
.styleType=${StyleType.normal}
|
|
129
116
|
.size=${userButtonSize}
|
|
130
|
-
.initials=${
|
|
131
|
-
.label=${
|
|
117
|
+
.initials=${this.userInitials ?? ""}
|
|
118
|
+
.label=${this.userLabel ?? ""}
|
|
132
119
|
></obc-user-button>
|
|
133
120
|
</div>
|
|
134
121
|
`;
|
|
@@ -232,7 +219,7 @@ let ObcUserMenu = class extends LitElement {
|
|
|
232
219
|
${msg("Sign in")}
|
|
233
220
|
</obc-button>
|
|
234
221
|
</div>
|
|
235
|
-
${this.
|
|
222
|
+
${this.showRecentUsers ? html`
|
|
236
223
|
<div class="recent-container">
|
|
237
224
|
<div class="title-container">
|
|
238
225
|
<div class="subtitle">${msg("Recently signed in")}</div>
|
|
@@ -272,8 +259,8 @@ let ObcUserMenu = class extends LitElement {
|
|
|
272
259
|
${msg("Sign in")}
|
|
273
260
|
</obc-button>
|
|
274
261
|
</div>
|
|
275
|
-
|
|
276
|
-
|
|
262
|
+
${this.showRecentUsers ? html`
|
|
263
|
+
<div class="divider" aria-hidden="true"></div>
|
|
277
264
|
<div class="recent-container recent">
|
|
278
265
|
<div class="title-container">
|
|
279
266
|
<div class="subtitle">${msg("Recent")}</div>
|
|
@@ -311,7 +298,7 @@ let ObcUserMenu = class extends LitElement {
|
|
|
311
298
|
</obc-button>
|
|
312
299
|
</div>
|
|
313
300
|
</div>
|
|
314
|
-
${this.
|
|
301
|
+
${this.showRecentUsers ? html`
|
|
315
302
|
<div class="recent-container">
|
|
316
303
|
<div class="title-container">
|
|
317
304
|
<div class="subtitle">${msg("Recently signed in")}</div>
|
|
@@ -347,8 +334,8 @@ let ObcUserMenu = class extends LitElement {
|
|
|
347
334
|
${msg("Sign in")}
|
|
348
335
|
</obc-button>
|
|
349
336
|
</div>
|
|
350
|
-
|
|
351
|
-
|
|
337
|
+
${this.showRecentUsers ? html`
|
|
338
|
+
<div class="divider" aria-hidden="true"></div>
|
|
352
339
|
<div class="recent-container recent">
|
|
353
340
|
<div class="title-container">
|
|
354
341
|
<div class="subtitle">${msg("Recent")}</div>
|
|
@@ -393,7 +380,6 @@ let ObcUserMenu = class extends LitElement {
|
|
|
393
380
|
`;
|
|
394
381
|
}
|
|
395
382
|
renderSignedIn() {
|
|
396
|
-
const actions = this.signedInActions.length ? this.signedInActions : this.defaultSignedInActions;
|
|
397
383
|
return html`
|
|
398
384
|
<div class="title-container">
|
|
399
385
|
<h3 class="title">${msg("User")}</h3>
|
|
@@ -402,24 +388,26 @@ let ObcUserMenu = class extends LitElement {
|
|
|
402
388
|
${this.renderUserProfile("vertical", "large")}
|
|
403
389
|
</div>
|
|
404
390
|
<div class="divider" aria-hidden="true"></div>
|
|
405
|
-
|
|
406
|
-
|
|
391
|
+
${this.signedInActions.length ? html`
|
|
392
|
+
<div class="nav-container">
|
|
393
|
+
${this.signedInActions.map((action) => {
|
|
407
394
|
const normalizedId = this.normalizeActionId(action.id);
|
|
408
395
|
return html`
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
396
|
+
<obc-navigation-item
|
|
397
|
+
.label=${action.label}
|
|
398
|
+
hasIcon
|
|
399
|
+
@click=${() => this.handleSignedInActionClick(action)}
|
|
400
|
+
>
|
|
401
|
+
<span slot="icon">
|
|
402
|
+
<slot name="signed-in-action-icon-${normalizedId}">
|
|
403
|
+
${this.getSignedInActionIcon(normalizedId)}
|
|
404
|
+
</slot>
|
|
405
|
+
</span>
|
|
406
|
+
</obc-navigation-item>
|
|
407
|
+
`;
|
|
421
408
|
})}
|
|
422
|
-
|
|
409
|
+
</div>
|
|
410
|
+
` : nothing}
|
|
423
411
|
<div class="button-container">
|
|
424
412
|
<obc-button
|
|
425
413
|
variant=${ButtonVariant.normal}
|
|
@@ -432,8 +420,9 @@ let ObcUserMenu = class extends LitElement {
|
|
|
432
420
|
`;
|
|
433
421
|
}
|
|
434
422
|
renderSignedInSmall() {
|
|
435
|
-
const
|
|
436
|
-
|
|
423
|
+
const primaryAction = this.signedInActions.find(
|
|
424
|
+
(action) => action.id === this.primaryActionId
|
|
425
|
+
);
|
|
437
426
|
return html`
|
|
438
427
|
<div class="title-container">
|
|
439
428
|
<h3 class="title">${msg("User")}</h3>
|
|
@@ -522,6 +511,9 @@ __decorateClass([
|
|
|
522
511
|
__decorateClass([
|
|
523
512
|
property({ type: Array, attribute: false })
|
|
524
513
|
], ObcUserMenu.prototype, "signedInActions", 2);
|
|
514
|
+
__decorateClass([
|
|
515
|
+
property({ type: String })
|
|
516
|
+
], ObcUserMenu.prototype, "primaryActionId", 2);
|
|
525
517
|
ObcUserMenu = __decorateClass([
|
|
526
518
|
customElement("obc-user-menu"),
|
|
527
519
|
localized()
|