Pacífico Elements snippets

accordion.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/accordion'
import '@pacificoseguros/elements/typography'
import '@pacificoseguros/elements/number'
import '@pacificoseguros/icons/ambulance'

@Component({
  selector: 'app-accordion-demo',
  templateUrl: './accordion.html'
})
export class AccordionDemo {
  open: boolean = false

  onToggle(e: CustomEvent<boolean>) {
    this.open = e.detail 
  }
}

accordion.html

<ck-accordion [open]="open" (toggle)="onToggle($event)">
  <ck-accordion-header center>
    <ck-icon-ambulance
      slot="icon"
      height="25px"
      width="25px"
      color="#09c"
    />
    <ck-typography
      slot="title"
      size="16px"
      style="font-weight: 600"
     >
      Emergencias
    </ck-typography>
  </ck-accordion-header>
  <ck-accordion-content>
    <div
      style="display: flex; align-items: center; padding: 15px 25px 25px 15px"
    >
      <span style="font-family: var(--font-default)">
        ¡Cubre al
       </span>
      <ck-number
        value="100"
        suffix="%"
        style="margin: 0 6px"
       />
      <span style="font-family: var(--font-default)">
        toda emergencia!
      </span>
    </div>
  </ck-accordion-content>
</ck-accordion>

accordion.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/accordion'
import '@pacificoseguros/elements/typography'
import '@pacificoseguros/elements/number'
import '@pacificoseguros/icons/ambulance'

export const Accordion: SFC = () => {
  const [open, setOpen] = useState(false)
  const onToggle = (e: CustomEvent<boolean>) => {
    setOpen(e.detail)
  }
  return (
    <div className="accordion">
      <ck-accordion open={open} onEventToggle={onToggle}>
        <ck-accordion-header center>
          <ck-icon-ambulance
            slot="icon"
            height="25px"
            width="25px"
            color="#09c"
          />
          <ck-typography
            slot="title"
            size="16px"
            style={{ fontWeight: 600 }}
           >
            Emergencias
          </ck-typography>
        </ck-accordion-header>
        <ck-accordion-content>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              padding: "15px 25px 25px 15px"
            }}
          >
            <span style={{ fontFamily: "var(--font-default") }}>
              ¡Cubre al
             </span>
            <ck-number
              value="100"
              suffix="%"
              style={{ margin: "0 6px" }}
             />
            <span style={{ fontFamily: "var(--font-default" }}>
              toda emergencia!
            </span>
          </div>
        </ck-accordion-content>
      </ck-accordion>
    </div>
  )
}

app-bar.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/app-bar'
import '@pacificoseguros/icons/menu'

@Component({
  selector: 'app-bar',
  templateUrl: './app-bar.html'
})
export class AppBar {
  ...
}

app-bar.html

<ck-app-bar>
  <!-- tanto left como right son opconales -->
  <button slot="left" class="btn-menu-trigger">
    <ck-icon-menu color="white" height="20px" width="20px" />
  </button>
  <aside class="menu">
    { ... }
  </aside>
</ck-app-bar>

app-bar.tsx

import React, { SFC } from 'react'
import '@pacificoseguros/elements/app-bar'
import '@pacificoseguros/icons/menu'

