@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/shared/version/versions.ts

@@ -1,89 +0,0 @@
-const regexp = {
-  POSITIVE_INTEGER: /^\d+$/,
-  VERSION_PART_REGEXP: /^[0-9]+|alpha[0-9]+|beta[0-9]+|rc[0-9]+|[0-9]+-SNAPSHOT$/,
-};
-
-export class VersionUtils {
-  static compare = compareVersionNumbers;
-  static isCompatible = isVersionCompatible;
-  static isSame = isSameVersion;
-}
-
-/**
- * Compare two software version numbers (e.g. 1.7.1)
- * Returns:
- *
- *  0 if they're identical
- *  negative if v1 < v2
- *  positive if v1 > v2
- *  Nan if they in the wrong format
- *
- *  E.g.:
- *
- *  assert(version_number_compare("1.7.1", "1.6.10") > 0);
- *  assert(version_number_compare("1.7.1", "1.7.10") < 0);
- *
- *  "Unit tests": http://jsfiddle.net/ripper234/Xv9WL/28/
- *
- *  Taken from http://stackoverflow.com/a/6832721/11236
- */
-export function compareVersionNumbers(v1, v2) {
-  const v1parts = v1.split('.');
-  const v2parts = v2.split('.');
-
-  // First, validate both numbers are true version numbers
-
-  if (!validateParts(v1parts) || !validateParts(v2parts)) {
-    return NaN;
-  }
-
-  for (let i = 0; i < v1parts.length; ++i) {
-    if (v2parts.length === i) {
-      return 1;
-    }
-
-    if (v1parts[i] === v2parts[i]) {
-      continue;
-    }
-    if (v1parts[i] > v2parts[i]) {
-      return 1;
-    }
-    return -1;
-  }
-
-  if (v1parts.length !== v2parts.length) {
-    return -1;
-  }
-
-  return 0;
-}
-
-function validateParts(parts) {
-  for (let i = 0; i < parts.length; i++) {
-    let isNumber = regexp.POSITIVE_INTEGER.test(parts[i]);
-    // First part MUST be an integer
-    if (i === 0 && !isNumber) return false;
-    // If not integer, should be 'alpha', 'beta', etc.
-    if (!isNumber) {
-      if (!regexp.VERSION_PART_REGEXP.test(parts[i])) return false;
-      // Remove '-SNAPSHOT', as it should never be in prod
-      parts[i] = parts[i].replace('-SNAPSHOT', '');
-      // Check again if numeric
-      isNumber = regexp.POSITIVE_INTEGER.test(parts[i]);
-    }
-
-    // Convert string to int (need by compare operators)
-    if (isNumber) parts[i] = parseInt(parts[i]);
-  }
-  return true;
-}
-
-export function isVersionCompatible(minVersion, actualVersion): boolean {
-  // DEV ONLY
-  //console.debug(`[http] Checking actual version {${actualVersion}} is compatible with min expected version {${minVersion}}`);
-  return compareVersionNumbers(minVersion, actualVersion) <= 0;
-}
-
-export function isSameVersion(v1, v2): boolean {
-  return compareVersionNumbers(v1, v2) === 0;
-}

package/src/app/social/config/social.config.ts

@@ -1,10 +0,0 @@
-import { FormFieldDefinition } from '../../shared/form/field.model';
-
-export const SOCIAL_CONFIG_OPTIONS = Object.freeze({
-  ENABLE_NOTIFICATION_ICONS: <FormFieldDefinition>{
-    key: 'sumaris.social.notification.icons.enable',
-    label: 'CONFIGURATION.OPTIONS.SOCIAL.ENABLE_NOTIFICATION_ICONS',
-    type: 'boolean',
-    defaultValue: false,
-  },
-});

package/src/app/social/feed/discourse/discourse-feed.service.ts

