projects/storefrontlib/cms-components/misc/icon/icon.model.ts
Properties |
|
Optional icon |
Type : IconOptions
|
import { Injectable } from '@angular/core';
import { Config } from '@spartacus/core';
import { DirectionMode } from '../../../layout/direction/config/direction.model';
export enum ICON_TYPE {
STAR = 'STAR',
SEARCH = 'SEARCH',
CART = 'CART',
INFO = 'INFO',
GRID = 'GRID',
LIST = 'LIST',
CARET_DOWN = 'CARET_DOWN',
CARET_UP = 'CARET_UP',
CARET_LEFT = 'CARET_LEFT',
CARET_RIGHT = 'CARET_RIGHT',
CLOSE = 'CLOSE',
ERROR = 'ERROR',
WARNING = 'WARNING',
SUCCESS = 'SUCCESS',
VISA = 'VISA',
MASTER_CARD = 'MASTER_CARD',
AMEX = 'AMEX',
DINERS_CLUB = 'DINERS_CLUB',
CREDIT_CARD = 'CREDIT_CARD',
EXPAND = 'EXPAND',
COLLAPSE = 'COLLAPSE',
RESET = 'RESET',
CIRCLE = 'CIRCLE',
HEART = 'HEART',
EMPTY_HEART = 'EMPTY_HEART',
FILTER = 'FILTER',
PENCIL = 'PENCIL',
CLOCK = 'CLOCK',
TRASH = 'TRASH',
ACTIVE = 'ACTIVE',
SORT_DOWN = 'SORT_DOWN',
SORT = 'SORT',
ON = 'ON',
OFF = 'OFF',
LINK_OUT = 'LINK_OUT',
EXPAND_ARROWS = 'EXPAND_ARROWS',
}
@Injectable({
providedIn: 'root',
useExisting: Config,
})
export abstract class IconConfig {
icon?: IconOptions;
}
declare module '@spartacus/core' {
interface Config extends IconConfig {}
}
export interface IconOptions {
/**
* Each icon type can be configured with a so-called symbol. The symbol will
* be used to map the icon to an SVG `symbol` (id) or to the style classes of
* a font based icon. The following configuration would map to a fontawesome
* icon:
*
* icon: {
* symbols: {
* CART: 'fas fa-shopping-cart'
* }
* }
*/
symbols?: {
[ICON_TYPE: string]: string;
};
/**
* Resources are used to map icon types to certain asset, such as an SVG (sprite) image.
* The resource type (`IconResourceType`) dictates whether an SVG image is used. The URL
* is used for the SVG xlink reference.
*/
resources?: IconConfigResource[];
/**
* Lists icons that should be flipped for a specific direction.
*/
flipDirection?: {
[ICON_TYPE: string]: DirectionMode;
};
}
export interface IconConfigResource {
type: IconResourceType | string;
url?: string;
types?: (ICON_TYPE | string)[];
}
/**
* Each ICON type can have an companied resource type, such as SVG, LINK (font) or just TEXT.
* The resources will be automatically loaded in case they're required for the `ICON_TYPE`.
*/
export enum IconResourceType {
/**
* An svg based icon requires an SVG resource that must be loaded,
* this is typically a sprite svg file.
*/
SVG = 'svg',
/**
* A font based ICON might require an additional CSS file to be loaded.
*/
LINK = 'link',
/**
* Text based icons will simply add the ICON string to the DOM. Text icons do not need an image
* or CSS pseudo class (i.e. :before), as the text itself is the icon (i.e. +)
*/
TEXT = 'text',
}