Socrate

This library was generated with Angular CLI version 8.0.3.

Code scaffolding

Run ng generate component component-name --project socrate to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project socrate.

Note: Don't forget to add --project socrate or else it will be added to the default project in your angular.json file.

Build

Run ng build socrate to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build socrate, go to the dist folder cd dist/socrate and run npm publish.

Running unit tests

Run ng test socrate to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Providers

To use the socrate-ng library you need to provide in your application module root:

@Injectable()
export class CustomConfig extends SocrateServiceConfig {
    apiUrl = 'https://api.wishtack.io/api/v2';
}

@NgModule({
    providers: [
        {
            provide: SocrateServiceConfig,
            useClass: CustomConfig
        }
    ]
})
export AppModule {}

Components

• Labels
• PriceLabels
• Buttons
• Inputs
• Cards
• Notifications
• Thumbnails
• Navigators

Labels

This section will present you all the labels of Socrate

Selector

<so-label></so-label>

API

data

Set the data to the label component, can be a basic string or SocrateModule

clickable

Set to true if the label has clickable effects

preIconValue

Set the prefix icon value

sufIconValue

Set the suffix icon value

Example

Use:

<so-label data="Module Test"></so-label>

Will display:

Price Labels

This section will present you all the Price labels of Socrate

Selector

<so-price-label></so-price-label>

To use the price label, you can set the current currency (Default €):

@Injectable()
export class CustomCurrency extends SocrateCurrency {
    symbol = '€';
    name = 'euros';
}

@NgModule({
    providers: [
        {
            provide: SocrateCurrency,
            useClass: CustomCurrency
        }
    ]
})
export AppModule {}

API

price

Set the price

mode

Set the mode of display between symbol or text (Default to symbol)

separator

Set the separation between the price and symbol (Default to ' ')

suffix

Set the suffix to display (Default to '')

prefix

Set the prefix to display (Default to '')

Example

Use:

<so-price-label price="20" prefix="=" separator=""></so-price-label>

Will display:

Buttons

This section will present you all the buttons of Socrate.

Basic button

Selector

<so-button></so-button>

API

type

• text
• outlined
• primary
• wave

disabled

Set the button to disabled mode

Example

Use:

<so-button type="text">Hey</so-button>

Will display:

Use:

<so-button type="outlined">Hey</so-button>

Will display:

Use:

<so-button>Hey</so-button>

Will display:

Toggle button:

Selector

<so-toggle-button></so-toggle-button>

API

state

The current state of the toggle button (True = Activated)

onToggle

Event emit every state change by the user (click)

onStateOn

Event emit every time the state is true

onStateOff

Event emit every time the state is false

Example

Use:

<so-toggle-button [state]="true">Hey</so-toggle-button>

Will display:

Inputs

This section will present you all the inputs of Socrate.
The socrate inputs are Form reactive compliant.

Selector

<so-input-container></so-input-container>

API

type

• checkbox
• radio
• switch
• slider
• text
• password (TODO)
• date (TODO)
• hour (TODO)
• file (TODO (great example in socrate-front))
• editor (TODO)
• number
• textarea

options

interface SocrateInputOptions {
  // The placeholder to display
  placeholder?: string;
  // The label to display
  label?: string;
  // Custom errors messages
  errors?: { [errorName: string]: string };
  // Options - Use by Radio or Select
  options?: { name: string, value: string }[];
  // The minimum value - Use by slider and number
  min?: number;
  // The maximum value - Use by slider and number
  max?: number;
}

name

The name of the input, it's required for the radio input and generate the input id.

value

The current value of the input

errors

The errors input take a ValidationErrors and show the errors.
You can setup all the error message with the SocrateGlobalErrors.
You just need to provide a custom SocrateGlobalErrors with a link to your translator.

Original:

export class SocrateGlobalErrors {
  required = () => Promise.resolve('This field is required');
  requiredTrue = () => Promise.resolve('This field must be checked');
  email = () => Promise.resolve('This email isn\'t valid');
  minLength = () => Promise.resolve('This field is too short');
  maxLength = () => Promise.resolve('This field is too long');
  pattern = () => Promise.resolve('This field isn\'t valid');
  min = () => Promise.resolve('This value is less than the minimum');
  max = () => Promise.resolve('This value is more than the maximum');
  [errorName: string]: () => Promise<string>;
}

Custom:

export class CustomSocrateGlobalErrors extends SocrateGlobalErrors {
  required = () => this._translate.get('ERRORS.REQUIRED');
  ...
  [errorName: string]: () => Promise<string>;
}