@@ -1,216 +0,0 @@
-import { Inject, inject, Injectable, Optional } from '@angular/core';
-
-import { Promise } from '@rx-angular/cdk/zone-less/browser';
-import { DiscourseUtils } from './discourse.utils';
-import DiscourseAPI from 'discourse2';
-import { JsonFeed, JsonFeedUtils } from '../feed.model';
-import { firstArrayValue, isEmptyArray, isNotEmptyArray, isNotNilOrBlank } from '../../../shared/functions';
-import { from, Observable, switchMap } from 'rxjs';
-import { filter, map, mergeMap } from 'rxjs/operators';
-import { StartableService } from '../../../shared/services/startable-service.class';
-import { NetworkService } from '../../../core/services/network.service';
-import { RxStateProperty, RxStateSelect } from '../../../shared/rx-state/rx-state.decorators';
-import { LocalSettingsService } from '../../../core/services/local-settings.service';
-import { RxState } from '@rx-angular/state';
-import { ENVIRONMENT, Environment } from '../../../../environments/environment.class';
-import { LoadResult } from '../../../shared/services/entity-service.class';
-import { UrlUtils } from '../../../shared/file/url.utils';
-import { IFeedService } from '../feed.service';
-
-export interface DiscourseFeedServiceState {
-  locale: string;
-  feedUrls?: string[];
-}
-
-@Injectable({ providedIn: 'root' })
-export class DiscourseFeedService extends StartableService<DiscourseFeedServiceState> implements IFeedService {
-  private discourseApis = new Map<string, DiscourseAPI>();
-  private _logPrefix = '[discourse-feed-service] ';
-
-  private _state = new RxState<DiscourseFeedServiceState>();
-  private network = inject(NetworkService);
-
-  @RxStateSelect() locale$: Observable<string>;
-  @RxStateSelect() feedUrls$: Observable<string[]>;
-
-  @RxStateProperty() locale: string;
-  @RxStateProperty() feedUrls: string[];
-
-  constructor(
-    private settings: LocalSettingsService,
-    @Optional() @Inject(ENVIRONMENT) protected environment: Environment
-  ) {
-    super(settings);
-
-    this._debug = !environment.production;
-    if (this._debug) console.debug('[discourse-feed-service] Creating service');
-
-    this._state.connect('locale', this.settings.locale$);
-
-    this._state.connect(
-      'feedUrls',
-      this.locale$.pipe(
-        filter(isNotNilOrBlank),
-        map((locale) => (locale && environment.feed?.jsonFeed?.[locale]) ?? [])
-      )
-    );
-  }
-
-  protected async ngOnStart(): Promise<DiscourseFeedServiceState> {
-    await this.settings.ready();
-    console.debug(`${this._logPrefix}Service started`, this.settings.locale, this.feedUrls);
-    return {
-      locale: this.settings.locale,
-      feedUrls: this.feedUrls,
-    };
-  }
-
-  watchAll(opts?: { maxAgeInMonths?: number; maxContentLength?: number }): Observable<LoadResult<JsonFeed>> {
-    if (!this.started) {
-      return from(this.start()).pipe(switchMap(() => this.watchAll(opts)));
-    }
-    return this.feedUrls$.pipe(
-      filter(isNotEmptyArray),
-      mergeMap((urls) => this.loadAll(urls, opts))
-    );
-  }
-
-  getHomeUrl(feed?: JsonFeed) {
-    const feedUrl = feed?.feed_url ?? firstArrayValue(this.feedUrls);
-    return feedUrl ? UrlUtils.getRootUrl(feedUrl) : undefined;
-  }
-
-  getTagUrl(feed: JsonFeed, tag: string): string {
-    if (!feed || !tag) throw new Error("Missing 'feed' or 'tag' argument");
-    const baseUrl = this.getHomeUrl(feed);
-    return feed.tag_template?.replace('{tag}', tag) ?? baseUrl + '/tag/' + tag;
-  }
-
-  async load(
-    url: string,
-    opts?: {
-      locale?: string;
-      maxAgeInMonths?: number;
-      maxContentLength?: number;
-      // Internal options (for recursive calls)
-      closeApis?: boolean;
-      depth?: number;
-    }
-  ): Promise<JsonFeed> {
-    const { data } = await this.loadAll([url], opts);
-    return data?.[0];
-  }
-
-  async loadAll(
-    urls?: string[],
-    opts?: {
-      locale?: string;
-      maxAgeInMonths?: number;
-      maxContentLength?: number;
-      // Internal options (for recursive calls)
-      closeApis?: boolean;
-      depth?: number;
-    }
-  ): Promise<LoadResult<JsonFeed>> {
-    await this.ready();
-    urls = urls ?? this.feedUrls;
-    opts = {
-      maxAgeInMonths: opts?.maxAgeInMonths ?? this.environment.feed?.maxAgeInMonths,
-      maxContentLength: opts?.maxContentLength ?? this.environment.feed?.maxContentLength,
-      locale: this.settings.locale,
-      depth: 0,
-      closeApis: true,
-      ...opts,
-    };
-    const feeds = await Promise.all(
-      (urls || []).map(async (url) => {
-        try {
-          // Get JSON
-          const json = await this.network.fetch(url);
-          console.debug(`${this._logPrefix}Loaded JSON from ${url}`, json);
-          if (JsonFeedUtils.isJsonFeed(json)) {
-            // Migrate old version
-            let feed = JsonFeedUtils.migrateFeed(json);
-
-            // Resolve items (e.g. using feed.next_url)
-            feed = await this.resolveFeedItems(feed, { ...opts, depth: opts?.depth ?? 0 });
-
-            // Truncate html
-            JsonFeedUtils.truncateFeedItemsHtml(feed, opts);
-
-            return isNotEmptyArray(feed?.items) ? [feed] : [];
-          }
-
-          // Get discourse
-          if (DiscourseUtils.isDiscourseObject(json)) {
-            const api = this.getOrCreateDiscourseApi(url);
-            return await DiscourseUtils.getFeedsByUrl(url, { ...opts, api });
-          }
-
-          return undefined;
-        } catch (err) {
-          if (err?.status === 404) {
-            console.error(`${this._logPrefix} Error while fetching feed at ${url}. 404 (Not found)`);
-          } else {
-            console.error(`${this._logPrefix} Error while fetching feed at ${url}`, err);
-          }
-          return Promise.resolve([]);
-        }
-      })
-    );
-
-    if (opts?.closeApis !== false) {
-      this.closeApis();
-    }
-
-    const data = feeds.flat();
-
-    return { data, total: data.length };
-  }
-
-  protected getOrCreateDiscourseApi(url: string) {
-    const baseUrl = DiscourseUtils.getDiscourseBaseUrl(url);
-    let api = this.discourseApis.get(baseUrl);
-    if (!api) {
-      api = new DiscourseAPI(baseUrl);
-      this.discourseApis.set(baseUrl, api);
-    }
-    return api;
-  }
-
-  protected closeApis() {
-    this.discourseApis.clear();
-  }
-
-  protected async resolveFeedItems(json: JsonFeed, opts?: { maxContentLength?: number; depth?: number }): Promise<JsonFeed> {
-    if (!json) return json;
-
-    // Load items
-    if (isEmptyArray(json.items) && isNotNilOrBlank(json.next_url)) {
-      const depth = opts?.depth ?? 0;
-      if (depth >= 3) {
-        console.warn(`${this._logPrefix}Max depth reached (${depth}) for ${json.feed_url}`);
-        return json;
-      }
-
-      // Load items
-      const feed = await this.load(json.next_url, { ...opts, closeApis: false, depth: depth + 1 });
-
-      if (isEmptyArray(feed?.items)) {
-        return json;
-      }
-
-      // Merge with the input json
-      return {
-        ...json,
-        title: json.title ?? feed.title,
-        home_page_url: json.home_page_url ?? feed.home_page_url,
-        authors: isNotEmptyArray(json.authors) ? json.authors : feed.authors,
-        items: feed.items,
-        tag_template: json.tag_template ?? feed.tag_template,
-      };
-    }
-
-    return json;
-  }
-}

