@ukic/web-components 2.0.0-alpha.121

package/dist/cjs/ic-top-navigation.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-top-navigation.entry.cjs.js","mappings":"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","names":["getSlot","DEVICE_SIZES","getCurrentDeviceSize","getThemeForegroundColor","onComponentPropUndefinedChange","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","./src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  color: var(--ic-theme-text);\n  width: 100%;\n  position: relative;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-theme-primary);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  margin-left: calc(-1 * var(--ic-space-xxs));\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-keyline-lighten);\n  padding-left: var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.navigation-tabs {\n  margin-top: -1px;\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.app-title {\n  padding-right: var(--ic-space-lg);\n}\n\n:host .app-status {\n  border-radius: 80px;\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host(.dark) .app-status {\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n  border-radius: 16px;\n  background-color: var(--ic-theme-active);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n}\n\n.app-status-text,\n.app-version-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n  flex: 1 auto;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 44px;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container {\n  flex-basis: 1;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container,\n:host([content-aligned=\"left\"]) .nav-panel-container,\n:host([content-aligned=\"center\"]) .nav-panel-container,\n:host([content-aligned=\"left\"]) .search-menu-container,\n:host([content-aligned=\"center\"]) .search-menu-container {\n  justify-content: flex-start;\n}\n\n:host([content-aligned=\"center\"]) .app-details-container {\n  justify-content: flex-end;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n\n  :host([content-aligned=\"center\"]) .top-navigation {\n    display: flex;\n    justify-content: center;\n  }\n\n  :host([content-aligned=\"left\"]) .top-navigation {\n    display: flex;\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding-left: var(--ic-space-md);\n  }\n\n  /* medium */\n  @media screen and (max-width: 992px) {\n    :host .nav-panel-container,\n    :host .app-status,\n    :host .app-version {\n      display: none;\n    }\n\n    :host .title-link {\n      margin-right: var(--ic-space-xs);\n    }\n\n    .search-menu-container {\n      max-width: 160px;\n    }\n\n    .search-bar-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-top: var(--ic-keyline-darken);\n      height: 64px;\n      padding-left: var(--ic-space-md);\n      padding-right: var(--ic-space-md);\n      margin-left: calc(-1 * var(--section-container-margin));\n      margin-right: calc(-1 * var(--section-container-margin));\n    }\n\n    :host([content-aligned=\"left\"]) .app-details-container,\n    :host([content-aligned=\"left\"]) .search-menu-container,\n    :host([content-aligned=\"center\"]) .search-menu-container,\n    :host([content-aligned=\"center\"]) .app-details-container {\n      justify-content: flex-start;\n    }\n  }\n\n  /* x small */\n  @media screen and (max-width: 576px) {\n    :host .title-link {\n      margin-right: var(--ic-space-xxxs);\n      word-break: break-word;\n      hyphens: auto;\n    }\n\n    .top-panel-container {\n      min-height: 40px;\n    }\n\n    .searchbox-inline {\n      display: none;\n    }\n\n    .search-bar-container {\n      margin-top: 0;\n      height: 56px;\n      padding-left: var(--ic-space-xs);\n      padding-right: var(--ic-space-xs);\n    }\n\n    .menu-button-container {\n      margin-left: var(--ic-space-sm);\n    }\n\n    slot[name=\"app-icon\"]::slotted(svg) {\n      width: 1.5em;\n      height: 1.5em;\n    }\n\n    slot[name=\"toggle-icon\"] svg {\n      width: 1.5em;\n      height: 1.5em;\n    }\n\n    :host([content-aligned=\"left\"]) .app-details-container,\n    :host([content-aligned=\"left\"]) .search-menu-container,\n    :host([content-aligned=\"center\"]) .app-details-container,\n    :host([content-aligned=\"center\"]) .search-menu-container {\n      justify-content: flex-start;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  @Element() el: HTMLIcTopNavigationElement;\n\n  /**\n   *  Title to display\n   */\n  @Prop() appTitle!: string;\n\n  /**\n   *  The url to navigate to when title is clicked\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   *  Version info to display\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   *  Status info to display\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The alignment of the top nav content\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n\n  /**\n   * If true, the flyout navigation menu on small devices will be contained by the parent element\n   */\n  @Prop() inline: boolean = false;\n\n  @State() menuOpen: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchValue: string = \"\";\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  private hasAppIcon: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private searchBar: HTMLIcSearchBarElement = null;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLIcButtonElement;\n    menuBtn.setFocus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.setFocus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n    } else {\n      this.icNavigationMenuClosed.emit();\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.setFocus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.appTitle, propName: \"app-title\" }],\n      \"Top Navigation\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"emphasis\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"dense\" : \"default\";\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned=\"full-width\" full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {hasTitle && (\n                    <a class=\"title-link\" href={this.href}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      <ic-typography variant={appTitleVariant}>\n                        <h1>{this.appTitle}</h1>\n                      </ic-typography>\n                    </a>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            buttonStyle={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"icon\">\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                              </svg>\n                            </slot>\n                          </ic-button>\n                        )}\n\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n                        <div class=\"menu-button-container\">\n                          <nav\n                            aria-labelledby=\"navigation-landmark-text\"\n                            aria-hidden={\n                              !this.hasNavigation || this.navMenuVisible\n                                ? \"true\"\n                                : \"false\"\n                            }\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              buttonStyle={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ul class=\"navigation-item-list\">\n                      <slot name=\"navigation\"></slot>\n                    </ul>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-typography.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3ef30d9d.js');
+
+const icTypographyCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.ic-typography-spacing-h2){margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}:host(.ic-typography-spacing-h3){margin:var(--ic-space-xl) 0 var(--ic-space-md)}:host(.ic-typography-spacing-h4){margin:var(--ic-space-lg) 0 var(--ic-space-md)}:host(.ic-typography-spacing-subtitle-large){margin:0 0 var(--ic-space-lg)}:host(.ic-typography-spacing-body){margin:0 0 var(--ic-space-md)}:host(.ic-typography-spacing-h2:first-child),:host(.ic-typography-spacing-h3:first-child),:host(.ic-typography-spacing-h4:first-child){margin-top:0}:host(.ic-typography-h1){font:var(--ic-font-h1)}:host(.ic-typography-h2){font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-h3){font:var(--ic-font-h3)}:host(.ic-typography-h4){font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-large){font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-small){font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-body){font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-caption){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-caption-uppercase){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}:host(.ic-typography-label){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-label-uppercase){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}:host(.ic-typography-no-wrap){white-space:nowrap}:host ::slotted(h1),:host ::slotted(h2),:host ::slotted(h3),:host ::slotted(h4),:host ::slotted(h5),:host ::slotted(h6),:host ::slotted(p),:host ::slotted(label){font:inherit;letter-spacing:inherit}";
+
+const Typography = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = "body";
+    this.spacing = false;
+  }
+  render() {
+    const { variant, spacing } = this;
+    return (index.h(index.Host, { class: {
+        [`ic-typography-${variant}`]: true,
+        [`ic-typography-spacing-${variant}`]: spacing,
+      } }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+Typography.style = icTypographyCss;
+
+exports.ic_typography = Typography;
+
+//# sourceMappingURL=ic-typography.cjs.entry.js.map

package/dist/cjs/ic-typography.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-typography.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,iyIAAiyI;;MCS5yI,UAAU;;;mBAMoB,MAAM;mBAKnB,KAAK;;EAEjC,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAElC,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,OAAO,EAAE,GAAG,IAAI;QAClC,CAAC,yBAAyB,OAAO,EAAE,GAAG,OAAO;OAC9C,IAEDD,qBAAQ,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","./src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.ic-typography-spacing-h2) {\n  margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-spacing-h3) {\n  margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-h4) {\n  margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-subtitle-large) {\n  margin: 0 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-spacing-body) {\n  margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-h2:first-child),\n:host(.ic-typography-spacing-h3:first-child),\n:host(.ic-typography-spacing-h4:first-child) {\n  margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n  font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n  font: var(--ic-font-h2);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n  font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n  font: var(--ic-font-h4);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n  font: var(--ic-font-subtitle-large);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n  font: var(--ic-font-subtitle-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n  font: var(--ic-font-body);\n  letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n  white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n  font: inherit;\n  letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  @Element() el: HTMLIcTypographyElement;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * Adds margin to the bottom of the typography relative to the font-size.\n   */\n  @Prop() spacing?: boolean = false;\n\n  render() {\n    const { variant, spacing } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-spacing-${variant}`]: spacing,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}