isInvalid

If isInvalid is true, the input will check the errors send with the errors input to display the error message

Example

Use:

<so-input
  type="text"
  [value]="myValue"
  [showErrors]="hasSubmit"
  [errors]="validationErrors"
></so-input>

// TODO add images

Cards

This section will present you all the cards of Socrate

Selector

<so-card></so-card>

API

• default

mode

• default
• clickable: Same as full but without the footer (Action with click)

disableHeaderPadding

Disable the header default padding of the card

disableBodyPadding

Disable the body default padding of the card

disableFooterPadding

Disable the footer default padding of the card

Templates

The socrate cards are taking two type of templates in the content of the component:

• #soHeader
• #soBody
• #soFooter

Example

Use:

<so-card mode="simple" [data]="mentorData">
  <!-- Will be display in the header section of the card -->
  <ng-template #soHeader>
    <div class="so-custom-card-header-example">
      <span>Header</span> 
    </div>
  </ng-template>
  <!-- Will be display in the body section of the card -->
  <ng-template #soBody>
    <div>
      <h1>This is my body</h1>
    </div>
  </ng-template>
  <!-- Will be display in the footer section of the card -->
  <ng-template #soFooter>
    <div>
      <span>Footer</span>
    </div>
  </ng-template>
</so-card>

Will display:

Notifcations

This section will present you all the notifications of Socrate

Selector

<so-notification></so-notification>

API

isCollapsible

Set if the notification is collapsible

opened

Set if the notification is opend or not

iconData

Set the data of the icon

export class SoNotificationIconData {
  constructor(
    public icon: string,
    public colorClass = 'so-secondary',
    public bgClass = 'so-bg-primary'
  ) {}
}

Templates

The socrate notifications are taking 5 type of templates in the content of the component:

• #soContent: The content of the inline notification
• #soActions: The actions of the inline notification
• #soOpenedHeader: The header of the opened notification
• #soOpenedContent: The content of the opened notification
• #soOpenedActions: The actions of the opened notification

Example

Use:

    <so-notification
        isCollapsible="true"
        [iconData]="iconData"
    >
      <ng-template #soContent>
        <div>
          <p>Test content not opened</p>
        </div>
      </ng-template>
      <ng-template #soActions>
        <div>
          <p>Test actions not opened</p>
        </div>
      </ng-template>
      <ng-template #soOpenedHeader>
        <div>
          <p>Test header</p>
        </div>
      </ng-template>
      <ng-template #soOpenedContent>
        <div>
          <p>Test opened content</p>
        </div>
      <ng-template/>
      <ng-template #soOpenedActions>
        <div>
          <p>Test opened actions</p>
        </div>
      </ng-template>
    </so-notification>

Will display:

Thumbnails

This section will present you all the thumbnails of Socrate

Selector

<so-thumbnail></so-thumbnail>

API

src

Set the image (string) to display

thumbClass

Set all the classes to the thumbnail div:

• square: Square image
• circle: Circle image
• full-radius: Add 20px radius to the image
• top-radius: Just top
• bottom-radius: Just bottom
• bordered: Add shadow + white border around the image

displayLabel

Set the label display, true to show the label on the thumbnail

onClickCommands

Set the router link with the data of onClickCommands and make the thumbnail clickable

Template

For this thumbnail, it's possible to add some content in front of the image

<so-thumbnail [src]="myImage">
  <div so-thumbnail-label>
    <h2>Test !</h2>
  </div>
</so-thumbnail>

Example

Use:

<so-thumbnail
  thumbClass="circle bordered"
  [src]="myImage"
  [displayLabel]="true"
  [onClickCommands]="['/test']"
>
  <p so-thumbnail-label>Test</p>
</so-thumbnail>

Will display:

Navigators

Selector

<so-navigator></so-navigator>

The navigator is using two modules to work with:

• Router
• Translate

In the routes of your router, you need to add in the data some fields:

• name: The name of the route (Will be use for the translation)
• navigatorId: To be selected by the navigator to display your navigation needs
• icon: The icon value used with so-font-icon component (Optional)

So to use the socrate navigator you need to setup in your translation file the correct path names like:

"TEST": {
"TEST1": "Super test1 page",
"TEST2": "Test2 page"
}

For this route configuration:

{ ..., data: { name: 'test1', navigatorId: 'test' } },
{ ..., data: { name: 'test2', navigatorId: 'test' } }

API

navigatorId

The id to filter all the items to display in the navigator.

Example

Use:

<so-navigator
  navigatorId="test"
></so-navigator>