export const AppBar: SFC = function() {
  return (
    <ck-app-bar>
      { // opcional tanto left como right }
      <a slot="left" class="btn-menu-trigger">
        <ck-icon-menu color="white" height="20px" width="20px" />
      </a>
      <aside class="menu">
        { ... }
      </aside>
    </ck-app-bar>
  )
}

button.component.ts

import { Component } from '@angular/core'

@Component({
  selector: 'app-button',
  templateUrl: './button.html'
})
export class ButtonDemo {
  kind: string = 'primary'
  outline: outline = false
  disabled: boolean = false
}

button.html

<ck-button [kind]="kind" [outline]="outline" [disabled]="disabled">
  <ck-icon-download height="18px" color="#444" />
  <span>Download</span>
</ck-button>

button.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/icons/download'
import '@pacificoseguros/elements/button'

export const Button: SFC = () => {
  const [type, setType] = useState('primary') // primary, secondary, warning, danger
  const [outline, setOutline] = useState(false)
  const [disabled, setDisabled] = useState(false)
  // hay otras propiedades como: height, width, background, color, etc.
  
  return (
    <ck-button kind={kind} outline={outline} disabled={disabled}>
      <ck-icon-download height="18px" color="#444" />
      <span>Download</span>
    </ck-button>
  )
}

card.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/card'

@Component({
  selector: 'app-card',
  templateUrl: './card.html'
})
export class Card {
  inline: boolean = false
  width: string = ''
  height: string = ''
  radius: string = ''
  background: string = '#fff'
}

card.html

<ck-card
  [width]="width"
  [height]="height"
  [radius]="radius"
  [background]="background"
  [inline]="inline"
>
</ck-card>

card.tsx

import React, { SFC, useState } from 'react'
import '@pacificoseguros/elements/card'

export const Card: SFC = function() {
  const [width, setWidth] = useState('')
  const [height, setHeight] = useState('')
  const [radius, setRadius] = useState('')
  const [background, setBackground] = useState('')
  const [inline, setInline] = useState(false)

  return (
    <ck-card
     width={width}
     height={height}
     radius={radius}
     background={background}
     inline={inline}
    />
  )
}

checkbox-group.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/checkbox-group'
import '@pacificoseguros/elements/checkbox'

@Component({
  selector: 'app-checkbox-group',
  templateUrl: './checkbox-group.html'
})
export class CheckboxGroup {
  multiple: boolean = false

  onCheck(e: CustomEvent<string[]>) {
    const selectedItems: string[] = e.detail
    console.log('Selected items:', selectedItems)
  }
}

checkbox-group.html

<ck-checkbox-group [multiple]="multiple" (check)="onCheck($event)">
  <ck-checkbox name="sms">Avísame por SMS</ck-checkbox>
  <ck-checkbox disabled name="email">Avísame por email</ck-checkbox>
  <ck-checkbox name="call">Avísame por llamada</ck-checkbox>
</ck-checkbox-group>

checkbox-group.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/checkbox'
import '@pacificoseguros/elements/checkbox-group'

export const CheckboxGroup: SFC = () => {
  const [multiple, setMultiple] = useState(true)

  const onCheck = (e: CustomEvent<string[]>) => {
    const selected = e.detail
    console.log('Selected items:', selected)
  }
    
  return (
    <ck-checkbox-group multiple={multiple} onEventCheck={onCheck}>
      <ck-checkbox name="sms">Avísame por SMS</ck-checkbox>
      <ck-checkbox disabled name="email">Avísame por email</ck-checkbox>
      <ck-checkbox name="call">Avísame por llamada</ck-checkbox>
    </ck-checkbox-group>
  )
}

checkbox.component.ts

import { Component } from '@angular/core'
import { FormControl, Validators } from '@angular/forms'
import '@pacificoseguros/elements/checkbox'

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.html'
})
export class Checkbox {
  acceptTerms: FormControl = new FormControl('', [Validators.requiredTrue])
}

checkbox.html

<ck-checkbox
  [formControl]="acceptTerms"
>
  Acepto los términos y condiciones
</ck-checkbox>

checkbox.tsx

