Chips: Default

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="acl-chip-labels">
    <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">Visited over 30 days
            ago</span></div>
    <div class="acl-chip-label acl-chip-label--green"><span class="acl-chip-label__text">Most Used</span></div>
    <div class="acl-chip-label acl-chip-label--orange"><span class="acl-chip-label__text">Quick</span></div>
    <div class="acl-chip-label acl-chip-label--red"><span class="acl-chip-label__text">Best Performing</span></div>
</div>


        <div class="acl-chip-labels">
        <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">Visited over 30 days
                        ago</span></div>
        <div class="acl-chip-label acl-chip-label--green"><span class="acl-chip-label__text">Most Used</span></div>
        <div class="acl-chip-label acl-chip-label--orange"><span class="acl-chip-label__text">Quick</span></div>
        <div class="acl-chip-label acl-chip-label--red"><span class="acl-chip-label__text">Best Performing</span></div>
</div>


        
            
            /* No context defined. */

File:

Content:


                                @import '../animation/functions';
@import '../animation/variables';
@import '../checkbox/functions';
@import '../checkbox/variables';
@import '../elevation/mixins';
@import '../density/functions';
@import '../feature-targeting/functions';
@import '../feature-targeting/mixins';
@import '../ripple/mixins';
@import '../rtl/mixins';
@import '../theme/functions';
@import '../theme/mixins';
@import '../touch-target/mixins';
@import '../typography/mixins';
@import '../shape/mixins';
@import '../shape/functions';
@import './variables';

$acl-chip-ripple-target: '.acl-chip__ripple';

@mixin acl-chip-core-styles($query: acl-feature-all()) {
    @include acl-chip-without-ripple($query: $query);
    @include acl-chip-ripple($query: $query);
}

