[{"__symbolic":"module","version":3,"metadata":{"SkyPopoverDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-popover-demo","template":"<div class=\"popover-demo-container\">\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"right\">\n      Right\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"left\">\n      Left\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"above\">\n      Above (default)\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"above\"\n      alignment=\"left\">\n      Above, align left\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"above\"\n      alignment=\"right\">\n      Above, align right\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"below\">\n      Below\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"below\"\n      alignment=\"left\">\n      Below, align left\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"below\"\n      alignment=\"right\">\n      Below, align right\n    </sky-popover>\n  </div>\n</div>\n\n<h3>\n  With titles:\n</h3>\n\n<div class=\"popover-demo-container\">\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"above\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"below\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"right\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"left\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n</div>\n\n<h3>\n  Popovers can be opened via buttons:\n</h3>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover0\">\n  Default\n</button>\n\n<sky-popover #myPopover0>\n  The content of a popover can be text, HTML, or Angular components.<br>\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover1\"\n  skyPopoverPlacement=\"right\">\n  Right\n</button>\n\n<sky-popover #myPopover1>\n  The content of a popover can be text, HTML, or Angular components.\n  <a href=\"\">Some link</a>\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover2\"\n  skyPopoverPlacement=\"above\">\n  Above\n</button>\n\n<sky-popover #myPopover2>\n  The content of a popover can be text, HTML, or Angular components.\n  <a href=\"\">Some link</a>\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover2a\"\n  skyPopoverPlacement=\"above\"\n  skyPopoverAlignment=\"left\">\n  Above left\n</button>\n\n<sky-popover #myPopover2a>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover2b\"\n  skyPopoverPlacement=\"above\"\n  skyPopoverAlignment=\"right\">\n  Above right\n</button>\n\n<sky-popover #myPopover2b>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover3\"\n  skyPopoverPlacement=\"below\">\n  Below\n</button>\n\n<sky-popover #myPopover3>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover3a\"\n  skyPopoverPlacement=\"below\"\n  skyPopoverAlignment=\"left\">\n  Below left\n</button>\n\n<sky-popover #myPopover3a>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover3b\"\n  skyPopoverPlacement=\"below\"\n  skyPopoverAlignment=\"right\">\n  Below right\n</button>\n\n<sky-popover #myPopover3b>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover4\"\n  skyPopoverPlacement=\"left\">\n  Left\n</button>\n\n<sky-popover #myPopover4>\n  The content of a popover can be text, HTML, or Angular components.\n  <a href=\"\">Some link</a>\n</sky-popover>\n\n<h3>\n  Or, via links:\n</h3>\n\n<p>\n  <a\n    href=\"javascript:void\"\n    style=\"cursor:help;\"\n    [skyPopover]=\"myPopover5\"\n    skyPopoverPlacement=\"right\">\n    Did you know?\n  </a>\n</p>\n\n<sky-popover #myPopover5>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<h3>\n  Popovers can also be opened when the mouse hovers over an element:\n</h3>\n\n<button\n  class=\"sky-btn\"\n  [skyPopover]=\"popoverMouseEnter\"\n  skyPopoverPlacement=\"right\"\n  skyPopoverTrigger=\"mouseenter\">\n  Hover\n</button>\n\n<sky-popover\n  popoverTitle=\"Did you know?\"\n  #popoverMouseEnter>\n  You can move your mouse off the button to close this popover.\n</sky-popover>\n\n<h3>\n  Events\n</h3>\n\n<button class=\"sky-btn\" [skyPopover]=\"myPopoverOnOpened\">\n  Say something when opened\n</button>\n\n<sky-popover\n  popoverTitle=\"Did you know?\"\n  (popoverOpened)=\"onPopoverOpened($event)\"\n  #myPopoverOnOpened>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button class=\"sky-btn\" [skyPopover]=\"myPopoverOnClosed\">\n  Say something when closed\n</button>\n\n<sky-popover\n  popoverTitle=\"Did you know?\"\n  (popoverClosed)=\"onPopoverClosed($event)\"\n  #myPopoverOnClosed>\n  The content of a popover can be text, HTML, or Angular components.<br><br>\n\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</sky-popover>\n\n<h3>\n  Popovers with large amounts of content are displayed fullscreen\n</h3>\n\n<button\n  class=\"sky-btn\"\n  [skyPopover]=\"popoverFullscreen\"\n  skyPopoverPlacement=\"fullscreen\">\n  Show fullscreen popover\n</button>\n\n<sky-popover\n  popoverTitle=\"This is a fullscreen popover\"\n  #popoverFullscreen>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.\n  </p>\n  <p>\n    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.\n  </p>\n  <p>\n    Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.\n  </p>\n  <p>\n    Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.\n  </p>\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.\n  </p>\n  <p>\n    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.\n  </p>\n  <p>\n    Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.\n  </p>\n  <p>\n    Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.\n  </p>\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</sky-popover>\n\n<h3>\n  Popovers may also be asynchronous\n</h3>\n\n<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-default\"\n  [skyPopover]=\"asyncPopoverRef\">\n  This trigger has an asynchronous popover\n</button>\n\n<sky-popover #asyncPopover>\n  My asynchronous popover.\n</sky-popover>\n","styles":[".popover-demo-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 10px 0 40px;\n}\n\n.popover-demo-item {\n  padding: 10px;\n}\n\n.popover-demo-item ::ng-deep .sky-popover-container.sky-popover-hidden {\n  position: relative !important;\n  width: 100% !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  z-index: 1;\n  left: auto !important;\n  top: auto !important;\n}\n\n.popover-demo-item ::ng-deep .sky-popover-container.sky-popover-hidden .sky-popover {\n  margin: 0;\n}\n"]}]}],"members":{"remote":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["remote"]}]}],"asyncPopover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["asyncPopover"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onPopoverOpened":[{"__symbolic":"method"}],"onPopoverClosed":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyPopoverDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-popover-demo","template":"<div class=\"popover-demo-container\">\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"right\">\n      Right\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"left\">\n      Left\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"above\">\n      Above (default)\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"above\"\n      alignment=\"left\">\n      Above, align left\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"above\"\n      alignment=\"right\">\n      Above, align right\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"below\">\n      Below\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"below\"\n      alignment=\"left\">\n      Below, align left\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover\n      placement=\"below\"\n      alignment=\"right\">\n      Below, align right\n    </sky-popover>\n  </div>\n</div>\n\n<h3>\n  With titles:\n</h3>\n\n<div class=\"popover-demo-container\">\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"above\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"below\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"right\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n  <div class=\"popover-demo-item\">\n    <sky-popover placement=\"left\" popoverTitle=\"Did you know?\">\n      The content of a popover can be text, HTML, or Angular components.\n    </sky-popover>\n  </div>\n</div>\n\n<h3>\n  Popovers can be opened via buttons:\n</h3>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover0\">\n  Default\n</button>\n\n<sky-popover #myPopover0>\n  The content of a popover can be text, HTML, or Angular components.<br>\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover1\"\n  skyPopoverPlacement=\"right\">\n  Right\n</button>\n\n<sky-popover #myPopover1>\n  The content of a popover can be text, HTML, or Angular components.\n  <a href=\"\">Some link</a>\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover2\"\n  skyPopoverPlacement=\"above\">\n  Above\n</button>\n\n<sky-popover #myPopover2>\n  The content of a popover can be text, HTML, or Angular components.\n  <a href=\"\">Some link</a>\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover2a\"\n  skyPopoverPlacement=\"above\"\n  skyPopoverAlignment=\"left\">\n  Above left\n</button>\n\n<sky-popover #myPopover2a>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover2b\"\n  skyPopoverPlacement=\"above\"\n  skyPopoverAlignment=\"right\">\n  Above right\n</button>\n\n<sky-popover #myPopover2b>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover3\"\n  skyPopoverPlacement=\"below\">\n  Below\n</button>\n\n<sky-popover #myPopover3>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover3a\"\n  skyPopoverPlacement=\"below\"\n  skyPopoverAlignment=\"left\">\n  Below left\n</button>\n\n<sky-popover #myPopover3a>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover3b\"\n  skyPopoverPlacement=\"below\"\n  skyPopoverAlignment=\"right\">\n  Below right\n</button>\n\n<sky-popover #myPopover3b>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button\n  class=\"sky-btn\"\n  type=\"button\"\n  [skyPopover]=\"myPopover4\"\n  skyPopoverPlacement=\"left\">\n  Left\n</button>\n\n<sky-popover #myPopover4>\n  The content of a popover can be text, HTML, or Angular components.\n  <a href=\"\">Some link</a>\n</sky-popover>\n\n<h3>\n  Or, via links:\n</h3>\n\n<p>\n  <a\n    href=\"javascript:void\"\n    style=\"cursor:help;\"\n    [skyPopover]=\"myPopover5\"\n    skyPopoverPlacement=\"right\">\n    Did you know?\n  </a>\n</p>\n\n<sky-popover #myPopover5>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<h3>\n  Popovers can also be opened when the mouse hovers over an element:\n</h3>\n\n<button\n  class=\"sky-btn\"\n  [skyPopover]=\"popoverMouseEnter\"\n  skyPopoverPlacement=\"right\"\n  skyPopoverTrigger=\"mouseenter\">\n  Hover\n</button>\n\n<sky-popover\n  popoverTitle=\"Did you know?\"\n  #popoverMouseEnter>\n  You can move your mouse off the button to close this popover.\n</sky-popover>\n\n<h3>\n  Events\n</h3>\n\n<button class=\"sky-btn\" [skyPopover]=\"myPopoverOnOpened\">\n  Say something when opened\n</button>\n\n<sky-popover\n  popoverTitle=\"Did you know?\"\n  (popoverOpened)=\"onPopoverOpened($event)\"\n  #myPopoverOnOpened>\n  The content of a popover can be text, HTML, or Angular components.\n</sky-popover>\n\n<button class=\"sky-btn\" [skyPopover]=\"myPopoverOnClosed\">\n  Say something when closed\n</button>\n\n<sky-popover\n  popoverTitle=\"Did you know?\"\n  (popoverClosed)=\"onPopoverClosed($event)\"\n  #myPopoverOnClosed>\n  The content of a popover can be text, HTML, or Angular components.<br><br>\n\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</sky-popover>\n\n<h3>\n  Popovers with large amounts of content are displayed fullscreen\n</h3>\n\n<button\n  class=\"sky-btn\"\n  [skyPopover]=\"popoverFullscreen\"\n  skyPopoverPlacement=\"fullscreen\">\n  Show fullscreen popover\n</button>\n\n<sky-popover\n  popoverTitle=\"This is a fullscreen popover\"\n  #popoverFullscreen>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.\n  </p>\n  <p>\n    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.\n  </p>\n  <p>\n    Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.\n  </p>\n  <p>\n    Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.\n  </p>\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.\n  </p>\n  <p>\n    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.\n  </p>\n  <p>\n    Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.\n  </p>\n  <p>\n    Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.\n  </p>\n  <sky-dropdown buttonType=\"context-menu\">\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 1\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 2\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button type=\"button\">\n          Option 3\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</sky-popover>\n\n<h3>\n  Popovers may also be asynchronous\n</h3>\n\n<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-default\"\n  [skyPopover]=\"asyncPopoverRef\">\n  This trigger has an asynchronous popover\n</button>\n\n<sky-popover #asyncPopover>\n  My asynchronous popover.\n</sky-popover>\n","styles":[".popover-demo-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 10px 0 40px;\n}\n\n.popover-demo-item {\n  padding: 10px;\n}\n\n.popover-demo-item ::ng-deep .sky-popover-container.sky-popover-hidden {\n  position: relative !important;\n  width: 100% !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  z-index: 1;\n  left: auto !important;\n  top: auto !important;\n}\n\n.popover-demo-item ::ng-deep .sky-popover-container.sky-popover-hidden .sky-popover {\n  margin: 0;\n}\n"]}]}],"members":{"remote":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["remote"]}]}],"asyncPopover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["asyncPopover"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onPopoverOpened":[{"__symbolic":"method"}],"onPopoverClosed":[{"__symbolic":"method"}]}}}}]