/** @jsx h */
import { SFC, FormEvent, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/checkbox'
import { getRealTarget } from '../../libs/get-real-target'

export const Checkbox: SFC = () => {
  const [checked, setChecked] = useState(false)
  const [disabled, setDisabled] = useState(false)

  const onChange = (e: FormEvent<HTMLInputElement>) => {
    const target = getRealTarget<HTMLInputElement>(e)
    setChecked(target.checked)
  }

  return (
    <ck-checkbox
      onChange={onChange}
      name="acceptTerms"
      checked={checked}
    >
      Acepto los términos y condiciones
    </ck-checkbox>
  )
}

datepicker.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elememts/input-date'

type DateChangePayload {
  target: HTMLInputElement,
  date: Date
}

@Component({
  selector: 'app-input-date',
  templateUrl: './input-date.html'
})
export class InputDate {
  onDateChange(e: CustomEvent<DateChangePayload>) {
    const { target, date } = e.detail 
  }
}

datepicker.html

<!-- accepts same props than input -->
<ck-datepicker (date-change)="onDateChange($event)"></ck-datepicker>

datepicker.tsx

/** @jsx h */
import { useState } from "react"
import h from "@pacificoseguros/elements/pragma"
import "@pacificoseguros/icons/calendar"
import "@pacificoseguros/elements/input-addon"
import "@pacificoseguros/elements/input-date"

type DateChangePayload {
  target: HTMLInputElement,
  date: Date
}

export const DatePicker = () => {
  function onDateChange(e: CustomEvent<DateChangePayload>) {
    const { target, date } = e.detail 
  }

  return (
    <div className="input-date">
      <ck-input-addon>
        <ck-icon-calendar
           height="18px"
           width="18px"
           slot="icon"
           color="#999"
        />
        <ck-datepicker
          slot="input"
          placeholder="Seleccione una fecha"
          value="23/09/1993"
          onEventDateChange={e => {
            const { value } = e.detail
            setDate(value)
          }}
        />
      </ck-input-addon>
    </div>
  )
}

grid.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/grid'

@Component({
  selector: 'app-grid',
  templateUrl: './grid.html'
})
export class Grid {
  
}

grid.html

<style>
  .col {
    background: #e3e4e5;
    padding: 10px;
    textAlign: center;
    fontSize: 12px;
    fontFamily: var(--font-default),
    fontWeight: 500;
    color: #555;
  }
</style>

<ck-grid>
  <ck-grid-row style="background: '#f4f5f6', padding: '10px 5px'">
    <ck-grid-col xs="12" sm="6" md="4" lg="7">
      <div class="col">
        xs = 12 • sm = 6 • md = 4 • lg = 7
      </div>
    </ck-grid-col>
    <ck-grid-col xs="12" sm="6" md="8" lg="5">
      <div class="col">
        xs = 12 • sm = 6 • md = 8 • lg = 5
      </div>
    </ck-grid-col>
  </ck-grid-row>
</ck-grid>

grid.tsx

import * as React from 'react'
import '@pacificoseguros/elements/grid'

const styles = {
  col: {
    background: '#e3e4e5',
    padding: '10px',
    textAlign: 'center',
    fontSize: 12,
    fontFamily: 'var(--font-default)',
    fontWeight: '500',
    color: '#555',
    textTransform: 'uppercase'
  }
}

export const Grid = () => (
  <ck-grid>
    <ck-grid-row style={{ background: '#f4f5f6', padding: '10px 5px' }}>
      <ck-grid-col xs="12" sm="6" md="4" lg="7">
        <div style={styles.col}>
          xs = 12 • sm = 6 • md = 4 • lg = 7
        </div>
      </ck-grid-col>
      <ck-grid-col xs="12" sm="6" md="8" lg="5">
        <div style={styles.col}>
          xs = 12 • sm = 6 • md = 8 • lg = 5
        </div>
      </ck-grid-col>
    </ck-grid-row>
  </ck-grid>
)

input-addon.component.ts

import { Component } from '@angular/core'
import { FormControl, Validators } from '@angular/forms'
import '@pacificoseguros/elements/input-addon'
import '@pacificoseguros/elements/input'
import '@pacificoseguros/icons/calendar'

@Component({
  selector: 'app-input-addon',
  templateUrl: './input-addon.html'
})
export class InputAddonDemo {
  raised: boolean = false
  invalid: boolean = false
  disabled: boolean = false
  loading: boolean = false
  birthDate: FormControl = new FormControl('', [Validators.required])
}

input-addon.html

<div [ngStyle]="{ background: raised ? '#09c' : '#fff' }">
  <ck-input-addon>
    <ck-icon-calendar
      height="18px"
      width="20px"
      color="#aaa"
      slot="icon"
    />
    <ck-input
      [formContro]="birthDate"
      [raised]="raised"
      [loading]="loading"
      [invalid]="birthDate.touched && birthDate.invalid"
      [disabled]="disabled"
      placeholder="Ingresa una fecha"
    >
    </ck-input>
  </ck-input-addon>
</div>

input-addon.tsx

/** @jsx h */
import {
  SFC,
  useState,
  FormEvent
} from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/icons/calendar'
import '@pacificoseguros/elements/input-addon'
import '@pacificoseguros/elements/input'
import { getRealTarget } from '../../libs'

export const InputAddon: SFC = function() {
  const [value, setValue] = useState('')
  const [raised, setRaised] = useState(false)
  const [invalid, setInvalid] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const [loading, setLoading] = useState(false)

  const handleChange = (e: FormEvent<HTMLInputElement>) => {
    const target = getRealTarget<HTMLInputElement>(e)
    setValue(target.value)
  }

  return (
    <div style={{ background: raised ? '#09c' : '#fff' }}>
      <ck-input-addon>
        <ck-icon-calendar
          height="18px"
          width="20px"
          color="#aaa"
          slot="icon"
        />
        <ck-input
          value={value}
          placeholder="Ingresa un valor"
          raised={raised}
          invalid={invalid}
          disabled={disabled}
          loading={loading}
        />
      </ck-input-addon>
    </div>
  )
}

input-card.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/input-card'

type CardValueChange {
  target: HTMLInputElement,
  value: string,
  rawValue: string
}

@Component({
  selector: 'app-input-card',
  templateUrl: './input-card.html'
})
export class InputCard {
  value: string = ''

  onCardValueChange(e: CustomEvent<CardValueChange>) {
    const { target, value, rawValue } = e.detail
    this.value = value
    // target is the input itself
    // value is the masked value: XXXX-XXXX
    // rawValue is the value without mask: XXXXXXXX
  }
  
  onCardTypeChange(e: CustomEvent<string>) {
    const { detail: cardType } = e
    // cardType is the company behind the card (visa, mastercard, diners and amex)
  }
}

input-card.html

<!-- all input properties are valid for this component too -->
<ck-input-card
  [value]="value"
  (card-value-change)="onCardValueChange($event)"
  (card-type-change)="onCardTypeChange($event)" 
>
</ck-input-card>

input-card.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/input-card'

type CardChangePayload {
  target: HTMLInputElement,
  value: string,
  rawValue: string
}

export class InputCard: SFC = function() {
  const [cardNumber, setCardNumber] = useState('')

  const onCardValueChange = function(e: CustomEvent<CardChangePayload>) {
    const { target, value, rawValue } = e.detail
    setCardNumber(value)
  }
  
  const onCardTypeChange = function(e: CustomEvent<string>) {
    const { detail: cardType } = e
    // cardType is the company behind the card (visa, mastercard, diners and amex)
  }

  // accepts same properties than input
  return (
    <ck-input-card
      onEventCardValueChange={onCardValueChange}
      onEventCardTypeChange={onCardTypeChange}
    />
  )
}

input.component.ts

import { Component } from '@angular/core'
import { FormControl, Validators } from '@angular/forms'
import '@pacificoseguros/elements/input'

@Component({
  selector: 'app-input',
  templateUrl: './input.html'
})
export class InputDemo {
  raised: boolean = false
  invalid: boolean = false
  disabled: boolean = false
  loading: boolean = false
  email: FormControl = new FormControl('', [Validators.required])
}

input.html

<div [ngStyle]="{ background: raised ? '#09c' : '#fff' }">
  <ck-input
    [formContro]="email"
    [raised]="raised"
    [loading]="loading"
    [invalid]="email.touched && email.invalid"
    [disabled]="disabled"
    placeholder="Ingresa un email"
  >
  </ck-input>
</div>

input.tsx

/** @jsx h */
import {
  SFC,
  useState,
  useEffect,
  FormEvent
} from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/input'
import { getRealTarget } from '../../libs'

export const Input: SFC = function() {
  const [value, setValue] = useState('')
  const [raised, setRaised] = useState(false)
  const [invalid, setInvalid] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const [loading, setLoading] = useState(false)

  const handleChange = (e: FormEvent<HTMLInputElement>) => {
    const target = getRealTarget<HTMLInputElement>(e)
    setValue(target.value)
  }

  return (
    <div style={{ background: raised ? '#09c' : '#fff' }}>
      <ck-input
        value={value}
        placeholder="Ingresa un valor"
        raised={raised}
        invalid={invalid}
        disabled={disabled}
        loading={loading}
      />
    </div>
  )
}

modal.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/modal'

@Component({
  selector: 'app-modal',
  templateUrl: './modal.html'
})
export class Modal {
  header: string = ''
  radius: string = ''
  maxWidth: string = ''
  open: boolean = false

  onClose() {
    // hacer algo
  }
}

modal.html

<ck-modal
  [header]="header"
  [radius]="radius"
  [maxWdith]="maxWidth"
  [open]="open"
  (close)="onClose()"
>
  <!-- contenido va aquí -->
</ck-modal>

modal.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/modal'

export const Modal: SFC = function() {
  const [header, setHeader] = useState('')
  const [radius, setRadius] = useState('')
  const [maxWidth, setMaxWidth] = useState('')
  const [open, setOpen] = useState(false)

  const onClose = function() {
    // when the modal is closed
  }

  return (
     <ck-modal
        header={header}
        radius={radius}
        maxWdith={maxWidth}
        open={open}
        onEventClose={onClose}
      >
        { /* contenido va aquí */ }
      </ck-modal>
  )
}

number.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/number'

@Component({
  selector: 'app-number',
  templateUrl: './number.html'
})
export class Number {
  value: number = 500
  prefix: string = ''
  suffix: string = ''
  prefixSize: string = ''
  suffixSize: string = ''
  prefixColor: string = ''
  suffixColor: string = ''
  currency: string = ''
  currencySize: string = ''
  currencyColor: string = ''
  color: string
  size: string
  editable: boolean = false
  
  onEdit(e: CustomEvent<number>) {
    
  }
}

number.html

<ck-number
  [value]="value"
  [prefix]="prefix"
  [suffix]="suffix"
  [prefixSize]="prefixSize"
  [suffixSize]="suffixSize"
  [prefixColor]="prefixColor"
  [suffixColor]="suffixColor"
  [currency]="currency"
  [currencySize]="currencySize"
  [currencyColor]="currencyColor"
  [color]="color"
  [size]="size"
  [editable]="editable"
  (edit)="onEdit($event)"
>
</ck-number>

number.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/number'

export const Number: SFC = function() {
  const [value, setValue] = useState(500)
  const [prefix, setPrefix] = useState('')
  const [suffix, setSuffix] = useState('')
  const [prefixSize, setPrefixSize] = useState('')
  const [suffixSize, setSuffixSize] = useState('')
  const [currencySize, setCurrencySize] = useState('')
  const [prefixColor, setPrefixColor] = useState('')
  const [suffixColor, setSuffixColor] = useState('')
  const [currencyColor, setCurrencyColor] = useState('')
  const [size, setSize] = useState('')
  const [color, setColor] = useState('')
  const [editable, setEditable] = useState(false)
  
  const onEdit = function(e: CustomEvent<number>) {
    
  }

  return (
    <ck-number
      value={value}
      prefix={prefix}
      suffix={suffix}
      prefixSize={prefixSize}
      suffixSize={suffixSize}
      currencySize={currencySize}
      prefixColor={prefixColor}
      suffixColor={suffixColor}
      currencyColor={currencyColor}
      color={color}
      size={size}
      editable={editable}
      onEdit={onEdit}
    />
  )
}

range.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/range'

@Component({
  selector: 'app-range',
  templateUrl: './range.html'
})
export class Range {
  min: number = 5000
  max: number = 25000
  value: number = Math.random() * 25000 + 50000
  currency: string = 'S/'
  
  onChange(e: CustomEvent<number>) {
    
  }
  
  onValueEdit(e: CustomEvent<number>) {
               
  }
}

range.html

<ck-range
  [min]="min"
  [max]="max"
  [value]="value"
  [currency]="currency"
  (change)="onChange($event)"
  (value-edit)="onValueEdit($event)"
>
</ck-range>

range.tsx

/** @jsx h */
import { SFC, useState } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/range'

export const Range: SFC = function() {
  const [min, setMin] = useState(5000)
  const [max, setMax] = useState(25000)
  const [value, setValue] = useState(Math.random() * 25000 + 5000)
  const [currency, setCurrency] = useState('S/')
  
  const onEventChange = function(e: CustomEvent<number>) {
    const newVal: number = e.detail
  }
    
  const onEventValueEdit = function(e: CustomEvent<number>) {
    const newVal: number = e.detail
  }
  
  return (
    <ck-range
      min={min}
      max={max}
      value={value}
      currency={currency}
      onEventValueEdit={onEventValueEdit}
      onEventChange={onEventChange}
    />
  )
}

select-addon.component.ts

import { Component } from '@angular/core'
import { FormControl, Validators } from '@angular/forms'
import '@pacificoseguros/elements/select-addon'
import '@pacificoseguros/elements/select'
import '@pacificoseguros/icons/promotion'

@Component({
  selector: 'app-select-addon',
  templateUrl: './select-addon.html'
})
export class SelectAddonDemo {
  fees: FormControl = new FormControl('', Validators.required)
  raised: boolean = false
  options: Record<string, any>[] = [
    { value: 'dni', label: 'DNI' },
    { value: 'carnet', label: 'Carnet de extranjería' },
    { value: 'passport', label: 'Pasaporte' }
  ]
}

select-addon.html

<div [ngStyle]="{ background: raised ? '#09c' : '#fff' }">
  <ck-select-addon>
    <ck-icon-dni
      slot="icon"
      [color]="fees.invalid ? 'var(--danger)' : 'var(--dark)'"
      width="22px"
    />
    <ck-select
      slot="select"
      placeholder="Seleccione Nº de cuotas"
      width="200px"
      [formControl]="fees"
      [raised]="raised"
      [options]="options"
      [invalid]="fees.invalid"
    />
  </ck-select-addon>
</div>

select-addon.tsx

/** @jsx h */
import { SFC, useState, FormEvent } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/icons/dni'
import '@pacificoseguros/elements/select-addon'
import '@pacificoseguros/elements/select'
import { getRealTarget } from '../../libs'

export const SelectAddon: SFC = function() {
  const [raised, setRaised] = useState(false)
  const [invalid, setInvalid] = useState(false)
  const [value, setValue] = useState('')

  const options = [
    { value: 'dni', label: 'DNI' },
    { value: 'carnet', label: 'Carnet de extranjería' },
    { value: 'passport', label: 'Pasaporte' }
  ]

  const handleChange = (e: FormEvent<HTMLSelectElement>) => {
    const target = getRealTarget<HTMLSelectElement>(e)
    setValue(target.value)
  }

  return (
    <div
      style={{ background: raised ? '#09c' : '#fff' }}
    >
      <ck-select-addon>
        <ck-icon-dni
          slot="icon"
          color={ invalid ? 'var(--danger)' : 'var(--dark)' }
          width="22px"
        />
        <ck-select
          slot="select"
          value={value}
          onChange={handleChange}
          placeholder="Seleccione Nº de cuotas"
          width="200px"
          raised={raised}
          options={options}
          invalid={invalid}
        />
      </ck-select-addon>
    </div>
  )
}

select.component.ts

import { Component } from '@angular/core'
import { FormControl, Validators } from '@angular/forms'
import '@pacificoseguros/elements/select'

export class SelectDemo {
  raised: boolean = false
  disabled: boolean = false
  fees: FormControl = new FormControl('', [Validators.required])
  options: Record<string, any>[] = [
    { value: 6, label: '6 meses' },
    { value: 12, label: '12 meses' },
    { value: 18, label: '18 meses' },
    { value: 24, label: '24 meses' }
  ]
}

select.html

<div [ngStyle]="{ background: raised ? '#09c' : '#fff' }">
  <ck-select
    [formControl]="fees"
    [raised]="raised"
    [options]="options"
    [invalid]="fees.invalid"
    [disabled]="disabled"
    placeholder="Seleccione Nº de cuotas"
    width="200px"
  />
</div>

select.tsx

/** @jsx h */
import { SFC, useState, FormEvent } from 'react'
import h from '@pacificoseguros/elements/pragma'
import '@pacificoseguros/elements/select'
import { getRealTarget } from '../../libs'

export const Select: SFC = function() {
  const [raised, setRaised] = useState(false)
  const [invalid, setInvalid] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const [value, setValue] = useState('')

  const options = [
    { value: 6, label: '6 meses' },
    { value: 12, label: '12 meses' },
    { value: 18, label: '18 meses' },
    { value: 24, label: '24 meses' }
  ]

  const handleChange = (e: FormEvent<HTMLSelectElement>) => {
    const target = getRealTarget<HTMLSelectElement>(e)
    setValue(target.value)
  }

  return (
    <div style={{ background: raised ? '#09c' : '#fff' }}>
      <ck-select
        value={value}
        onChange={handleChange}
        raised={raised}
        options={options}
        invalid={invalid}
        disabled={disabled}
        placeholder="Seleccione Nº de cuotas"
        width="200px"
      />
    </div>
  )
}

typography.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/typography'

@Component({
  selector: 'app-typograhy',
  templateUrl: './typography.html'
})
export class Typography {
  kind: string = 'paragraph' // or 'heading'
  color: string = '' // hex or rgb
  size: string = '' // px, em, rem, etc.
  align: string = '' // default -> 'left', others -> 'right', 'center', 'justify'
  variant: string = '' // only works with kind='heading' (h1, h2 and h3)
}

typography.html

<ck-typography
  [kind]="kind"
  [color]="color"
  [size]="size"
  [align]="align"
  [variant]="variant"
>
  Texto de prueba
</typography>

typography.tsx

import React, { SFC } from 'react'
import '@pacificoseguros/elements/typography'

export const Typography: SFC = function() {
  const [kind, setKind] = useState('paragraph')
  const [color, setColor] = useState('')
  const [size, setSize] = useState('')
  const [align, setAlign] = useState('')
  const [variant, setVariant] = useState('')

  return (
    <ck-typography
      kind={kind}
      color={color}
      size={size}
      align={align}
      variant={variant}
    >
      Texto de prueba
    </typography>
  )
}

wizard.component.ts

import { Component } from '@angular/core'
import '@pacificoseguros/elements/wizard'

@Component({
  selector: 'app-wizard',
  templateUrl: './wizard.html'
})
export class WizardDemo {
  totalSteps: number = 6
  currentStep: number = 1
}

wizard.html

<ck-app-bar [steps]="totalSteps" [current]="currentStep"></ck-app-bar>

wizard.tsx

import React, { SFC } from 'react'
import '@pacificoseguros/elements/wizard'

export const Wizard: SFC = function() {
  const [steps, setStep] = useState(6)
  const [current, setCurrent] = useState(1)
  const [color, setColor] = useState('#09c') // cambia el color de pintado de los pasos activos
  
  return (
    <ck-app-bar steps={steps} current={current} />
  )
}