@mixin acl-chip-without-ripple($query: acl-feature-all()) {
    $feat-animation: acl-feature-create-target($query, animation);
    $feat-color: acl-feature-create-target($query, color);
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-chip-leading-icon-color($acl-chip-icon-color, $query: $query);
    @include acl-chip-trailing-icon-color($acl-chip-icon-color, $query: $query);
    @include acl-chip-leading-icon-size($acl-chip-leading-icon-size, $query: $query);
    @include acl-chip-trailing-icon-size($acl-chip-trailing-icon-size, $query: $query);
    @include acl-chip-trailing-icon-margin($query: $query);
    @include acl-touch-target-wrapper($query);

    .acl-chip {
        @include acl-chip-shape-radius(50%, $query: $query);
        @include acl-chip-fill-color($acl-chip-fill-color-default, $query: $query);
        @include acl-chip-ink-color-without-ripple_($acl-chip-ink-color-default, $query: $query);
        @include acl-typography(body2, $query: $query);
        @include acl-chip-density($density-scale: 0, $query: $query);
        @include acl-chip-leading-icon-margin($query: $query);

        @include acl-feature-targets($feat-structure) {
            display: inline-flex;
            position: relative;
            align-items: center;
            box-sizing: border-box;
            padding: 0 $acl-chip-horizontal-padding;
            border-width: 0;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;

            &::-moz-focus-inner {
                padding: 0;
                border: 0;
            }
        }

        &:hover {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(color, on-surface);
            }
        }

        .acl-chip__touch {
            @include acl-touch-target($query);
        }
    }

    .acl-chip--exit {
        @include acl-feature-targets($feat-color) {
            transition: $acl-chip-exit-transition;
        }

        @include acl-feature-targets($feat-structure) {
            opacity: 0;
        }
    }

    .acl-chip__text {
        @include acl-feature-targets($feat-structure) {
            white-space: nowrap;
            font-size: 12px;
        }
    }

    .acl-chip__icon {
        @include acl-feature-targets($feat-structure) {
            border-radius: 50%;
            outline: none;
            vertical-align: middle;
        }
    }

    .acl-chip__checkmark {
        @include acl-feature-targets($feat-structure) {
            //height: $acl-chip-leading-icon-size;
            height: 15px;
        }
    }

    .acl-chip__checkmark-path {
        @include acl-feature-targets($feat-animation) {
            transition: acl-checkbox-transition-exit(
                stroke-dashoffset,
                $acl-chip-checkmark-animation-delay,
                $acl-chip-checkmark-animation-duration
            );
        }

        @include acl-feature-targets($feat-structure) {
            stroke-width: 2px;
            stroke-dashoffset: $acl-checkbox-mark-path-length_;
            stroke-dasharray: $acl-checkbox-mark-path-length_;
        }
    }

    .acl-chip__text:focus {
        @include acl-feature-targets($feat-structure) {
            outline: none;
        }
    }

    .acl-chip--selected .acl-chip__checkmark-path {
        @include acl-feature-targets($feat-structure) {
            stroke-dashoffset: 0;
        }
    }

    .acl-chip__icon--leading,
    .acl-chip__icon--trailing {
        @include acl-feature-targets($feat-structure) {
            // Make these positioned elements, such that they're stacked above the
            // touch target element (`acl-chip__touch`), so that clicks reach the
            // icons (e.g. for removable input chips).
            position: relative;
        }
    }

    // Change color of selected choice chips

    .acl-chip-set--choice {
        .acl-chip {
            @include acl-chip-selected-ink-color-without-ripple_(primary, $query: $query);
        }

        .acl-chip--selected {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(background-color, #1facec);
                background-color: #1facec;
            }
        }
    }

    // Add leading checkmark to filter chips with no leading icon

    .acl-chip__checkmark-svg {
        @include acl-feature-targets($feat-structure) {
            width: 0;
            //height: $acl-chip-leading-icon-size;
            height: 15px;
            margin-right: -4px;
        }

        @include acl-feature-targets($feat-animation) {
            transition: width $acl-chip-width-animation-duration $acl-animation-standard-curve-timing-function;
        }
    }

    .acl-chip--selected .acl-chip__checkmark-svg {
        @include acl-feature-targets($feat-structure) {
            //width: $acl-chip-leading-icon-size;
            width: 15px;
        }
    }

    // Add leading checkmark to filter chips with a leading icon

    .acl-chip-set--filter {
        .acl-chip__icon--leading {
            @include acl-feature-targets($feat-animation) {
                transition: opacity $acl-chip-opacity-animation-duration linear;
                transition-delay: $acl-chip-leading-icon-delay;
            }

            @include acl-feature-targets($feat-structure) {
                opacity: 1;
            }

            + .acl-chip__checkmark {
                @include acl-feature-targets($feat-animation) {
                    transition: opacity $acl-chip-opacity-animation-duration linear;

                    // Delay the checkmark transition.
                    transition-delay: $acl-chip-checkmark-with-leading-icon-delay;
                }

                @include acl-feature-targets($feat-structure) {
                    opacity: 0;
                }

                .acl-chip__checkmark-svg {
                    // stylelint-disable max-nesting-depth
                    vertical-align: initial;

                    @include acl-feature-targets($feat-animation) {
                        transition: width 0ms;
                    }

                    // stylelint-enable max-nesting-depth
                }
            }
        }

        .acl-chip--selected .acl-chip__icon--leading {
            @include acl-feature-targets($feat-structure) {
                opacity: 0;
            }

            + .acl-chip__checkmark {
                @include acl-feature-targets($feat-structure) {
                    // This ensures that the checkmark has zero width while the leading icon is still animating.
                    width: 0;
                    opacity: 1;
                }
            }
        }

        .acl-chip__icon--leading-hidden.acl-chip__icon--leading {
            @include acl-feature-targets($feat-structure) {
                width: 0;
            }

            @include acl-feature-targets($feat-structure) {
                // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
                opacity: 0;
            }

            + .acl-chip__checkmark {
                @include acl-feature-targets($feat-structure) {
                    //width: $acl-chip-leading-icon-size;
                    width: 15px;
                }
            }
        }
    }
}

