[{"__symbolic":"module","version":3,"metadata":{"SkyTokensDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-tokens-demo","template":"<h3 class=\"sky-subsection-heading\">\n  Default setup\n</h3>\n\n<p>\n  These tokens can be navigated with the arrow keys, and they can be dismissed with the close buttons.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Non-dismissible tokens\n</h3>\n\n<p>\n  These tokens cannot be dismissed, but they can still be navigated with the arrow keys.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\"\n    [dismissible]=\"false\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Non-focusable tokens\n</h3>\n\n<p>\n  These tokens cannot be focused using the tab key, but they can still be clicked and navigated with the arrow keys.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\"\n    [dismissible]=\"false\"\n    [focusable]=\"false\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Disabled tokens\n</h3>\n\n<p>\n  These tokens are disabled and cannot be dismissed or navigated with the arrow keys.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\"\n    [disabled]=\"true\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Token value interactions\n</h3>\n\n<p>\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"changeColors()\">\n    Change tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"resetColors()\">\n    Reset tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"destroyColors()\">\n    Destroy tokens\n  </button>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Custom setup\n</h3>\n\n<p>\n  These tokens define a custom property to display their values. When users select a token, it emits an event.\n</p>\n\n<p>\n  <sky-tokens\n    displayWith=\"label\"\n    [(tokens)]=\"filters\"\n    [messageStream]=\"tokensController\"\n    (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n    (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n    (tokenSelected)=\"onTokenSelected($event)\">\n    (You may also include content inside the tokens component.)\n  </sky-tokens>\n</p>\n\n<p>\n  <button\n    class=\"sky-btn sky-btn-default\"\n    (click)=\"focusLastToken()\">\n    Focus last token\n  </button>\n</p>\n"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnDestroy":[{"__symbolic":"method"}],"resetColors":[{"__symbolic":"method"}],"changeColors":[{"__symbolic":"method"}],"destroyColors":[{"__symbolic":"method"}],"createColors":[{"__symbolic":"method"}],"onTokenSelected":[{"__symbolic":"method"}],"onFocusIndexUnderRange":[{"__symbolic":"method"}],"onFocusIndexOverRange":[{"__symbolic":"method"}],"focusLastToken":[{"__symbolic":"method"}],"parseTokens":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyTokensDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-tokens-demo","template":"<h3 class=\"sky-subsection-heading\">\n  Default setup\n</h3>\n\n<p>\n  These tokens can be navigated with the arrow keys, and they can be dismissed with the close buttons.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Non-dismissible tokens\n</h3>\n\n<p>\n  These tokens cannot be dismissed, but they can still be navigated with the arrow keys.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\"\n    [dismissible]=\"false\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Non-focusable tokens\n</h3>\n\n<p>\n  These tokens cannot be focused using the tab key, but they can still be clicked and navigated with the arrow keys.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\"\n    [dismissible]=\"false\"\n    [focusable]=\"false\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Disabled tokens\n</h3>\n\n<p>\n  These tokens are disabled and cannot be dismissed or navigated with the arrow keys.\n</p>\n\n<p>\n  <sky-tokens\n    [(tokens)]=\"colors\"\n    [disabled]=\"true\">\n  </sky-tokens>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Token value interactions\n</h3>\n\n<p>\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"changeColors()\">\n    Change tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"resetColors()\">\n    Reset tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"destroyColors()\">\n    Destroy tokens\n  </button>\n</p>\n\n<hr>\n\n<h3 class=\"sky-subsection-heading\">\n  Custom setup\n</h3>\n\n<p>\n  These tokens define a custom property to display their values. When users select a token, it emits an event.\n</p>\n\n<p>\n  <sky-tokens\n    displayWith=\"label\"\n    [(tokens)]=\"filters\"\n    [messageStream]=\"tokensController\"\n    (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n    (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n    (tokenSelected)=\"onTokenSelected($event)\">\n    (You may also include content inside the tokens component.)\n  </sky-tokens>\n</p>\n\n<p>\n  <button\n    class=\"sky-btn sky-btn-default\"\n    (click)=\"focusLastToken()\">\n    Focus last token\n  </button>\n</p>\n"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnDestroy":[{"__symbolic":"method"}],"resetColors":[{"__symbolic":"method"}],"changeColors":[{"__symbolic":"method"}],"destroyColors":[{"__symbolic":"method"}],"createColors":[{"__symbolic":"method"}],"onTokenSelected":[{"__symbolic":"method"}],"onFocusIndexUnderRange":[{"__symbolic":"method"}],"onFocusIndexOverRange":[{"__symbolic":"method"}],"focusLastToken":[{"__symbolic":"method"}],"parseTokens":[{"__symbolic":"method"}]}}}}]