valtech-components 2.0.7 → 2.0.9

package/lib/components/atoms/button/button.component.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '@angular/core';
+import { ButtonMetadata } from './types';
+import { DownloadService } from '../../../services/download.service';
+import * as i0 from "@angular/core";
+export declare class ButtonComponent {
+    private download;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    props: ButtonMetadata;
+    onClick: EventEmitter<string>;
+    constructor(download: DownloadService);
+    ngOnInit(): void;
+    clickHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "val-button", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/atoms/button/factory.d.ts

@@ -0,0 +1,71 @@
+import { ButtonMetadata, IconMetada } from './types';
+export declare const Icon: (name: string, slot: 'start' | 'end') => IconMetada;
+export declare const BaseDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const ClearDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const ClearDefaultRound: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefaultRound: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const OutlineDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const OutlineDefaultRound: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const ClearDefaultFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const ClearDefaultRoundFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const ClearDefaultBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const ClearDefaultRoundBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefaultFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefaultRoundFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefaultBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefaultRoundBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const OutlineDefaultFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const OutlineDefaultRoundFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const OutlineDefaultBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const OutlineDefaultRoundBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
+export declare const SolidDefaultButton: (text: string) => ButtonMetadata;
+export declare const SolidSmallButton: (text: string) => ButtonMetadata;
+export declare const SolidLargeButton: (text: string) => ButtonMetadata;
+export declare const SolidDefaultRoundButton: (text: string) => ButtonMetadata;
+export declare const SolidSmallRoundButton: (text: string) => ButtonMetadata;
+export declare const SolidLargeRoundButton: (text: string) => ButtonMetadata;
+export declare const SolidFullButton: (text: string) => ButtonMetadata;
+export declare const SolidBlockButton: (text: string) => ButtonMetadata;
+/** PRIMARY */
+export declare const PrimarySolidDefaultRoundButton: (text: string) => ButtonMetadata;
+export declare const PrimarySolidDefaultRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const PrimarySolidDefaultRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidDefaultRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidSmallRoundButton: (text: string) => ButtonMetadata;
+export declare const PrimarySolidSmallRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const PrimarySolidSmallRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidSmallRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidLargeRoundButton: (text: string) => ButtonMetadata;
+export declare const PrimarySolidLargeRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const PrimarySolidLargeRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidLargeRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidBlockButton: (text: string) => ButtonMetadata;
+export declare const PrimarySolidBlockIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const PrimarySolidBlockHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidBlockIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidFullButton: (text: string) => ButtonMetadata;
+export declare const PrimarySolidFullIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const PrimarySolidFullHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const PrimarySolidFullIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+/** SECONDARY */
+export declare const SecondarySolidDefaultRoundButton: (text: string) => ButtonMetadata;
+export declare const SecondarySolidDefaultRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const SecondarySolidDefaultRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidDefaultRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidSmallRoundButton: (text: string) => ButtonMetadata;
+export declare const SecondarySolidSmallRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const SecondarySolidSmallRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidSmallRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidLargeRoundButton: (text: string) => ButtonMetadata;
+export declare const SecondarySolidLargeRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const SecondarySolidLargeRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidLargeRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidFullButton: (text: string) => ButtonMetadata;
+export declare const SecondarySolidFullIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const SecondarySolidFullHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidFullIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidBlockButton: (text: string) => ButtonMetadata;
+export declare const SecondarySolidBlockIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
+export declare const SecondarySolidBlockHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+export declare const SecondarySolidBlockIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;

package/lib/components/atoms/button/types.d.ts

@@ -0,0 +1,22 @@
+import { Color } from '@ionic/core';
+import { ActionType, ComponentState } from '../../types';
+export interface IconMetada {
+    name: string;
+    slot: 'start' | 'end';
+}
+export interface ButtonMetadata {
+    actionType?: ActionType;
+    expand?: 'full' | 'block';
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    download?: string;
+    color: Color;
+    state: ComponentState;
+    text: string;
+    icon?: IconMetada;
+    shape?: 'round';
+    size?: 'small' | 'default' | 'large';
+    fill?: 'clear' | 'outline' | 'solid' | 'default';
+    type: 'button' | 'submit' | 'reset';
+    token?: string;
+}

package/lib/components/types.d.ts

@@ -0,0 +1,78 @@
+import { ValidatorFn } from "@angular/forms";
+import { ButtonMetadata } from "./atoms/button/types";
+export type ComponentState = 'ENABLED' | 'DISABLED' | 'WORKING' | 'ERROR';
+export declare const ComponentStates: {
+    ENABLED: "ENABLED";
+    DISABLED: "DISABLED";
+    WORKING: "WORKING";
+    ERROR: "ERROR";
+};
+export declare enum ActionType {
+    BROWSER_NEW_TAB = 0,
+    BROWSER_DOWNLOAD = 1,
+    NATIVE_DOWNLOAD = 2,
+    APP_NAVIGATION = 3,
+    BROWSER_NAVIGATION = 4
+}
+export type Action = {
+    description: string;
+    type: ActionType;
+    source: string;
+};
+export declare enum InputType {
+    TEXT = 0,
+    EMAIL = 1,
+    PASSWORD = 2,
+    COMMENT = 3,
+    NUMBER = 4,
+    PIN_CODE = 5,
+    DATE = 6,
+    HOUR = 7,
+    CHECK = 8,
+    RADIO = 9,
+    SELECT = 10,
+    FILE = 11
+}
+export type InputOption = {
+    id: string;
+    name: string;
+    selected?: boolean;
+    order: number;
+};
+export type InputMetadata = {
+    token: string;
+    label: string;
+    name: string;
+    hint: string;
+    placeholder: string;
+    type: InputType;
+    order: number;
+    validators: ValidatorFn[];
+    options?: InputOption[];
+    range?: {
+        min: number;
+        max: number;
+    };
+    errors: {
+        [key: string]: string;
+    };
+    value?: string;
+};
+export type FormSection = {
+    name: string;
+    order: number;
+    fields: InputMetadata[];
+};
+export type FormSubmit = {
+    fields: {
+        key: string;
+        value: string;
+    }[];
+    token?: string;
+};
+export type FormMetadata = {
+    name: string;
+    sections: FormSection[];
+    actions: ButtonMetadata;
+    state: ComponentState;
+};

package/lib/services/download.service.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class DownloadService {
+    getFileNameFromUrl(url: string): string;
+    openNewTab(url: string): void;
+    downloadLinkFromBrowser(url: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DownloadService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DownloadService>;
+}

package/lib/services/lang-provider/components/lang-settings.d.ts

@@ -0,0 +1,3 @@
+import { TextContent } from '../types';
+declare const _default: TextContent;
+export default _default;

package/lib/services/lang-provider/components/theme-settings.d.ts

@@ -0,0 +1,3 @@
+import { TextContent } from "../types";
+declare const _default: TextContent;
+export default _default;

package/lib/services/lang-provider/content.d.ts

@@ -0,0 +1,6 @@
+import { TextContent } from './types';
+export interface Provider {
+    [x: string]: TextContent;
+}
+declare const content: Provider;
+export default content;

package/lib/services/lang-provider/lang-provider.service.d.ts

@@ -0,0 +1,17 @@
+import { BehaviorSubject } from 'rxjs';
+import { Provider } from './content';
+import { LangOption, LanguageText } from './types';
+import { ValtechConfig } from '../types';
+import * as i0 from "@angular/core";
+export declare class LangService {
+    content: Provider;
+    default: LangOption;
+    selectedLang: BehaviorSubject<LangOption>;
+    config: ValtechConfig;
+    constructor(config: ValtechConfig);
+    Text(className: string): LanguageText;
+    get Lang(): LangOption;
+    set Lang(lang: LangOption);
+    static ɵfac: i0.ɵɵFactoryDeclaration<LangService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LangService>;
+}

package/lib/services/lang-provider/types.d.ts

@@ -0,0 +1,15 @@
+export type LanguageText = {
+    [key: string]: string;
+};
+export type LanguagesContent = {
+    [key: string]: LanguageText;
+};
+export declare class TextContent {
+    text: LanguagesContent;
+    constructor(text: LanguagesContent);
+    get Content(): LanguagesContent;
+}
+export declare enum LangOption {
+    ES = "es",
+    EN = "en"
+}

package/lib/services/local-storage.service.d.ts

@@ -0,0 +1,6 @@
+export declare class LocalStorageService {
+    static set<T>(reference: string, value: T): void;
+    static get<T>(reference: string): T;
+    static remove(reference: string): void;
+    static clear(): void;
+}

package/lib/services/theme.service.d.ts

@@ -0,0 +1,27 @@
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare enum ThemeOption {
+    LIGHT = "light",
+    DARK = "dark",
+    AUTO = "auto"
+}
+export declare class ThemeService {
+    lightToggle: boolean;
+    darkToggle: boolean;
+    autoToggle: boolean;
+    currentOption: ThemeOption;
+    themeOptions: typeof ThemeOption;
+    prefersDark: boolean;
+    default: ThemeOption;
+    theme: BehaviorSubject<ThemeOption>;
+    constructor();
+    private handleAutoConfiguration;
+    private handleDarkPreference;
+    private handleLightPreference;
+    get Theme(): ThemeOption;
+    set Theme(theme: ThemeOption);
+    toggleTheme(name: string, shouldAdd: boolean): void;
+    toggleUserPreference(option: ThemeOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

package/lib/services/types.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from "@angular/core";
+import { Provider } from "./lang-provider/content";
+export interface ValtechConfig {
+    content: Provider;
+}
+export declare const ValtechConfigService: InjectionToken<ValtechConfig>;

package/lib/shared/constants/storage.d.ts

@@ -0,0 +1,2 @@
+export declare const LANG = "LANG";
+export declare const THEME = "THEME";

package/lib/shared/utils/dom.d.ts

@@ -0,0 +1,3 @@
+import { ElementRef } from "@angular/core";
+export declare const goToTop: (id: string) => void;
+export declare const isAtEnd: (elementRef: ElementRef) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -10,7 +10,17 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "devDependencies": {
-    "@ionic/angular": "^8.0.0"
+  "module": "fesm2022/valtech-components.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/valtech-components.mjs",
+      "esm": "./esm2022/valtech-components.mjs",
+      "default": "./fesm2022/valtech-components.mjs"
+    }
   }
-}
+}

package/public-api.d.ts

@@ -0,0 +1,11 @@
+export * from './lib/components/atoms/button/button.component';
+export * from './lib/components/atoms/button/types';
+export * from './lib/components/atoms/button/factory';
+export * from './lib/services/lang-provider/lang-provider.service';
+export * from './lib/services/lang-provider/types';
+export * from './lib/services/local-storage.service';
+export * from './lib/services/theme.service';
+export * from './lib/services/download.service';
+export * from './lib/services/types';
+export * from './lib/shared/utils/dom';
+export * from './lib/components/types';

package/src/lib/components/styles/functions.scss

@@ -0,0 +1,20 @@
+@import './variables.scss';
+
+$base-size: $size-base;
+
+@function pxToRem($target, $context: $base-size) {
+  @return calc($target / $context) * 1rem;
+}
+
+@function pxToRemGroup($top, $right, $bottom, $left, $context: $base-size) {
+  $top: calc($top / $context) * 1rem;
+  $right: calc($right / $context) * 1rem;
+  $bottom: calc($bottom / $context) * 1rem;
+  $left: calc($left / $context) * 1rem;
+
+  @return ($top $right $bottom $left);
+}
+
+@function addColorOpacity($hex, $opacity: 1) {
+  @return rgba($hex, $opacity);
+}

package/src/lib/components/styles/media-queries.scss

@@ -0,0 +1,66 @@
+@mixin media-xsmall {
+  @media (min-width: 425px) {
+    @content;
+  }
+}
+
+@mixin media-small {
+  @media (min-width: 576px) {
+    @content;
+  }
+}
+
+@mixin media-medium {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin media-large {
+  @media (min-width: 992px) {
+    @content;
+  }
+}
+
+@mixin media-xlarge {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+/* Max */
+@mixin max-media-xsmall {
+  @media (max-width: 425px) {
+    @content;
+  }
+}
+
+@mixin max-media-small {
+  @media (max-width: 576px) {
+    @content;
+  }
+}
+
+@mixin max-media-medium {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin max-media-large {
+  @media (max-width: 992px) {
+    @content;
+  }
+}
+
+@mixin max-media-xlarge {
+  @media (max-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin dark {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}

package/src/lib/components/styles/mixins.scss

@@ -0,0 +1,66 @@
+@import './media-queries.scss';
+@import './variables.scss';
+@import './functions.scss';
+@import './typography.scss';
+
+@mixin box-shadow-small {
+  box-shadow: 0 pxToRem(4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
+}
+
+@mixin box-shadow-small-top {
+  box-shadow: 0 pxToRem(-4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
+}
+
+@mixin box-shadow-medium {
+  box-shadow: pxToRem(3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
+}
+
+@mixin box-shadow-medium-bottom {
+  box-shadow: pxToRem(-3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
+}
+
+@mixin box-shadow-large {
+  box-shadow: 0 pxToRem(10) pxToRem(16) addColorOpacity($color-default-shadow, 0.08);
+}
+
+@mixin box-shadow-large-top {
+  box-shadow: 0 pxToRem(-10) pxToRem(16) addColorOpacity($color-default-shadow, 0.07);
+}
+
+@mixin transform-translateY($value) {
+  transform: translateY($value);
+  -webkit-transform: translateY($value);
+  -moz-transform: translateY($value);
+  -ms-transform: translateY($value);
+  -o-transform: translateY($value);
+}
+
+@mixin transform-translate-y-3d($value) {
+  -webkit-transform: translate3d(0, $value, 0);
+  -moz-transform: translate3d(0, $value, 0);
+  -o-transform: translate3d(0, $value, 0);
+  -ms-transform: translate3d(0, $value, 0);
+  transform: translate3d(0, $value, 0);
+}
+
+@mixin fade-in-translateY {
+  @keyframes fadeInTranslateY {
+    @content;
+  }
+
+  @-moz-keyframes fadeInTranslateY {
+    @content;
+  }
+
+  @-webkit-keyframes fadeInTranslateY {
+    @content;
+  }
+
+  @-o-keyframes fadeInTranslateY {
+    @content;
+  }
+
+  @-ms-keyframes fadeInTranslateY {
+    @content;
+  }
+}

package/src/lib/components/styles/overrides.scss

@@ -0,0 +1,158 @@
+@import './variables.scss';
+@import './functions.scss';
+@import './mixins.scss';
+
+/** core **/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+form {
+  width: 100%;
+}
+
+/** ionic components **/
+
+ion-grid,
+ion-col {
+  padding: 0;
+}
+
+ion-button {
+  font-weight: $font-weight-semi-bold;
+}
+
+ion-card {
+  border-radius: pxToRem(8);
+  margin: pxToRem(16) auto;
+}
+
+input {
+  &.native-input {
+    font-family: var(--ion-default-font), Arial, sans-serif;
+    margin-top: pxToRem(6) !important;
+    padding: pxToRem(4) pxToRem(8) !important;
+
+    border: pxToRem(1) solid var(--ion-color-medium) !important;
+    border-radius: pxToRem($border-radius-small) !important;
+
+    &:focus {
+      border: pxToRem(2) solid var(--ion-color-primary) !important;
+    }
+  }
+}
+
+ion-searchbar div input {
+  padding-inline-start: pxToRem(28);
+  margin-top: pxToRem(6) !important;
+
+  border: pxToRem(1) solid var(--ion-color-medium) !important;
+  border-radius: pxToRem($border-radius-small) !important;
+
+  &:focus {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
+}
+
+ion-searchbar div ion-icon {
+  margin-top: pxToRem(2);
+}
+
+ion-datetime,
+ion-select {
+  margin-top: pxToRem(8);
+  padding-left: pxToRem(10) !important;
+  border: pxToRem(1) solid var(--ion-color-medium) !important;
+  border-radius: pxToRem($border-radius-small) !important;
+
+  &:focus {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
+}
+
+ion-label {
+  text-align: start;
+  font-weight: $font-weight-bold;
+}
+
+ion-toolbar {
+  --background: transparent;
+}
+
+ion-input {
+  margin-top: 0px;
+}
+
+ion-select {
+  padding-right: pxToRem(10) !important;
+
+  &.select-expanded {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
+}
+
+ion-alert {
+  --min-width: 80% !important;
+
+  @include media-medium {
+    --min-width: 400px !important;
+  }
+
+  .alert-radio-label {
+    font-weight: $font-weight-bold;
+  }
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  }
+}
+
+ion-label {
+  text-align: start;
+}
+
+ion-note {
+  text-align: end !important;
+}
+
+ion-toolbar {
+  --background: transparent;
+  padding: pxToRem(4) pxToRem(8);
+}
+
+ion-back-button {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+}
+
+ion-modal .date-picker-custom {
+  max-width: 340px;
+  max-height: 390px;
+
+  .ion-page {
+    justify-content: flex-start !important;
+  }
+}
+
+.img-black {
+  filter: invert(0);
+
+  @media (prefers-color-scheme: dark) {
+    filter: invert(1);
+  }
+}