@mixin acl-chip-ripple($query: acl-feature-all()) {
    @include acl-ripple-common($query);
    $feat-structure: acl-feature-create-target($query, structure);

    .acl-chip {
        @include acl-ripple-surface($query: $query, $ripple-target: $acl-chip-ripple-target);
        @include acl-ripple-radius-bounded($query: $query, $ripple-target: $acl-chip-ripple-target);
        @include acl-chip-ink-color-ripple_($acl-chip-ink-color-default, $query: $query);

        #{$acl-chip-ripple-target} {
            @include acl-ripple-target-common($query: $query);

            @include acl-feature-targets($feat-structure) {
                overflow: hidden;
            }
        }
    }

    .acl-chip-set--choice {
        .acl-chip {
            @include acl-chip-selected-ink-color-ripple_(primary, $query: $query);
        }
    }
}

@mixin acl-chip-set-core-styles($query: acl-feature-all()) {
    $feat-animation: acl-feature-create-target($query, animation);
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-animation) {
        @keyframes acl-chip-entry {
            from {
                transform: scale(0.8);
                opacity: 0.4;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }
    }

    .acl-chip-set {
        @include acl-chip-set-spacing(8px, $query: $query);

        @include acl-feature-targets($feat-structure) {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
    }

    .acl-chip-set--input .acl-chip {
        @include acl-feature-targets($feat-animation) {
            animation: acl-chip-entry 100ms $acl-animation-deceleration-curve-timing-function;
        }
    }
}

@mixin acl-chip-shape-radius(
    $radius,
    $rtl-reflexive: false,
    $density-scale: $acl-chip-density-scale,
    $query: acl-feature-all()
) {
    $height: acl-density-prop-value(
        $density-config: $acl-chip-density-config,
        $density-scale: $density-scale,
        $property-name: height,
    );

    @include acl-shape-radius(acl-shape-resolve-percentage-radius($height, $radius), $rtl-reflexive, $query: $query);

    #{$acl-chip-ripple-target} {
        @include acl-shape-radius(
            acl-shape-resolve-percentage-radius($height, $radius),
            $rtl-reflexive,
            $query: $query
        );
    }
}

@mixin acl-chip-fill-color-accessible($color, $query: acl-feature-all()) {
    $fill-tone: acl-theme-tone($color);

    @include acl-chip-fill-color($color, $query: $query);

    @if ($fill-tone == 'dark') {
        @include acl-chip-ink-color(text-primary-on-dark, $query: $query);
        @include acl-chip-selected-ink-color(text-primary-on-dark, $query: $query);
        @include acl-chip-leading-icon-color(text-primary-on-dark, $query: $query);
        @include acl-chip-trailing-icon-color(text-primary-on-dark, $query: $query);
    } @else {
        @include acl-chip-ink-color(text-primary-on-light, $query: $query);
        @include acl-chip-selected-ink-color(text-primary-on-light, $query: $query);
        @include acl-chip-leading-icon-color(text-primary-on-light, $query: $query);
        @include acl-chip-trailing-icon-color(text-primary-on-light, $query: $query);
    }
}

@mixin acl-chip-fill-color($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    @include acl-feature-targets($feat-color) {
        @include acl-theme-prop(background-color, $color);
    }
}

@mixin acl-chip-ink-color($color, $query: acl-feature-all()) {
    @include acl-chip-ink-color-ripple_($color, $query: $query);
    @include acl-chip-ink-color-without-ripple_($color, $query: $query);
}

@mixin acl-chip-ink-color-without-ripple_($color, $query) {
    $feat-color: acl-feature-create-target($query, color);

    @include acl-feature-targets($feat-color) {
        @include acl-theme-prop(color, $color);
    }

    &:hover {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(color, $color);
        }
    }
}

@mixin acl-chip-ink-color-ripple_($color, $query) {
    @include acl-states($color, true, $query: $query, $ripple-target: $acl-chip-ripple-target);
}

@mixin acl-chip-selected-ink-color($color, $query: acl-feature-all()) {
    @include acl-chip-selected-ink-color-ripple_($color, $query: $query);
    @include acl-chip-selected-ink-color-without-ripple_($color, $query: $query);
}