package/src/app/social/feed/discourse/discourse.model.ts

@@ -1,9 +0,0 @@
-import type { operations } from 'discourse2/esm/schema';
-
-export type DiscourseCategory = operations['listCategoryTopics']['responses']['200']['content']['application/json'];
-export type DiscourseCategoryTopic = DiscourseCategory['topic_list']['topics'][0];
-export type DiscourseTopic = operations['getTopic']['responses']['200']['content']['application/json'];
-
-export type DiscoursePost = operations['getTopic']['responses']['200']['content']['application/json']['post_stream']['posts'][0] & {
-  post_url?: string;
-};

package/src/app/social/feed/discourse/discourse.utils.ts

@@ -1,210 +0,0 @@
-import DiscourseAPI from 'discourse2';
-import { Promise } from '@rx-angular/cdk/zone-less/browser';
-import { JsonFeed, JsonFeedItem, JsonFeedUtils } from '../feed.model';
-import { DiscourseCategory, DiscourseCategoryTopic, DiscoursePost, DiscourseTopic } from './discourse.model';
-import { UrlUtils } from '../../../shared/file/url.utils';
-import { isEmptyArray, isNotNil } from '../../../shared/functions';
-import { DateUtils } from '../../../shared/dates';
-
-export abstract class DiscourseUtils {
-  static _logPrefix = '[discourse-utils]';
-
-  static removeJsonExtension = JsonFeedUtils.removeJsonExtension;
-
-  static isDiscourseObject(json: any): json is DiscourseTopic | DiscourseCategory {
-    return this.isDiscourseTopic(json) || this.isDiscourseCategory(json);
-  }
-
-  static isDiscourseTopic(json: any | Partial<DiscourseTopic>): json is DiscourseTopic {
-    return (json && !!json.post_stream?.posts && json.fancy_title && json.slug && json.details?.created_by && true) || false;
-  }
-
-  static isDiscourseCategory(json: any | Partial<DiscourseCategory>): json is DiscourseCategory {
-    return (json && json.topic_list?.topics && json.posters && true) || false;
-  }
-
-  static getDiscourseBaseUrl(url: string) {
-    return UrlUtils.getRootUrl(url);
-  }
-
-  static isDiscourseCategoryUrl(url: string) {
-    const baseUrl = this.getDiscourseBaseUrl(url);
-    return baseUrl && url.substring(baseUrl.length).match(/^\/c\//);
-  }
-
-  static extractCategoryIdFromUrl(url: string) {
-    const match = this.removeJsonExtension(url).match(/\/(\d+)$/);
-    return match ? parseInt(match[1], 10) : null;
-  }
-
-  static extractCategorySlugFromUrl(url: string) {
-    const match = this.removeJsonExtension(url).match(/\/c\/([\w/-]+)\/\d+$/);
-    return match ? match[1] : null;
-  }
-
-  static extractTopicIdFromUrl(url: string) {
-    const match = url.match(/\/(\d+)(?:$|\/)/) || url.match(/\/(\d+)\.json$/);
-    return match ? parseInt(match[1], 10) : null;
-  }
-
-  static getLanguageFromTitle(title: string) {
-    if (!title) return '';
-
-    const match = title.match('\\s\\(([a-z]{2}(?:-[A-Z]{2})?)\\)$');
-    return match && match[1];
-  }
-
-  static async getFeedsByUrl(
-    url: string,
-    opts?: { api?: DiscourseAPI; locale?: string; maxAgeInMonths?: number; maxContentLength?: number }
-  ): Promise<JsonFeed[]> {
-    try {
-      // Check a category
-      if (DiscourseUtils.isDiscourseCategoryUrl(url)) {
-        console.debug(`${this._logPrefix}Detected a Discourse category at: ${url}`);
-        return this.getFeedsByCategoryUrl(url, opts);
-      }
-
-      // Or a topic
-      else {
-        const post = await this.getFeedByTopicUrl(url, opts);
-        return post ? [post] : [];
-      }
-    } catch (err) {
-      console.error(`${this._logPrefix}`, err);
-      return [];
-    }
-  }
-
-  static async getFeedsByCategoryUrl(
-    url: string,
-    opts?: { api?: DiscourseAPI; locale?: string; maxAgeInMonths?: number; maxContentLength?: number }
-  ): Promise<JsonFeed[]> {
-    const categoryId = this.extractCategoryIdFromUrl(url);
-    const categorySlug = this.extractCategorySlugFromUrl(url);
-    const baseUrl = this.getDiscourseBaseUrl(url);
-    const api = opts?.api ?? new DiscourseAPI(baseUrl);
-    const category: DiscourseCategory = await api.listCategoryTopics({ id: categoryId, slug: categorySlug });
-
-    const topics = (category?.topic_list?.topics || []).filter((topic: DiscourseCategoryTopic) => {
-      const topicLocale = this.getLanguageFromTitle(topic.fancy_title);
-      return (
-        topic.pinned &&
-        topic.visible &&
-        // Keep same locale, if exists
-        (!topicLocale || !opts?.locale || topicLocale === opts.locale)
-      );
-    });
-
-    const posts = (
-      await Promise.all(
-        topics.map(async (t) => {
-          const topic: DiscourseTopic = await api.getTopic({ id: t.id.toString() });
-
-          // Ignore 'About' topics
-          if (topic.tags.includes('about-category')) return undefined;
-
-          const posts = this.filterRecentPosts(topic.post_stream.posts, opts);
-          if (isEmptyArray(posts)) return undefined;
-          return this.toFeed(posts, topic, url, opts);
-        })
-      )
-    ).filter(isNotNil);
-
-    if (isEmptyArray(posts)) {
-      console.warn(`${this._logPrefix}No recent post found on category #${categoryId}`);
-    }
-
-    return posts;
-  }
-
-  static async getFeedByTopicUrl(
-    url: string,
-    opts?: { locale?: string; maxAgeInMonths?: number; maxContentLength?: number;
-      // Internal usage
-      api?: DiscourseAPI;
-    }
-  ): Promise<JsonFeed> {
-    const topicId = this.extractTopicIdFromUrl(url);
-    if (!topicId) {
-      console.error(`${this._logPrefix}Invalid URL`);
-      return undefined;
-    }
-    const api = opts?.api ?? new DiscourseAPI(this.getDiscourseBaseUrl(url));
-    const topic = await api.getTopic({ id: topicId.toString() });
-
-    // Ignore about category
-    if (topic.tags?.includes('about-category')) return undefined;
-
-    const posts = this.filterRecentPosts(topic.post_stream.posts, opts);
-
-    if (isEmptyArray(posts)) {
-      console.warn(`${this._logPrefix}No recent posts found in topic #${topicId}`);
-      return undefined;
-    }
-
-    return this.toFeed(posts, topic, url, opts);
-  }
-
-  static filterRecentPosts(posts: DiscoursePost[], opts?: { maxAgeInMonths?: number }): DiscoursePost[] {
-    const maxAgeInMonths = opts?.maxAgeInMonths ?? JsonFeedUtils.DEFAULT_MAX_POST_AGE_IN_MONTHS;
-    if (maxAgeInMonths <= 0) return posts; // Accept all
-
-    const minDate = maxAgeInMonths > 0 ? DateUtils.moment().subtract(maxAgeInMonths, 'month').startOf('day').utc() : undefined;
-    return (posts || []).filter((post) => post && DateUtils.moment(post.created_at).isSameOrAfter(minDate));
-  }
-
-  static toFeed(posts: DiscoursePost[], topic: DiscourseTopic, url: string, opts?: { maxContentLength?: number }): JsonFeed {
-    const baseUrl = this.getDiscourseBaseUrl(url);
-    const title = this.cleanTitle(topic.fancy_title ?? topic.title);
-    const items = (posts || []).map((post) => this.toFeedItem(post, topic, url, opts));
-    const firstItem = items?.[0];
-    if (firstItem) firstItem.title = title;
-    const authorName = topic?.details?.created_by && (topic.details.created_by.name || topic.details.created_by.username);
-    const authorAvatar = baseUrl + topic.details.created_by.avatar_template.replace('{size}', '48');
-    return <JsonFeed>{
-      version: JsonFeedUtils.VERSION_1_1,
-      feed_url: url,
-      title: this.cleanTitle(topic.fancy_title),
-      expired: topic.archived,
-      authors: [
-        {
-          name: authorName,
-          avatar: authorAvatar,
-        },
-      ],
-      items,
-      tag_template: baseUrl + '/tag/{tag}',
-    };
-  }
-
-  static toFeedItem(post: DiscoursePost, topic: DiscourseTopic, url: string, opts?: { maxContentLength?: number }): JsonFeedItem {
-    const baseUrl = this.getDiscourseBaseUrl(url);
-    url = post.post_url ? baseUrl + post.post_url : url;
-    const id = post.post_url ? baseUrl + post.post_url : post.id;
-    const html = JsonFeedUtils.truncateHtml(post.cooked, opts);
-    const truncated = html?.length !== post.cooked?.length;
-    const authorName = post.name || post.username;
-    const authorAvatar =
-      baseUrl + (post.avatar_template.replace('{size}', '48') ?? topic.details.last_poster.avatar_template.replace('{size}', '48'));
-    return <JsonFeedItem>{
-      id,
-      url,
-      authors: [
-        {
-          name: authorName,
-          avatar: authorAvatar,
-        },
-      ],
-      content_html: html,
-      date_published: post.created_at,
-      tags: topic.tags,
-      truncated,
-    };
-  }
-
-  static cleanTitle(title: string) {
-    if (!title) return undefined;
-    return title.replace(/\s\([a-z]{2}(:?-[A-Z]{2})?\)$/, '');
-  }
-}

package/src/app/social/feed/feed.component.html

@@ -1,85 +0,0 @@
-@if (feeds | isNotEmptyArray) {
-  <div class="feed ion-padding-horizontal ion-no-padding ion-padding-top">
-
-    <!-- feeds -->
-    @for (feed of feeds$ | push; track feed.feed_url) {
-
-      <!-- top header -->
-      @if (showHeader) {
-        <ion-item lines="none" color="secondary">
-          <ion-icon slot="start" name="megaphone"></ion-icon>
-          <ion-label>
-            <b>{{ feed.title || ('SOCIAL.FEED.NEWS'|translate) }}</b>
-          </ion-label>
-          <ion-button slot="end" fill="clear" (click)="openFeedHome()">
-            <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>
-            <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-          </ion-button>
-        </ion-item>
-      }
-
-
-      <!-- items -->
-      @for (item of feed.items; track item.id) {
-        <ion-card>
-          <ion-card-header>
-            <ion-card-subtitle style="vertical-align: middle">
-
-              <!-- Authors -->
-              @for (author of (item.authors || feed.authors); track author) {
-                @if (author.name || author.avatar) {
-                  <ion-chip (click)="openUrl(author.url)" tappable>
-                    @if (author.avatar) {
-                      <ion-avatar>
-                        <ion-img [src]="author.avatar" [alt]="author.name"></ion-img>
-                      </ion-avatar>
-                    }
-                    @if (author.name) {
-                      <ion-label color="medium">{{ author.name }}</ion-label>
-                    }
-                  </ion-chip>
-                }
-              }
-              <ion-note class="ion-float-end">
-                <small>{{ item.date_published | dateFromNow }}</small>
-              </ion-note>
-            </ion-card-subtitle>
-
-            <!-- title -->
-            <ion-card-title (click)="openUrl(item.url || feed.feed_url)" tappable>{{ item?.title }}</ion-card-title>
-
-            <!-- tags -->
-            @let tags = item | map: getTags;
-            @if (tags | isNotEmptyArray) {
-              <div class="tags">
-                @for (tag of tags; track tag; let last = $last) {
-                  <a (click)="openTag(feed, tag)" tappable>
-                    <ion-text>#{{ tag }}</ion-text>
-                  </a>@if (!last) {
-                    &nbsp;
-                  }
-                }
-              </div>
-            }
-          </ion-card-header>
-
-          <!-- Feed content -->
-          <ion-card-content>
-            <ion-text [feed]="item.url || feed.feed_url">
-              @if (item.content_html) {
-                <p [innerHTML]="item.content_html"></p>
-              } @else if (item.content_text) {
-                <p [innerText]="item.content_text"></p>
-              }
-            </ion-text>
-          </ion-card-content>
-
-          <ion-button (click)="openUrl(item.url)" class="ion-float-end" fill="clear">
-            <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>
-            <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-          </ion-button>
-        </ion-card>
-      }
-    }
-  </div>
-}

package/src/app/social/feed/feed.component.scss

@@ -1,59 +0,0 @@
-
-.feed {
-
-  ion-item {
-    border-radius: 12px 12px 0 0;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-
-    ion-icon[slot=start] {
-      -webkit-margin-end: 8px;
-      margin-inline-end: 8px;
-    }
-  }
-
-  .tags {
-    display: inline;
-    a {
-      color: var(--ion-color-step-600, #666666) !important;
-    }
-  }
-
-  ion-card {
-    --ion-card-background: rgba(var(--ion-background-color-rgb), 0.6);
-    --ion-card-color: var(--ion-text-color);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    margin: 0 0 16px 0 ;
-
-    ion-card-header {
-      ion-card-title {
-        --color: var(--ion-text-color);
-      }
-      ion-card-subtitle {
-        --color: var(--ion-color-step-50);
-      }
-      ion-chip {
-        --background: transparent;
-        --border-color: transparent;
-        --border-width: 0;
-
-        ion-avatar {
-          border: 1px solid var(--ion-color-primary);
-        }
-        ion-label {
-          color: var(--color);
-        }
-      }
-    }
-  }
-
-  ion-button {
-    text-transform: unset;
-    color: var(--ion-color-step-400);
-  }
-
-  a:hover {
-    color: var(--ion-color-medium);
-  }
-}