@leavittsoftware/web 8.7.2 → 8.7.3

package/leavitt/person-select/person-select.d.ts

@@ -0,0 +1,46 @@
+import { PropertyValues } from 'lit';
+import { Person } from '@leavittsoftware/lg-core-typescript';
+import { TitaniumSingleSelectBase } from '../../titanium/single-select-base/single-select-base';
+import '../profile-picture/profile-picture';
+import ApiService from '../api-service/api-service';
+/**
+ *  Single select input that searches Leavitt Group users
+ *
+ *  @element leavitt-person-select
+ *
+ */
+export declare class LeavittPersonSelect extends TitaniumSingleSelectBase<Partial<Person>> {
+    #private;
+    accessor label: string;
+    accessor placeholder: string;
+    /**
+     *  Set the name of the API controller to use
+     */
+    accessor apiControllerName: string;
+    accessor pathToSelectedText: string;
+    /**
+     *  Required
+     */
+    accessor apiService: ApiService;
+    /**
+     *  Odata parts for the Person API call
+     */
+    accessor odataParts: Array<string>;
+    /**
+     *  Enables preloading of people for the default suggestion list. Only enable if you are searching a smaller subset of people.
+     */
+    accessor enablePeoplePreloading: boolean;
+    accessor searchType: 'local' | 'remote';
+    accessor people: Array<Partial<Person>>;
+    accessor autocomplete: string;
+    accessor spellcheck: boolean;
+    accessor renderMenuItemContentTemplate: (person: Partial<Person>) => import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    updated(changedProps: PropertyValues<this>): Promise<void>;
+    searchTermToOData(searchTerm: string): string | null;
+    reloadPeople(): Promise<void>;
+    protected onInputChanged(searchTerm: string): void;
+    protected renderSelectedLeadingInputSlot(entity: Partial<Person>): import("lit-html").TemplateResult<1>;
+    protected renderSuggestion(person: Partial<Person>): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=person-select.d.ts.map

package/leavitt/person-select/person-select.js

@@ -0,0 +1,203 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TitaniumSingleSelectBase } from '../../titanium/single-select-base/single-select-base';
+import Fuse from 'fuse.js';
+import '../profile-picture/profile-picture';
+import { Debouncer, getSearchTokens } from '../../titanium/helpers/helpers';
+import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+/**
+ *  Single select input that searches Leavitt Group users
+ *
+ *  @element leavitt-person-select
+ *
+ */
+let LeavittPersonSelect = class LeavittPersonSelect extends TitaniumSingleSelectBase {
+    #label_accessor_storage = 'Person';
+    get label() { return this.#label_accessor_storage; }
+    set label(value) { this.#label_accessor_storage = value; }
+    #placeholder_accessor_storage = 'Search for a person';
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #apiControllerName_accessor_storage = 'People';
+    /**
+     *  Set the name of the API controller to use
+     */
+    get apiControllerName() { return this.#apiControllerName_accessor_storage; }
+    set apiControllerName(value) { this.#apiControllerName_accessor_storage = value; }
+    #pathToSelectedText_accessor_storage = 'FullName';
+    get pathToSelectedText() { return this.#pathToSelectedText_accessor_storage; }
+    set pathToSelectedText(value) { this.#pathToSelectedText_accessor_storage = value; }
+    #apiService_accessor_storage;
+    /**
+     *  Required
+     */
+    get apiService() { return this.#apiService_accessor_storage; }
+    set apiService(value) { this.#apiService_accessor_storage = value; }
+    #odataParts_accessor_storage = [
+        'top=15',
+        'orderby=FullName',
+        'select=FullName,CompanyName,Id,ProfilePictureCdnFileName',
+        'count=true',
+    ];
+    /**
+     *  Odata parts for the Person API call
+     */
+    get odataParts() { return this.#odataParts_accessor_storage; }
+    set odataParts(value) { this.#odataParts_accessor_storage = value; }
+    #enablePeoplePreloading_accessor_storage = false;
+    /**
+     *  Enables preloading of people for the default suggestion list. Only enable if you are searching a smaller subset of people.
+     */
+    get enablePeoplePreloading() { return this.#enablePeoplePreloading_accessor_storage; }
+    set enablePeoplePreloading(value) { this.#enablePeoplePreloading_accessor_storage = value; }
+    #searchType_accessor_storage = 'remote';
+    get searchType() { return this.#searchType_accessor_storage; }
+    set searchType(value) { this.#searchType_accessor_storage = value; }
+    #people_accessor_storage = [];
+    get people() { return this.#people_accessor_storage; }
+    set people(value) { this.#people_accessor_storage = value; }
+    #autocomplete_accessor_storage = 'off';
+    get autocomplete() { return this.#autocomplete_accessor_storage; }
+    set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+    #spellcheck_accessor_storage = false;
+    get spellcheck() { return this.#spellcheck_accessor_storage; }
+    set spellcheck(value) { this.#spellcheck_accessor_storage = value; }
+    #renderMenuItemContentTemplate_accessor_storage = (person) => html `<md-menu-item .item=${person}>
+      <profile-picture slot="start" .fileName=${person?.ProfilePictureCdnFileName ?? null} shape="circle" size="40"></profile-picture>
+      <span slot="headline">${person.FullName}</span>
+      <span slot="supporting-text">${person.CompanyName}</span>
+    </md-menu-item>`;
+    get renderMenuItemContentTemplate() { return this.#renderMenuItemContentTemplate_accessor_storage; }
+    set renderMenuItemContentTemplate(value) { this.#renderMenuItemContentTemplate_accessor_storage = value; }
+    #doSearchDebouncer = new Debouncer((searchTerm) => this.#doSearch(searchTerm));
+    #abortController = new AbortController();
+    async firstUpdated() {
+        if (this.enablePeoplePreloading && !this.people.length && this.apiService) {
+            this.reloadPeople();
+        }
+    }
+    async updated(changedProps) {
+        if (changedProps.has('people') && this.people) {
+            this.defaultSuggestions = this.people;
+        }
+    }
+    searchTermToOData(searchTerm) {
+        const searchTokens = getSearchTokens(searchTerm);
+        if (searchTokens.length < 1) {
+            return null;
+        }
+        return searchTokens.map((token) => `contains(tolower(FullName), '${token.toLowerCase()}')`).join(' and ');
+    }
+    async reloadPeople() {
+        this.people = await this.#getPeople();
+    }
+    async #getPeople() {
+        const odataParts = this.odataParts.filter((o) => !o.startsWith('top='));
+        try {
+            const get = this.apiService?.getAsync(`${this.apiControllerName}?${odataParts.join('&')}`);
+            const result = await get;
+            return result?.toList() ?? [];
+        }
+        catch (error) {
+            this.dispatchEvent(new ShowSnackbarEvent(error));
+        }
+        return [];
+    }
+    async #doSearch(searchTerm) {
+        this.#abortController.abort();
+        this.#abortController = new AbortController();
+        if (!searchTerm) {
+            return;
+        }
+        if (this.searchType === 'local') {
+            const options = {
+                includeScore: true,
+                keys: ['FullName'],
+                ignoreLocation: true,
+                shouldSort: true,
+                threshold: 0.3,
+            };
+            if (this.searchTerm) {
+                const fuse = new Fuse(this.people, options);
+                const fuseResults = fuse.search(searchTerm);
+                this.showSuggestions(fuseResults.map((o) => o.item).slice(0, 15), fuseResults.length);
+            }
+        }
+        else {
+            try {
+                const searchOData = this.searchTermToOData(searchTerm);
+                const oDataParts = structuredClone(this.odataParts);
+                if (searchOData) {
+                    const existingFilterIndex = oDataParts.findIndex((o) => o.startsWith('filter=') || o.startsWith('$filter='));
+                    if (existingFilterIndex > -1) {
+                        oDataParts[existingFilterIndex] = [oDataParts[existingFilterIndex], searchOData].join(' and ');
+                    }
+                    else {
+                        oDataParts.push(`filter=${searchOData}`);
+                    }
+                }
+                const get = this.apiService.getAsync(`${this.apiControllerName}?${oDataParts.join('&')}`, { abortController: this.#abortController });
+                this.loadWhile(get);
+                const result = await get;
+                this.showSuggestions(result?.entities ?? [], result?.odataCount ?? 0);
+            }
+            catch (error) {
+                if (!error?.message?.includes('Abort error')) {
+                    this.dispatchEvent(new ShowSnackbarEvent(error));
+                }
+            }
+        }
+    }
+    // Overloaded base
+    onInputChanged(searchTerm) {
+        this.#doSearchDebouncer.debounce(searchTerm);
+    }
+    renderSelectedLeadingInputSlot(entity) {
+        return html ` <profile-picture slot="leading-icon" .fileName=${entity?.ProfilePictureCdnFileName || null} shape="circle" size="24"></profile-picture>`;
+    }
+    renderSuggestion(person) {
+        return this.renderMenuItemContentTemplate(person);
+    }
+};
+__decorate([
+    property({ type: String })
+], LeavittPersonSelect.prototype, "label", null);
+__decorate([
+    property({ type: String })
+], LeavittPersonSelect.prototype, "placeholder", null);
+__decorate([
+    property({ type: String })
+], LeavittPersonSelect.prototype, "apiControllerName", null);
+__decorate([
+    property({ type: String })
+], LeavittPersonSelect.prototype, "pathToSelectedText", null);
+__decorate([
+    property({ attribute: false })
+], LeavittPersonSelect.prototype, "apiService", null);
+__decorate([
+    property({ type: Array })
+], LeavittPersonSelect.prototype, "odataParts", null);
+__decorate([
+    property({ type: Boolean, attribute: 'enable-people-preloading' })
+], LeavittPersonSelect.prototype, "enablePeoplePreloading", null);
+__decorate([
+    property({ type: String, attribute: 'search-type' })
+], LeavittPersonSelect.prototype, "searchType", null);
+__decorate([
+    property({ type: Array })
+], LeavittPersonSelect.prototype, "people", null);
+__decorate([
+    property({ reflect: true, type: String })
+], LeavittPersonSelect.prototype, "autocomplete", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], LeavittPersonSelect.prototype, "spellcheck", null);
+__decorate([
+    property({ type: Object })
+], LeavittPersonSelect.prototype, "renderMenuItemContentTemplate", null);
+LeavittPersonSelect = __decorate([
+    customElement('leavitt-person-select')
+], LeavittPersonSelect);
+export { LeavittPersonSelect };
+//# sourceMappingURL=person-select.js.map

package/leavitt/person-select/person-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"person-select.js","sourceRoot":"","sources":["person-select.ts"],"names":[],"mappings":"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"}

package/leavitt/profile-picture/profile-picture-menu.d.ts

@@ -0,0 +1,48 @@
+import './profile-picture';
+import '@material/web/menu/menu';
+import '@material/web/button/outlined-button';
+import '@material/web/button/text-button';
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import { UserManager } from '../user-manager/user-manager';
+import { LitElement } from 'lit';
+import { PropertyValues } from 'lit';
+import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
+/**
+ * Profile picture menu for the Leavitt Group
+ *
+ * @element profile-picture-menu
+ *
+ */
+export declare class ProfilePictureMenu extends LitElement {
+    #private;
+    accessor userManager: UserManager | AuthZeroLgUserManager | null;
+    /**
+     * Size in pixels of profile picture button
+     */
+    accessor size: number;
+    accessor profilePictureFileName: string | null;
+    /**
+     * Person id of user
+     */
+    accessor personId: number;
+    /**
+     * Email address of user
+     */
+    accessor email: string;
+    /**
+     * Company of user
+     */
+    accessor company: string;
+    /**
+     * Full name of user
+     */
+    accessor name: string;
+    private accessor menu;
+    positioning: 'absolute' | 'fixed' | 'document' | 'popover';
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=profile-picture-menu.d.ts.map

package/leavitt/profile-picture/profile-picture-menu.js

@@ -0,0 +1,248 @@
+import { __decorate } from "tslib";
+import './profile-picture';
+import '@material/web/menu/menu';
+import '@material/web/button/outlined-button';
+import '@material/web/button/text-button';
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import { GetUserManagerInstance, UserManager } from '../user-manager/user-manager';
+import { UserManagerUpdatedEvent } from '../user-manager/user-manager-events';
+import { css, html, LitElement } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
+/**
+ * Profile picture menu for the Leavitt Group
+ *
+ * @element profile-picture-menu
+ *
+ */
+let ProfilePictureMenu = class ProfilePictureMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.#size_accessor_storage = 40;
+        this.#personId_accessor_storage = 0;
+        this.#email_accessor_storage = '';
+        this.#company_accessor_storage = '';
+        this.#name_accessor_storage = '';
+        this.positioning = 'popover';
+    }
+    #userManager_accessor_storage;
+    get userManager() { return this.#userManager_accessor_storage; }
+    set userManager(value) { this.#userManager_accessor_storage = value; }
+    #size_accessor_storage;
+    /**
+     * Size in pixels of profile picture button
+     */
+    get size() { return this.#size_accessor_storage; }
+    set size(value) { this.#size_accessor_storage = value; }
+    #profilePictureFileName_accessor_storage;
+    get profilePictureFileName() { return this.#profilePictureFileName_accessor_storage; }
+    set profilePictureFileName(value) { this.#profilePictureFileName_accessor_storage = value; }
+    #personId_accessor_storage;
+    /**
+     * Person id of user
+     */
+    get personId() { return this.#personId_accessor_storage; }
+    set personId(value) { this.#personId_accessor_storage = value; }
+    #email_accessor_storage;
+    /**
+     * Email address of user
+     */
+    get email() { return this.#email_accessor_storage; }
+    set email(value) { this.#email_accessor_storage = value; }
+    #company_accessor_storage;
+    /**
+     * Company of user
+     */
+    get company() { return this.#company_accessor_storage; }
+    set company(value) { this.#company_accessor_storage = value; }
+    #name_accessor_storage;
+    /**
+     * Full name of user
+     */
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #menu_accessor_storage;
+    get menu() { return this.#menu_accessor_storage; }
+    set menu(value) { this.#menu_accessor_storage = value; }
+    firstUpdated() {
+        const userManager = this.#getUserManager();
+        if (userManager instanceof AuthZeroLgUserManager) {
+            userManager.onIdentityUpdated(() => {
+                this.personId = userManager.identity?.coreid ?? 0;
+                this.profilePictureFileName = userManager.identity?.profilePictureFileName ?? null;
+                this.email = userManager.identity?.email ?? '';
+                this.company = userManager.identity?.companyName ?? '';
+                this.name = userManager.identity?.name ?? '';
+            });
+            this.personId = userManager.identity?.coreid ?? 0;
+            this.profilePictureFileName = userManager.identity?.profilePictureFileName ?? null;
+            this.email = userManager.identity?.email ?? '';
+            this.company = userManager.identity?.companyName ?? '';
+            this.name = userManager.identity?.name ?? '';
+        }
+        else if (userManager instanceof UserManager) {
+            userManager.addEventListener(UserManagerUpdatedEvent.eventName, () => {
+                this.personId = userManager.personId;
+                this.profilePictureFileName = userManager.profilePictureFileName;
+                this.email = userManager.email;
+                this.company = userManager.company;
+                this.name = userManager.fullname;
+            });
+            this.personId = userManager.personId;
+            this.profilePictureFileName = userManager.profilePictureFileName;
+            this.email = userManager.email;
+            this.company = userManager.company;
+            this.name = userManager.fullname;
+        }
+    }
+    #getUserManager() {
+        return this.userManager ?? GetUserManagerInstance();
+    }
+    updated(changed) {
+        if (changed.has('size') && changed.get('size') !== this.size) {
+            this.style.width = this.size + 'px';
+            this.style.height = this.size + 'px';
+        }
+        if (changed.has('positioning') && this.positioning === 'popover' && !this.showPopover) {
+            this.positioning = 'fixed';
+        }
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    md-menu main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 300px;
+    }
+
+    md-menu main profile-picture {
+      margin: 24px 24px 20px;
+    }
+
+    md-menu h1 {
+      display: block;
+      font-family: Metropolis, 'Roboto', 'Noto', sans-serif;
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 24px;
+      letter-spacing: 0.25px;
+      margin: 0;
+      padding: 0 24px 0 24px;
+    }
+
+    md-menu h2 {
+      display: flex;
+      font-family: Roboto, sans-serif;
+
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0.25px;
+      margin: 0;
+      padding: 0 24px 12px 24px;
+    }
+
+    md-menu h2[company] {
+      padding-bottom: 12px;
+    }
+
+    md-menu slot-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    md-outlined-button {
+      margin: 8px 24px 24px 24px;
+    }
+
+    md-menu footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 0 8px;
+    }
+  `; }
+    render() {
+        return html `
+      <md-icon-button
+        id="icon-button"
+        @click=${() => {
+            if (this.personId) {
+                this.menu.open = !this.menu.open;
+            }
+            else {
+                if (this.userManager instanceof AuthZeroLgUserManager) {
+                    this.userManager.authenticate();
+                }
+                else {
+                    GetUserManagerInstance()?.authenticateAsync();
+                }
+            }
+        }}
+        style=${styleMap({
+            height: `${this.size}px`,
+            width: `${this.size}px`,
+        })}
+      >
+        <profile-picture shape="circle" .fileName=${this.profilePictureFileName} .size=${this.size}></profile-picture>
+      </md-icon-button>
+      <md-menu y-offset="4" anchor="icon-button" menu-corner="start-end" anchor-corner="end-end" .positioning=${this.positioning}>
+        <main>
+          <profile-picture shape="circle" .fileName=${this.profilePictureFileName} size="90"></profile-picture>
+          <h1>${this.name}</h1>
+          ${this.company ? html `<h2 company>${this.company}</h2>` : ''}
+          <h2>${this.email}</h2>
+          <slot-container>
+            <slot name="content"></slot>
+          </slot-container>
+          <md-outlined-button account href="https://accounts.leavitt.com/your-apps" target="_blank"
+            ><md-icon slot="icon">apps</md-icon>Browse Leavitt applications</md-outlined-button
+          >
+        </main>
+        <md-divider role="separator" tabindex="-1"></md-divider>
+        <footer>
+          <md-text-button href="https://accounts.leavitt.com/" target="_blank">Account settings</md-text-button>
+          <md-text-button @click=${() => this.userManager?.logout()}>Sign out</md-text-button>
+        </footer>
+      </md-menu>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ProfilePictureMenu.prototype, "userManager", null);
+__decorate([
+    property({ type: Number })
+], ProfilePictureMenu.prototype, "size", null);
+__decorate([
+    property({ type: String })
+], ProfilePictureMenu.prototype, "profilePictureFileName", null);
+__decorate([
+    property({ type: Number })
+], ProfilePictureMenu.prototype, "personId", null);
+__decorate([
+    property({ type: String })
+], ProfilePictureMenu.prototype, "email", null);
+__decorate([
+    property({ type: String })
+], ProfilePictureMenu.prototype, "company", null);
+__decorate([
+    property({ type: String })
+], ProfilePictureMenu.prototype, "name", null);
+__decorate([
+    query('md-menu')
+], ProfilePictureMenu.prototype, "menu", null);
+__decorate([
+    property()
+], ProfilePictureMenu.prototype, "positioning", void 0);
+ProfilePictureMenu = __decorate([
+    customElement('profile-picture-menu')
+], ProfilePictureMenu);
+export { ProfilePictureMenu };
+//# sourceMappingURL=profile-picture-menu.js.map

package/leavitt/profile-picture/profile-picture-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-picture-menu.js","sourceRoot":"","sources":["profile-picture-menu.ts"],"names":[],"mappings":"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"}

package/leavitt/profile-picture/profile-picture.d.ts

@@ -0,0 +1,44 @@
+import '@material/web/icon/icon';
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * Displays a Leavitt Group users profile picture
+ *
+ * @element profile-picture
+ *
+ */
+export declare class ProfilePicture extends LitElement {
+    #private;
+    /**
+     * File name of the profile picture on CDN, no extension
+     */
+    accessor fileName: string | null;
+    /**
+     * Shape of profile picture
+     */
+    accessor shape: 'circle' | 'square';
+    /**
+     * Shows a colored ring around the picture
+     */
+    accessor showRing: boolean;
+    /**
+     * Shows a test user indicator at the bottom of the picture
+     */
+    accessor showTestUserIndicator: boolean;
+    /**
+     * Makes the image a link to the respective profile page
+     */
+    accessor profilePictureLinkPersonId: number | null;
+    /**
+     * Size in pixels of profile picture
+     */
+    accessor size: number;
+    /**
+     *  Setting true will cause the size attribute to only determine what size image to fetch from CDN and not set any CSS size styles on the image. Therefore the image will be displayed at its intrinsic size unless further overridden by the consumer.
+     */
+    accessor useIntrinsicImageSize: boolean;
+    protected updated(changedProps: PropertyValues<this>): void;
+    static styles: import("lit").CSSResult;
+    renderProfilePicture(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=profile-picture.d.ts.map