@mixin acl-chip-selected-ink-color-without-ripple_($color, $query) {
    $feat-color: acl-feature-create-target($query, color);

    &.acl-chip--selected {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(color, $color);
        }

        @include acl-chip-leading-icon-color($color, $query: $query);

        &:hover {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(color, $color);
            }
        }
    }

    .acl-chip__checkmark-path {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(stroke, $color);
        }
    }
}

@mixin acl-chip-selected-ink-color-ripple_($color, $query) {
    &.acl-chip {
        @include acl-states-selected(
            $color,
            $has-nested-focusable-element: true,
            $query: $query,
            $ripple-target: $acl-chip-ripple-target
        );
    }
}

@mixin acl-chip-outline(
    $width: 1px,
    $style: solid,
    $color: acl-theme-prop-value(on-surface),
    $query: acl-feature-all()
) {
    @include acl-chip-outline-width($width, $query: $query);
    @include acl-chip-outline-style($style, $query: $query);
    @include acl-chip-outline-color($color, $query: $query);
}

@mixin acl-chip-outline-color($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    @include acl-feature-targets($feat-color) {
        @include acl-theme-prop(border-color, $color);
    }
}

@mixin acl-chip-outline-style($style, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        border-style: $style;
    }
}

@mixin acl-chip-outline-width($width, $horizontal-padding: $acl-chip-horizontal-padding, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    // Note: Adjust padding to maintain consistent width with non-outlined chips
    $horizontal-padding-value: max($horizontal-padding - $width, 0);

    @include acl-feature-targets($feat-structure) {
        padding-right: $horizontal-padding-value;
        padding-left: $horizontal-padding-value;
        border-width: $width;
    }

    #{$acl-chip-ripple-target} {
        @include acl-feature-targets($feat-structure) {
            top: -$width;
            left: -$width;
            border: $width solid transparent;
        }
    }
}

@mixin acl-chip-horizontal-padding($padding, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        padding-right: $padding;
        padding-left: $padding;
    }
}

@mixin acl-chip-height($height, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        height: $height;
    }
}

@mixin acl-chip-set-spacing($gap-size, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        padding: $gap-size / 2;
    }

    .acl-chip {
        @include acl-feature-targets($feat-structure) {
            margin: $gap-size / 2;
        }
    }

    .acl-chip--touch {
        @include acl-touch-target-component($component-height: $acl-chip-height, $query: $query);
    }
}

@mixin acl-chip-leading-icon-color($color, $opacity: $acl-chip-icon-opacity, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    .acl-chip__icon--leading {
        @include acl-feature-targets($feat-color) {
            color: rgba(acl-theme-prop-value($color), $opacity);
        }
    }
}

@mixin acl-chip-trailing-icon-color(
    $color,
    $opacity: $acl-chip-icon-opacity,
    $hover-opacity: $acl-chip-trailing-icon-hover-opacity,
    $focus-opacity: $acl-chip-trailing-icon-focus-opacity,
    $query: acl-feature-all()
) {
    $feat-color: acl-feature-create-target($query, color);

    .acl-chip__icon--trailing {
        @include acl-feature-targets($feat-color) {
            color: rgba(acl-theme-prop-value($color), $opacity);
        }

        &:hover {
            @include acl-feature-targets($feat-color) {
                color: rgba(acl-theme-prop-value($color), $hover-opacity);
            }
        }

        &:focus {
            @include acl-feature-targets($feat-color) {
                color: rgba(acl-theme-prop-value($color), $focus-opacity);
            }
        }
    }
}

// For customizing icon size, we need to increase specifity to ensure
// overrides apply. Styles defined in the .material-icons CSS class are
// loaded separately, so the order of CSS definitions is not guaranteed.

@mixin acl-chip-leading-icon-size($size, $query: acl-feature-all()) {
    .acl-chip__icon.acl-chip__icon--leading:not(.acl-chip__icon--leading-hidden) {
        @include acl-chip-icon-size_($size, $query: $query);
    }
}

