@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

package/styles/tabs/tab/_mixins.scss

@@ -3,163 +3,81 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '../../typography/mixins' as typography-mixins;
+@use '../../core/style-layer/tabs/tab';
 @use './variables';
 
-@mixin core-styles() {
-  .forge-tab {
-    @include base;
-
-    &:disabled {
-      @include disabled;
-    }
-
-    // Firefox still draws a dotted border around focused buttons unless specifically overridden
-    &::-moz-focus-inner {
-      padding: 0;
-      border: 0;
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
     }
-
-    ::slotted([slot=top]) {
-      @include top;
-    }
-
-    ::slotted([slot=top]),
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      @include icon-base;
-    }
-
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      padding: 0 8px;
-    }
-
-    &__content {
-      @include content;
+    @if $value {
+      --#{tab.$prefix}-#{$key}: #{$value};
     }
+  }
+}
 
-    &__text {
-      @include text;
-    }
-  
-    &--active {
-      @include active;
-
-      ::slotted([slot=top]),
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        transition-delay: 100ms;
-      }
-    }
+@mixin core-styles {
+  @include tab.styles;
+}
 
-    &__ripple {
-      @include mdc-ripple.surface();
-      @include mdc-ripple.radius-bounded();
-      @include mdc-ripple-theme.states($color: primary);
-
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
+@mixin focus-styles {
+  @include tab.focus-styles;
 }
 
-@mixin host() {
-  display: inline-block;
+@mixin focus-selected-styles {
+  @include tab.focus-selected-styles;
 }
 
-@mixin host-stretch() {
-  flex: 1;
+@mixin pressed-styles {
+  @include tab.pressed-styles;
 }
 
-@mixin base() {
-  @include mdc-typography.typography(button);
-  @include mdc-theme.property(color, text-secondary-on-light);
+@mixin pressed-selected-styles {
+  @include tab.pressed-selected-styles;
+}
 
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin: 0; // To override safari default margin for button elements
-  padding-top: 0;
-  padding-bottom: 0;
-  border: none;
-  outline: none;
-  background: none;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-appearance: none;
-  z-index: 1;
-  padding-right: variables.$horizontal-padding;
-  padding-left: variables.$horizontal-padding;
-  height: 100%;
-  width: 100%;
+@mixin disabled-styles {
+  @include tab.disabled-styles;
 }
 
-@mixin disabled() {
-  @include mdc-theme.property(color, text-disabled-on-background);
+@mixin selected-styles {
+  @include tab.selected-styles;
+  @include tab.forced-colors-styles;
+}
 
-  cursor: not-allowed;
-  pointer-events: none;
+@mixin stacked-styles {
+  @include tab.stacked-styles;
 }
 
-@mixin top() {
-  padding-top: variables.$stacked-padding;
+@mixin secondary-styles {
+  @include tab.secondary-styles;
 }
 
-@mixin icon-base() {
-  transition: 150ms color linear;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
-  z-index: 2;
+@mixin vertical-styles {
+  @include tab.vertical-styles;
 }
 
-@mixin content() {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: inherit;
-  pointer-events: none;
+@mixin vertical-primary-styles {
+  @include tab.vertical-primary-styles;
 }
 
-@mixin text() {
-  transition: 150ms color linear;
-  display: inline-block;
-  line-height: 1;
-  z-index: 2;
+@mixin vertical-secondary-styles {
+  @include tab.vertical-secondary-styles;
 }
 
-@mixin active() {
-  @include mdc-theme.property(color, primary);
+@mixin vertical-inverted-styles {
+  @include tab.vertical-inverted-styles;
 }
 
-@mixin host-theme($theme, $properties) {
-  :host([theme=#{$theme}]) {
-    @include theme($theme, $properties);
-  }
+@mixin inverted-styles {
+  @include tab.inverted-styles;
 }
 
-@mixin theme($theme, $properties) {
-  $defaultValue: map-get($properties, $theme);
-  --mdc-theme-primary: var(--mdc-theme-#{$theme}, $defaultValue);
+@mixin host {
+  @include tab.host;
+}
 
-  // IE support
-  .forge-tab.forge-tab--active {
-    color: $defaultValue;
-  }
+@mixin host-disabled {
+  @include tab.host-disabled;
 }

package/styles/tabs/tab/_variables.scss

@@ -3,7 +3,29 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$horizontal-padding: 24px !default;
-$height: 48px !default;
-$height-stacked: 72px !default;
-$stacked-padding: 8px !default;
+$supported-theme-properties: (
+  'indicator-color',
+  'indicator-height',
+  'indicator-shape',
+  'container-color',
+  'container-height',
+  'shape',
+  'height',
+  'active-focus-icon-color',
+  'active-hover-icon-color',
+  'active-icon-color',
+  'active-pressed-icon-color',
+  'icon-size',
+  'focus-icon-color',
+  'hover-icon-color',
+  'icon-color',
+  'pressed-icon-color',
+  'active-focus-label-text-color',
+  'active-hover-label-text-color',
+  'active-label-text-color',
+  'active-pressed-label-text-color',
+  'focus-label-text-color',
+  'hover-label-text-color',
+  'label-text-color',
+  'pressed-label-text-color'
+);

package/styles/tabs/tab/tab.scss

@@ -3,10 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme/theme-values';
 @use './mixins';
-@use '../../ripple/forge-ripple';
-@use '@material/tab-indicator/mdc-tab-indicator';
 
 @include mixins.core-styles;
 
@@ -18,13 +15,55 @@
   display: none;
 }
 
-:host([stretch]) {
-  @include mixins.host-stretch;
+:host(:focus) {
+  @include mixins.focus-styles;
 }
 
-@include mixins.host-theme(primary, theme-values.$mdc-property-values);
-@include mixins.host-theme(secondary, theme-values.$mdc-property-values);
-@include mixins.host-theme(warning, theme-values.$property-values);
-@include mixins.host-theme(success, theme-values.$property-values);
-@include mixins.host-theme(danger, theme-values.$property-values);
-@include mixins.host-theme(info, theme-values.$property-values);
+:host(:active) {
+  @include mixins.pressed-styles;
+}
+
+:host([disabled]) {
+  @include mixins.host-disabled;
+  @include mixins.disabled-styles;
+}
+
+:host([selected]) {
+  @include mixins.selected-styles;
+}
+
+:host([selected]:focus) {
+  @include mixins.focus-selected-styles;
+}
+
+:host([selected]:active) {
+  @include mixins.pressed-selected-styles;
+}
+
+:host([stacked]) {
+  @include mixins.stacked-styles;
+}
+
+:host([secondary]) {
+  @include mixins.secondary-styles;
+}
+
+:host([vertical]) {
+  @include mixins.vertical-styles;
+}
+
+:host([vertical][secondary]) {
+  @include mixins.vertical-secondary-styles;
+}
+
+:host([vertical]:not([secondary])) {
+  @include mixins.vertical-primary-styles;
+}
+
+:host([inverted]) {
+  @include mixins.inverted-styles;
+}
+
+:host([inverted][vertical]) {
+  @include mixins.vertical-inverted-styles;
+}

package/styles/tabs/tab-bar/_mixins.scss

@@ -3,76 +3,36 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme';
-@use '../tab/variables';
+@use '../../core/style-layer/tabs/tab-bar';
+@use './variables';
 
-@mixin core-styles() {
-  .forge-tab-bar {
-    @include base;
-
-    &--underlined {
-      &::after {
-        @include theme.property(border-bottom-color, border-color);
-  
-        content: '';
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        box-sizing: border-box;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-    }
-
-    &--align-center {
-      .mdc-tab-scroller__scroll-content {
-        justify-content: center;
-      }
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
     }
-
-    &--align-end {
-      .mdc-tab-scroller__scroll-content {
-        justify-content: flex-end;
-      }
-    }
-
-    &--stacked {
-      @include stacked;
-
-      .mdc-tab-scroller {
-        height: 100%;
-      }
-    }
-  }
-
-  .mdc-tab-scroller {
-    z-index: 1;
-    width: 100%;
-
-    &__scroll-area {
-      height: 100%;
-      overflow-x: auto;
-      scrollbar-width: none; // Hide scrollbar in Firefox
+    @if $value {
+      --#{tab-bar.$prefix}-#{$key}: #{$value};
     }
   }
 }
 
-@mixin host() {
-  display: block;
-  overflow: hidden;
+@mixin host {
+  @include tab-bar.host;
 }
 
-@mixin base() {
-  @include theme.css-custom-property(height, --forge-tab-bar-height, variables.$height);
+@mixin core-styles {
+  @include tab-bar.styles;
+}
 
-  display: flex;
-  position: relative;
+@mixin vertical-styles {
+  @include tab-bar.vertical-styles;
 }
 
-@mixin stacked() {
-  @include theme.css-custom-property(height, --forge-tab-bar-height, variables.$height-stacked);
+@mixin inverted-styles {
+  @include tab-bar.inverted-styles;
+}
 
-  align-items: center;
+@mixin inverted-vertical-styles {
+  @include tab-bar.inverted-vertical-styles;
 }

package/styles/tabs/tab-bar/_variables.scss

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$supported-theme-properties: (
+  'justify',
+  'stretch',
+  'underline-color',
+  'underline-thickness'
+);

package/styles/tabs/tab-bar/tab-bar.scss

@@ -5,7 +5,6 @@
  */
 @use './mixins';
 @use '../../icon-button/forge-icon-button';
-@use '@material/tab-scroller/mdc-tab-scroller';
 
 @include mixins.core-styles;
 
@@ -13,7 +12,35 @@
   @include mixins.host;
 }
 
+:host([vertical]) {
+  @include mixins.vertical-styles;
+}
+
+:host([inverted]:not([vertical])) {
+  @include mixins.inverted-styles;
+}
+
+:host([inverted][vertical]) {
+  @include mixins.inverted-vertical-styles;
+}
+
+:host([clustered]) {
+  --forge-tab-bar-justify: flex-start;
+  --forge-tab-bar-stretch: 0;
+}
+
+:host([clustered=start]) {
+  --forge-tab-bar-justify: flex-start;
+}
+
+:host([clustered=center]) {
+  --forge-tab-bar-justify: center;
+}
+
+:host([clustered=end]) {
+  --forge-tab-bar-justify: flex-end;
+}
+
 :host([hidden]) {
   display: none;
 }
-

package/dist/esm/chunks/chunk.2TVYAW7Q.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import{a as t}from"./chunk.FF5DED5D.js";import{a as r}from"./chunk.NVUMRW44.js";import{l}from"./chunk.QH2GB3PD.js";import{k as p,l as s}from"./chunk.J2M2MXP2.js";import{d as o}from"./chunk.M3QDAYD2.js";var e=class extends l{constructor(){super()}attributeChangedCallback(a,u,i){switch(a){case t.attributes.POPUP_CLASSES:this.popupClasses=i;break;case t.attributes.OPTION_LIMIT:this.optionLimit=s(i);break;case t.attributes.OBSERVE_SCROLL:this.observeScroll=p(i);break;case t.attributes.OBSERVE_SCROLL_THRESHOLD:this.observeScrollThreshold=s(i);break;case t.attributes.SYNC_POPUP_WIDTH:this.syncPopupWidth=p(i);break;case t.attributes.CONSTRAIN_POPUP_WIDTH:this.constrainPopupWidth=p(i);break;case t.attributes.WRAP_OPTION_TEXT:this.wrapOptionText=p(i);break}}};o([r()],e.prototype,"popupClasses",2),o([r()],e.prototype,"popupHeaderBuilder",2),o([r()],e.prototype,"popupFooterBuilder",2),o([r()],e.prototype,"syncPopupWidth",2),o([r()],e.prototype,"optionLimit",2),o([r()],e.prototype,"observeScroll",2),o([r()],e.prototype,"observeScrollThreshold",2),o([r()],e.prototype,"constrainPopupWidth",2),o([r()],e.prototype,"wrapOptionText",2);export{e as a};
-//# sourceMappingURL=chunk.2TVYAW7Q.js.map