input:chips, input:chips-autocomplete

Type can be input:chips, input:chips-autocomplete

<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="input:chips">
  ...
</discovery-tile>

{
  'type' 'input:list'
  ...
  'macro' <% %>
}

When used by the Events Mechanism, emits the selected value of the input.

Name	Default
--warp-view-input-font-size	1rem
--warp-view-input-border-radius	0.25rem
--warp-view-input-border-color	#c0c0c0
--warp-view-input-label-color	#404040
--warp-view-input-bg-color	#ffffff
--warp-view-button-font-size	1rem
--warp-view-button-border-color	#004eff
--warp-view-button-padding	.375rem .75rem
--warp-view-button-label-color	#ffffff
--warp-view-button-bg-color	#004eff
--warp-view-button-width	auto
--warp-view-button-border-radius	0.25rem
--warp-view-button-secondary-label-color	#ffffff
--warp-view-button-secondary-bg-color	#a0a0a0
--warp-view-button-secondary-border-color	#a0a0a0
--warp-view-autocomplete-hover-background-color	#c0c0c0
--warp-view-chip-background-color	#c0c0c0
--warp-view-chip-close-icon-fill	#404040cc
--warp-view-chip-hover-fill	#404040

Name	Type	Description
data	string[], number[]	Content of the list
globalParams	Option	Global options (see above) concerning this tile
params	Option[]	List of options (see above) concerning each displayed dataset depending of the index of this array
events	Events[]	List of events to emit (see Events Mechanism)

• Options.input.value: Initial value

Chips input

{
  'data' [ "admiring" "adoring" "agitated" "amazing" "angry" "awesome" "backstabbing" "berserk" "big" "boring" "clever" "cocky" "compassionate" "condescending" "cranky" "desperate" "determined" "distracted" "dreamy" "drunk" "ecstatic" "elated" "elegant" "evil" "fervent" "focused" "furious" "gigantic" "gloomy" "goofy" "grave" "happy" "high" "hopeful" "hungry" "insane" "jolly" "jovial" "kickass" "lonely" "loving" "mad" "modest" "naughty" "nauseous" "nostalgic" "pedantic" "pensive" "prickly" "reverent" "romantic" "sad" "serene" "sharp" "sick" "silly" "sleepy" "small" "stoic" "stupefied" "suspicious" "tender" "thirsty" "tiny" "trusting"  ]
  'globalParams' { 'input' { 'value' 'focused' } }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Disabled state

{
  'data' [ "admiring" "adoring" "agitated" "amazing" "angry" "awesome" "backstabbing" "berserk" "big" "boring" "clever" "cocky" "compassionate" "condescending" "cranky" "desperate" "determined" "distracted" "dreamy" "drunk" "ecstatic" "elated" "elegant" "evil" "fervent" "focused" "furious" "gigantic" "gloomy" "goofy" "grave" "happy" "high" "hopeful" "hungry" "insane" "jolly" "jovial" "kickass" "lonely" "loving" "mad" "modest" "naughty" "nauseous" "nostalgic" "pedantic" "pensive" "prickly" "reverent" "romantic" "sad" "serene" "sharp" "sick" "silly" "sleepy" "small" "stoic" "stupefied" "suspicious" "tender" "thirsty" "tiny" "trusting"  ]
  'globalParams' {
    'input' { 
        'value' 'focused'
        'disabled' true 
    }
  }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Chips input with button

{
  'data' [ "admiring" "adoring" "agitated" "amazing" "angry" "awesome" "backstabbing" "berserk" "big" "boring" "clever" "cocky" "compassionate" "condescending" "cranky" "desperate" "determined" "distracted" "dreamy" "drunk" "ecstatic" "elated" "elegant" "evil" "fervent" "focused" "furious" "gigantic" "gloomy" "goofy" "grave" "happy" "high" "hopeful" "hungry" "insane" "jolly" "jovial" "kickass" "lonely" "loving" "mad" "modest" "naughty" "nauseous" "nostalgic" "pedantic" "pensive" "prickly" "reverent" "romantic" "sad" "serene" "sharp" "sick" "silly" "sleepy" "small" "stoic" "stupefied" "suspicious" "tender" "thirsty" "tiny" "trusting"  ]
  'globalParams' { 
    'input' { 
      'value' 'focused'
      'showButton' true
    }
  }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Auto-complete chips

You can use as option:

{
    ...
    "options" {
        "input" {
            "caseSensitive" true        //  Searched text is either case-sensitive or not
            "onlyFromAutocomplete" true //  The new chip must belong to the provided list or can be free
        }
    }
}

{
  'data' [ "admiring" "adoring" "agitated" "amazing" "angry" "awesome" "backstabbing" "berserk" "big" "boring" "clever" "cocky" "compassionate" "condescending" "cranky" "desperate" "determined" "distracted" "dreamy" "drunk" "ecstatic" "elated" "elegant" "evil" "fervent" "focused" "furious" "gigantic" "gloomy" "goofy" "grave" "happy" "high" "hopeful" "hungry" "insane" "jolly" "jovial" "kickass" "lonely" "loving" "mad" "modest" "naughty" "nauseous" "nostalgic" "pedantic" "pensive" "prickly" "reverent" "romantic" "sad" "serene" "sharp" "sick" "silly" "sleepy" "small" "stoic" "stupefied" "suspicious" "tender" "thirsty" "tiny" "trusting"  ]
  'globalParams' { 'input' { 'value' 'focused' } }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}