@mixin acl-chip-trailing-icon-size($size, $query: acl-feature-all()) {
    .acl-chip__icon.acl-chip__icon--trailing {
        @include acl-chip-icon-size_($size, $query: $query);
    }
}

@mixin acl-chip-icon-size_($size, $query) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        width: $size;
        height: $size;
        font-size: $size;
    }
}

@mixin acl-chip-leading-icon-margin(
    $left-margin: $acl-chip-leading-icon-margin-left,
    $right-margin: $acl-chip-leading-icon-margin-right,
    $query: acl-feature-all()
) {
    $feat-structure: acl-feature-create-target($query, structure);

    &.acl-chip--selected .acl-chip__checkmark,
    .acl-chip__icon--leading:not(.acl-chip__icon--leading-hidden) {
        @include acl-feature-targets($feat-structure) {
            //@include acl-rtl-reflexive-property(margin, $left-margin, $right-margin);
        }
    }
}

@mixin acl-chip-trailing-icon-margin(
    $left-margin: $acl-chip-trailing-icon-margin-left,
    $right-margin: $acl-chip-trailing-icon-margin-right,
    $query: acl-feature-all()
) {
    $feat-structure: acl-feature-create-target($query, structure);

    .acl-chip__icon--trailing {
        @include acl-feature-targets($feat-structure) {
            @include acl-rtl-reflexive-property(margin, $left-margin, $right-margin);
        }
    }
}

@mixin acl-chip-elevation-transition($query: acl-feature-all()) {
    $feat-animation: acl-feature-create-target($query, animation);

    @include acl-feature-targets($feat-animation) {
        transition: acl-elevation-transition-value();
    }

    &.acl-chip--exit {
        @include acl-feature-targets($feat-animation) {
            transition: acl-elevation-transition-value(), $acl-chip-exit-transition;
        }
    }
}

///
/// Sets the density scale for chips.
///
/// @param {Number | String} $density-scale - Density scale value for component.
///     Supported density scale values are `-2`, `-1`, `0`.
///
@mixin acl-chip-density($density-scale, $query: acl-feature-all()) {
    $height: acl-density-prop-value(
        $density-config: $acl-chip-density-config,
        $density-scale: $density-scale,
        $property-name: height,
    );

    @include acl-chip-height($height, $query: $query);

    @if $density-scale != 0 {
        @include acl-chip-touch-target-reset_($query: $query);
    }
}

///
/// Resets touch target-related styles. This is called from the density mixin to
/// automatically remove the increased touch target, since dense components
/// don't have the same default a11y requirements.
/// @access private
///
@mixin acl-chip-touch-target-reset_($query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    // Selector is necessary here to override original specificity.
    &.acl-chip--touch {
        @include acl-feature-targets($feat-structure) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    .acl-chip__touch {
        @include acl-feature-targets($feat-structure) {
            display: none;
        }
    }
}

URL: /components/raw/chips/_mixins.scss
Filesystem Path: src/components/chips/_mixins.scss
Size: 20.8 KB

Content:


                                @import '../animation/variables';
@import '../density/variables';
@import '../theme/variables';

$acl-chip-fill-color-default: mix(acl-theme-prop-value(on-surface), acl-theme-prop-value(surface), 12%) !default;
$acl-chip-ink-color-default: rgba(acl-theme-prop-value(on-surface), 0.87) !default;
$acl-chip-horizontal-padding: 12px !default;
$acl-chip-height: 24px !default;

$acl-chip-minimum-height: 24px !default;
$acl-chip-maximum-height: $acl-chip-height !default;
$acl-chip-density-scale: $acl-density-default-scale !default;
$acl-chip-density-config: (
    height: (
        default: $acl-chip-height,
        maximum: $acl-chip-maximum-height,
        minimum: $acl-chip-minimum-height,
    ),
) !default;

$acl-chip-icon-color: acl-theme-prop-value(on-surface) !default;
$acl-chip-icon-opacity: 0.54 !default;
$acl-chip-trailing-icon-hover-opacity: 0.62 !default;
$acl-chip-trailing-icon-focus-opacity: 0.87 !default;
$acl-chip-leading-icon-size: 20px !default;
$acl-chip-trailing-icon-size: 18px !default;
// Speed up delay to bridge gap between leading icon and checkmark transition.
$acl-chip-leading-icon-delay: -50ms !default;
$acl-chip-checkmark-with-leading-icon-delay: 80ms !default;

$acl-chip-checkmark-animation-delay: 50ms !default;
$acl-chip-checkmark-animation-duration: 150ms !default;
$acl-chip-width-animation-duration: 150ms !default;
$acl-chip-opacity-animation-duration: 75ms !default;

$acl-chip-leading-icon-margin-right: 4px !default;
$acl-chip-leading-icon-margin-left: -4px !default;

$acl-chip-trailing-icon-margin-right: -4px !default;
$acl-chip-trailing-icon-margin-left: 4px !default;

$acl-chip-exit-transition: opacity 75ms $acl-animation-standard-curve-timing-function,
    width 150ms $acl-animation-deceleration-curve-timing-function, padding 100ms linear, margin 100ms linear !default;

URL: /components/raw/chips/_variables.scss
Filesystem Path: src/components/chips/_variables.scss
Size: 1.8 KB

Content:


                                @import './chip/acl-chip';
@import './chip-set/acl-chip-set';
@import './selectable-chips/acl-selectable-chips';

.acl-chip--selected {
    background-color: $light-blue;
    color: $white;
    vertical-align: initial;

    &:hover {
        color: $white;
    }
}

.acl-chip-labels {
    display: flex;
    min-width: 200px;
}

.acl-chip-label {
    border-radius: 10px;
    padding: 2px 10px;
    background-color: #707893; // Candidate for style guide
    color: $white;
    font-family: 'Open Sans';
    font-size: 10px;
    letter-spacing: 0;
    width: max-content;
    line-height: 17px;
    margin: 0 2.5px;
    text-align: center;
    display: flex;
    align-items: center;
    text-overflow: ellipsis;

    &--orange {
        background-color: $orange;
    }

    &--dark-blue {
        background-color: #43749e; // Candidate for style guide
    }

    &--purple {
        background-color: #2200b7; // Candidate for style guide
    }
    &--green {
        background-color: #2cbcb2; // Candidate for style guide
    }
    &--red {
        background-color: #ff5a5a; // Candidate for style guide
    }
    &--blue {
        background-color: $blue;
    }

    &--icon-left {
        i {
            font-size: 17px;
            margin: 1px 3px 1px -5px;
        }
    }

    &--icon-right {
        i {
            font-size: 17px;
            margin: 1px -5px 1px 3px;
        }
    }

    &--cursor-pointer {
        cursor: pointer;
    }

    &__dismiss-icon {
        display: flex;
        cursor: pointer;

        i {
            margin: 0 -5px 0 5px;
            user-select: none;
            font-size: 14px;
        }
    }

    &__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

URL: /components/raw/chips/acl-chips.scss
Filesystem Path: src/components/chips/acl-chips.scss
Size: 1.8 KB

Content:


                                class ACLDismissableChip {
    constructor(chipEl) {
        this.chipEl = chipEl;
        this.dismissIcon = this.chipEl.querySelector('.acl-chip-label__dismiss-icon');
        this.dismissIcon ? this.handleEventListeners() : '';
    }

    handleEventListeners() {
        this.dismissIcon.addEventListener('click', () => {
            this.dispatchCustomEvent(this.chipEl, 'chipdismissed');
        });
    }

    dispatchCustomEvent(element, eventName) {
        element.dispatchEvent(new CustomEvent(eventName));
    }
}

export { ACLDismissableChip };
export * from './chip/index';
export * from './chip-set/index';

URL: /components/raw/chips/index.js
Filesystem Path: src/components/chips/index.js
Size: 621 Bytes

Handle: @chips--default
Preview:
- With layout
- Component only
Filesystem Path: src/components/chips/chips.hbs

No notes defined.