Radio Buttons

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="component-section-row radio-row">
    <!-- Radio -->
    <section class="component-section">
        <div class="component-wrapper radio-component-wrapper">
            <div class="acl-radio">
                <input class="acl-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                <div class="acl-radio__background">
                    <div class="acl-radio__outer-circle"></div>
                    <div class="acl-radio__inner-circle"></div>
                </div>
            </div>
            <div class="acl-radio">
                <input class="acl-radio__native-control" type="radio" id="radio-2" name="radios" checked>
                <div class="acl-radio__background">
                    <div class="acl-radio__outer-circle"></div>
                    <div class="acl-radio__inner-circle"></div>
                </div>
            </div>
        </div>
    </section>
</div>


        <div class="component-section-row radio-row">
    <!-- Radio -->
    <section class="component-section">
        <div class="component-wrapper radio-component-wrapper">
            <div class="acl-radio">
                <input class="acl-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                <div class="acl-radio__background">
                    <div class="acl-radio__outer-circle"></div>
                    <div class="acl-radio__inner-circle"></div>
                </div>
            </div>
            <div class="acl-radio">
                <input class="acl-radio__native-control" type="radio" id="radio-2" name="radios" checked>
                <div class="acl-radio__background">
                    <div class="acl-radio__outer-circle"></div>
                    <div class="acl-radio__inner-circle"></div>
                </div>
            </div>
        </div>
    </section>
</div>


        
            
            /* No context defined. */

File:

Content:


                                @import '../animation/functions';
@import './variables';

@function acl-radio-enter($name) {
    @return acl-animation-enter($name, $acl-radio-transition-duration);
}

@function acl-radio-exit($name) {
    @return acl-animation-exit-temporary($name, $acl-radio-transition-duration);
}

URL: /components/raw/radio-buttons/_functions.scss
Filesystem Path: src/components/radio-buttons/_functions.scss
Size: 285 Bytes

Content:


                                @import '../animation/functions';
@import '../density/functions';
@import '../feature-targeting/functions';
@import '../feature-targeting/mixins';
@import '../ripple/mixins';
@import '../ripple/variables';
@import '../theme/mixins';
@import '../theme/variables';
@import '../touch-target/mixins';
@import '../touch-target/variables';
@import './functions';
@import './variables';

$acl-radio-ripple-target: '.acl-radio__ripple';

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

// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// radio styles. It is recommended that most users use `acl-radio-core-styles` instead.
@mixin acl-radio-without-ripple($query: acl-feature-all()) {
    // postcss-bem-linter: define radio

    $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-touch-target-wrapper($query);

    .acl-radio {
        @include acl-radio-unchecked-stroke-color($acl-radio-unchecked-color, $query: $query);
        @include acl-radio-checked-stroke-color($acl-radio-baseline-theme-color, $query: $query);
        @include acl-radio-ink-color($acl-radio-baseline-theme-color, $query: $query);
        @include acl-radio-disabled-unchecked-stroke-color($acl-radio-disabled-circle-color, $query: $query);
        @include acl-radio-disabled-checked-stroke-color($acl-radio-disabled-circle-color, $query: $query);
        @include acl-radio-disabled-ink-color($acl-radio-disabled-circle-color, $query: $query);
        @include acl-radio-focus-indicator-color($acl-radio-baseline-theme-color, $query: $query);
        @include acl-radio-density($acl-radio-density-scale, $query: $query);

        @include acl-feature-targets($feat-structure) {
            display: inline-block;
            position: relative;
            flex: 0 0 auto;
            box-sizing: content-box;
            width: $acl-radio-icon-size;
            height: $acl-radio-icon-size;
            cursor: pointer;
            /* @alternate */
            will-change: opacity, transform, border-color, color;
        }

        // Container for radio circles and ripple.
        &__background {
            @include acl-feature-targets($feat-structure) {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: $acl-radio-icon-size;
                height: $acl-radio-icon-size;
            }

            &::before {
                @include acl-feature-targets($feat-structure) {
                    position: absolute;
                    transform: scale(0, 0);
                    border-radius: 50%;
                    opacity: 0;
                    pointer-events: none;
                    content: '';
                }

                @include acl-feature-targets($feat-animation) {
                    transition: acl-radio-exit(opacity), acl-radio-exit(transform);
                }
            }
        }

        &__outer-circle {
            @include acl-feature-targets($feat-structure) {
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                border-width: 1px;
                color: #46ccc2;
                border-style: solid;
                border-radius: 50%;
            }

            @include acl-feature-targets($feat-animation) {
                transition: acl-radio-exit(border-color);
            }
        }

        &__inner-circle {
            @include acl-feature-targets($feat-structure) {
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                transform: scale(0, 0);
                border-width: 10px;
                border-style: solid;
                border-radius: 50%;
                color: #46ccc2;
            }

            @include acl-feature-targets($feat-animation) {
                transition: acl-radio-exit(transform), acl-radio-exit(border-color);
            }
        }

        &__native-control {
            @include acl-feature-targets($feat-structure) {
                position: absolute;
                margin: 0;
                padding: 0;
                opacity: 0;
                cursor: inherit;
                z-index: 1;
            }

            width: 20px;
            height: 20px;
        }

        &--touch {
            @include acl-touch-target-component(
                $component-height: $acl-radio-ripple-size,
                $component-width: $acl-radio-ripple-size,
                $query: $query
            );
            @include acl-radio-touch-target($size: $acl-touch-target-height, $query: $query);
        }
    }

    .acl-radio__native-control:checked,
    .acl-radio__native-control:disabled {
        + .acl-radio__background {
            @include acl-feature-targets($feat-animation) {
                transition: acl-radio-enter(opacity), acl-radio-enter(transform);
            }

            .acl-radio__outer-circle {
                @include acl-feature-targets($feat-animation) {
                    transition: acl-radio-enter(border-color);
                }
            }

            .acl-radio__inner-circle {
                @include acl-feature-targets($feat-animation) {
                    transition: acl-radio-enter(transform), acl-radio-enter(border-color);
                }
            }
        }
    }

    .acl-radio--disabled {
        @include acl-feature-targets($feat-structure) {
            cursor: default;
            pointer-events: none;
        }
    }

    .acl-radio__native-control:checked {
        + .acl-radio__background {
            .acl-radio__inner-circle {
                @include acl-feature-targets($feat-structure) {
                    transform: scale(0.7);
                    color: #46ccc2;
                }

                @include acl-feature-targets($feat-animation) {
                    transition: acl-radio-enter(transform), acl-radio-enter(border-color);
                }
            }
        }
    }

    .acl-radio__native-control:disabled,
    [aria-disabled='true'] .acl-radio__native-control {
        + .acl-radio__background {
            @include acl-feature-targets($feat-structure) {
                cursor: default;
            }
        }
    }

    .acl-radio__native-control:focus {
        + .acl-radio__background::before {
            @include acl-feature-targets($feat-structure) {
                transform: scale(1);
                opacity: map-get($acl-ripple-dark-ink-opacities, focus);
            }

            @include acl-feature-targets($feat-animation) {
                transition: acl-radio-enter(opacity), acl-radio-enter(transform);
            }
        }
    }

    // postcss-bem-linter: end
}

// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// radio styles. It is recommended that most users use `acl-radio-core-styles` instead.
@mixin acl-radio-ripple($query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-ripple-common($query);

    .acl-radio {
        @include acl-ripple-surface($query: $query, $ripple-target: $acl-radio-ripple-target);
        @include acl-ripple-radius-unbounded($query: $query, $ripple-target: $acl-radio-ripple-target);
        @include acl-states(
            $color: $acl-radio-baseline-theme-color,
            $query: $query,
            $ripple-target: $acl-radio-ripple-target
        );

        &.acl-ripple-upgraded--background-focused {
            .acl-radio__background::before {
                @include acl-feature-targets($feat-structure) {
                    content: none;
                }
            }
        }
    }

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

///
/// Sets the stroke color of an unchecked, enabled radio button.
/// @param {Color} $color - The desired stroke color.
///
@mixin acl-radio-unchecked-stroke-color($color, $query: acl-feature-all()) {
    @include acl-radio-if-enabled-unchecked_ {
        @include acl-radio-stroke-color_($color, $query: $query);
    }
}

///
/// Sets the stroke color of a checked, enabled radio button.
/// @param {Color} $color - The desired stroke color.
///
@mixin acl-radio-checked-stroke-color($color, $query: acl-feature-all()) {
    @include acl-radio-if-enabled-checked_ {
        @include acl-radio-stroke-color_($color, $query: $query);
    }
}

///
/// Sets the ink color of an enabled radio button.
/// @param {Color} $color - The desired ink color.
///
@mixin acl-radio-ink-color($color, $query: acl-feature-all()) {
    @include acl-radio-if-enabled_ {
        @include acl-radio-ink-color_($color, $query: $query);
    }
}

///
/// Sets the stroke color of an unchecked, disabled radio button.
/// @param {Color} $color - The desired stroke color.
///
@mixin acl-radio-disabled-unchecked-stroke-color($color, $query: acl-feature-all()) {
    @include acl-radio-if-disabled-unchecked_ {
        @include acl-radio-stroke-color_($color, $query: $query);
    }
}

///
/// Sets the stroke color of a checked, disabled radio button.
/// @param {Color} $color - The desired stroke color.
///
@mixin acl-radio-disabled-checked-stroke-color($color, $query: acl-feature-all()) {
    @include acl-radio-if-disabled-checked_ {
        @include acl-radio-stroke-color_($color, $query: $query);
    }
}

///
/// Sets the ink color of a disabled radio button.
/// @param {Color} $color - The desired ink color
///
@mixin acl-radio-disabled-ink-color($color, $query: acl-feature-all()) {
    @include acl-radio-if-disabled_ {
        @include acl-radio-ink-color_($color, $query: $query);
    }
}

@mixin acl-radio-focus-indicator-color($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    .acl-radio__background::before {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(background-color, $color, $edgeOptOut: true);
        }
    }
}

///
/// Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom
/// ripple size.
///
/// @param {Number} $size Size of touch target (Native input) in `px`.
/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.
///
@mixin acl-radio-touch-target(
    $size: $acl-radio-ripple-size,
    $ripple-size: $acl-radio-ripple-size,
    $query: acl-feature-all()
) {
    $feat-structure: acl-feature-create-target($query, structure);
    $offset: ($ripple-size - $size) / 2;

    .acl-radio__native-control {
        @include acl-feature-targets($feat-structure) {
            top: $offset;
            right: $offset;
            left: $offset;
            width: $size;
            height: $size;
        }
    }
}

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

    @include acl-radio-ripple-size($size, $query: $query);
    // Sets touch target size same as ripple size.
    @include acl-radio-touch-target($size: $size, $ripple-size: $size, $query: $query);

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

///
/// Sets radio ripple size.
///
/// @param {Number} $size - Ripple size in `px`.
///
@mixin acl-radio-ripple-size($size, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);
    $padding: ($size - $acl-radio-icon-size) / 2;

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

    .acl-radio__background::before {
        @include acl-feature-targets($feat-structure) {
            top: -$padding;
            left: -$padding;
            width: $size;
            height: $size;
        }
    }
}

///
/// 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-radio-touch-target-reset_($query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

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

///
/// Helps select the radio background only when its native control is in the
/// enabled state.
/// @access private
///
@mixin acl-radio-if-enabled_ {
    .acl-radio__native-control:enabled + {
        @content;
    }
}

///
/// Helps select the radio background only when its native control is in the
/// enabled & unchecked state.
/// @access private
///
@mixin acl-radio-if-enabled-unchecked_ {
    .acl-radio__native-control:enabled:not(:checked) + {
        @content;
    }
}

///
/// Helps select the radio background only when its native control is in the
/// enabled & checked state.
/// @access private
///
@mixin acl-radio-if-enabled-checked_ {
    .acl-radio__native-control:enabled:checked + {
        @content;
    }
}

///
/// Helps select the radio background only when its native control is in the
/// disabled state.
/// @access private
///
@mixin acl-radio-if-disabled_ {
    [aria-disabled='true'] .acl-radio__native-control,
    .acl-radio__native-control:disabled {
        + {
            @content;
        }
    }
}

///
/// Helps select the radio background only when its native control is in the
/// disabled & unchecked state.
/// @access private
///
@mixin acl-radio-if-disabled-unchecked_ {
    [aria-disabled='true'] .acl-radio__native-control,
    .acl-radio__native-control:disabled {
        &:not(:checked) + {
            @content;
        }
    }
}

///
/// Helps select the radio background only when its native control is in the
/// disabled & checked state.
/// @access private
///
@mixin acl-radio-if-disabled-checked_ {
    [aria-disabled='true'] .acl-radio__native-control,
    .acl-radio__native-control:disabled {
        &:checked + {
            @content;
        }
    }
}

///
/// Sets the ink color for radio. This is wrapped in a mixin
/// that qualifies state such as `acl-radio-if-enabled_`
/// @access private
///
@mixin acl-radio-ink-color_($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    .acl-radio__background .acl-radio__inner-circle {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(border-color, $color);
            color: #46ccc2;
        }
    }
}

///
/// Sets the stroke color for radio. This is wrapped in a mixin
/// that qualifies state such as `acl-radio-if-enabled_`
/// @access private
///
@mixin acl-radio-stroke-color_($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

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

URL: /components/raw/radio-buttons/_mixins.scss
Filesystem Path: src/components/radio-buttons/_mixins.scss
Size: 15.7 KB

Content:


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

$acl-radio-ripple-size: 40px !default;
$acl-radio-icon-size: 20px !default;
$acl-radio-transition-duration: 120ms !default;
$acl-radio-ripple-opacity: 0.14 !default;
$acl-radio-baseline-theme-color: secondary !default;
$acl-radio-unchecked-color: rgba(acl-theme-prop-value(on-surface), 0.54) !default;
$acl-radio-disabled-circle-color: rgba(acl-theme-prop-value(on-surface), 0.26) !default;

$acl-radio-minimum-size: 28px !default;
$acl-radio-maximum-size: $acl-radio-ripple-size !default;
$acl-radio-density-scale: $acl-density-default-scale !default;
$acl-radio-density-config: (
    size: (
        minimum: $acl-radio-minimum-size,
        default: $acl-radio-ripple-size,
        maximum: $acl-radio-maximum-size,
    ),
) !default;

URL: /components/raw/radio-buttons/_variables.scss
Filesystem Path: src/components/radio-buttons/_variables.scss
Size: 801 Bytes

Content:


                                @import './mixins';
@include acl-radio-core-styles;

URL: /components/raw/radio-buttons/acl-radio.scss
Filesystem Path: src/components/radio-buttons/acl-radio.scss
Size: 52 Bytes

Content:


                                /**
 * @license
 * Copyright 2016 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
//# sourceMappingURL=adapter.js.map

URL: /components/raw/radio-buttons/adapter.js
Filesystem Path: src/components/radio-buttons/adapter.js
Size: 1.2 KB

Content:


                                {"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}

URL: /components/raw/radio-buttons/adapter.js.map
Filesystem Path: src/components/radio-buttons/adapter.js.map
Size: 129 Bytes

Content:


                                /**
 * @license
 * Copyright 2016 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
import * as tslib_1 from 'tslib';
import { MDCComponent } from '../base/component';
import { applyPassive } from '../dom/events';
import { MDCRipple } from '../ripple/component';
import { MDCRippleFoundation } from '../ripple/foundation';
import { MDCRadioFoundation } from './foundation';
var MDCRadio = /** @class */ (function(_super) {
    tslib_1.__extends(MDCRadio, _super);
    function MDCRadio() {
        var _this = (_super !== null && _super.apply(this, arguments)) || this;
        _this.ripple_ = _this.createRipple_();
        return _this;
    }
    MDCRadio.attachTo = function(root) {
        return new MDCRadio(root);
    };
    Object.defineProperty(MDCRadio.prototype, 'checked', {
        get: function() {
            return this.nativeControl_.checked;
        },
        set: function(checked) {
            this.nativeControl_.checked = checked;
        },
        enumerable: true,
        configurable: true,
    });
    Object.defineProperty(MDCRadio.prototype, 'disabled', {
        get: function() {
            return this.nativeControl_.disabled;
        },
        set: function(disabled) {
            this.foundation_.setDisabled(disabled);
        },
        enumerable: true,
        configurable: true,
    });
    Object.defineProperty(MDCRadio.prototype, 'value', {
        get: function() {
            return this.nativeControl_.value;
        },
        set: function(value) {
            this.nativeControl_.value = value;
        },
        enumerable: true,
        configurable: true,
    });
    Object.defineProperty(MDCRadio.prototype, 'ripple', {
        get: function() {
            return this.ripple_;
        },
        enumerable: true,
        configurable: true,
    });
    MDCRadio.prototype.destroy = function() {
        this.ripple_.destroy();
        _super.prototype.destroy.call(this);
    };
    MDCRadio.prototype.getDefaultFoundation = function() {
        var _this = this;
        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
        var adapter = {
            addClass: function(className) {
                return _this.root_.classList.add(className);
            },
            removeClass: function(className) {
                return _this.root_.classList.remove(className);
            },
            setNativeControlDisabled: function(disabled) {
                return (_this.nativeControl_.disabled = disabled);
            },
        };
        return new MDCRadioFoundation(adapter);
    };
    MDCRadio.prototype.createRipple_ = function() {
        var _this = this;
        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
        var adapter = tslib_1.__assign({}, MDCRipple.createAdapter(this), {
            registerInteractionHandler: function(evtType, handler) {
                return _this.nativeControl_.addEventListener(evtType, handler, applyPassive());
            },
            deregisterInteractionHandler: function(evtType, handler) {
                return _this.nativeControl_.removeEventListener(evtType, handler, applyPassive());
            },
            // Radio buttons technically go "active" whenever there is *any* keyboard interaction.
            // This is not the UI we desire.
            isSurfaceActive: function() {
                return false;
            },
            isUnbounded: function() {
                return true;
            },
        });
        // tslint:enable:object-literal-sort-keys
        return new MDCRipple(this.root_, new MDCRippleFoundation(adapter));
    };
    Object.defineProperty(MDCRadio.prototype, 'nativeControl_', {
        get: function() {
            var NATIVE_CONTROL_SELECTOR = MDCRadioFoundation.strings.NATIVE_CONTROL_SELECTOR;
            var el = this.root_.querySelector(NATIVE_CONTROL_SELECTOR);
            if (!el) {
                throw new Error('Radio component requires a ' + NATIVE_CONTROL_SELECTOR + ' element');
            }
            return el;
        },
        enumerable: true,
        configurable: true,
    });
    return MDCRadio;
})(MDCComponent);
export { MDCRadio };
//# sourceMappingURL=component.js.map

URL: /components/raw/radio-buttons/component.js
Filesystem Path: src/components/radio-buttons/component.js
Size: 5.7 KB

Content:


                                {"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"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"}

URL: /components/raw/radio-buttons/component.js.map
Filesystem Path: src/components/radio-buttons/component.js.map
Size: 2.5 KB

Content:


                                /**
 * @license
 * Copyright 2016 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
var strings = {
    NATIVE_CONTROL_SELECTOR: '.acl-radio__native-control',
};
var cssClasses = {
    DISABLED: 'acl-radio--disabled',
    ROOT: 'acl-radio',
};
export { strings, cssClasses };
//# sourceMappingURL=constants.js.map

URL: /components/raw/radio-buttons/constants.js
Filesystem Path: src/components/radio-buttons/constants.js
Size: 1.4 KB

Content:


                                {"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAM,OAAO,GAAG;IACd,uBAAuB,EAAE,4BAA4B;CACtD,CAAC;AAEF,IAAM,UAAU,GAAG;IACjB,QAAQ,EAAE,qBAAqB;IAC/B,IAAI,EAAE,WAAW;CAClB,CAAC;AAEF,OAAO,EAAC,OAAO,EAAE,UAAU,EAAC,CAAC"}

URL: /components/raw/radio-buttons/constants.js.map
Filesystem Path: src/components/radio-buttons/constants.js.map
Size: 303 Bytes

Content:


                                /**
 * @license
 * Copyright 2016 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
import * as tslib_1 from 'tslib';
import { MDCFoundation } from '../base/foundation';
import { cssClasses, strings } from './constants';
var MDCRadioFoundation = /** @class */ (function(_super) {
    tslib_1.__extends(MDCRadioFoundation, _super);
    function MDCRadioFoundation(adapter) {
        return _super.call(this, tslib_1.__assign({}, MDCRadioFoundation.defaultAdapter, adapter)) || this;
    }
    Object.defineProperty(MDCRadioFoundation, 'cssClasses', {
        get: function() {
            return cssClasses;
        },
        enumerable: true,
        configurable: true,
    });
    Object.defineProperty(MDCRadioFoundation, 'strings', {
        get: function() {
            return strings;
        },
        enumerable: true,
        configurable: true,
    });
    Object.defineProperty(MDCRadioFoundation, 'defaultAdapter', {
        get: function() {
            return {
                addClass: function() {
                    return undefined;
                },
                removeClass: function() {
                    return undefined;
                },
                setNativeControlDisabled: function() {
                    return undefined;
                },
            };
        },
        enumerable: true,
        configurable: true,
    });
    MDCRadioFoundation.prototype.setDisabled = function(disabled) {
        var DISABLED = MDCRadioFoundation.cssClasses.DISABLED;
        this.adapter_.setNativeControlDisabled(disabled);
        if (disabled) {
            this.adapter_.addClass(DISABLED);
        } else {
            this.adapter_.removeClass(DISABLED);
        }
    };
    return MDCRadioFoundation;
})(MDCFoundation);
export { MDCRadioFoundation };
// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
export default MDCRadioFoundation;
//# sourceMappingURL=foundation.js.map

URL: /components/raw/radio-buttons/foundation.js
Filesystem Path: src/components/radio-buttons/foundation.js
Size: 3 KB

Content:


                                {"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,aAAa,CAAC;AAEhD;IAAwC,8CAA8B;IAiBpE,4BAAY,OAAkC;eAC5C,uCAAU,kBAAkB,CAAC,cAAc,EAAK,OAAO,EAAE;IAC3D,CAAC;IAlBD,sBAAW,gCAAU;aAArB;YACE,OAAO,UAAU,CAAC;QACpB,CAAC;;;OAAA;IAED,sBAAW,6BAAO;aAAlB;YACE,OAAO,OAAO,CAAC;QACjB,CAAC;;;OAAA;IAED,sBAAW,oCAAc;aAAzB;YACE,OAAO;gBACL,QAAQ,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACzB,WAAW,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC5B,wBAAwB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;aAC1C,CAAC;QACJ,CAAC;;;OAAA;IAMD,wCAAW,GAAX,UAAY,QAAiB;QACpB,IAAA,iDAAQ,CAAkC;QACjD,IAAI,CAAC,QAAQ,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SAClC;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;SACrC;IACH,CAAC;IACH,yBAAC;AAAD,CAAC,AA9BD,CAAwC,aAAa,GA8BpD;;AAED,iHAAiH;AACjH,eAAe,kBAAkB,CAAC"}

URL: /components/raw/radio-buttons/foundation.js.map
Filesystem Path: src/components/radio-buttons/foundation.js.map
Size: 965 Bytes

Content:


                                /**
 * @license
 * Copyright 2019 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
export * from './component';
export * from './constants';
export * from './foundation';
//# sourceMappingURL=index.js.map

URL: /components/raw/radio-buttons/index.js
Filesystem Path: src/components/radio-buttons/index.js
Size: 1.2 KB

Content:


                                {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

URL: /components/raw/radio-buttons/index.js.map
Filesystem Path: src/components/radio-buttons/index.js.map
Size: 187 Bytes

Content:


                                {
  "_from": "..//radio@^4.0.0",
  "_id": "..//radio@4.0.0",
  "_inBundle": false,
  "_integrity": "sha512-3+TkORjxHwhI1SdiBWG3uvfx87LNBFlLMqLJISQsEUegUWGChNnp1DnkZIUqAJ1lXBHZsCjJFUrxKWE4RZ5hVA==",
  "_location": "/..//radio",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,
    "raw": "..//radio@^4.0.0",
    "name": "..//radio",
    "escapedName": "../%2fradio",
    "scope": "../",
    "rawSpec": "^4.0.0",
    "saveSpec": null,
    "fetchSpec": "^4.0.0"
  },
  "_requiredBy": [
    "/material-components-web"
  ],
  "_resolved": "https://registry.npmjs.org/..//radio/-/radio-4.0.0.tgz",
  "_shasum": "04ba5cddcac5540d32b33474c4a5eb50b4bd7860",
  "_spec": "..//radio@^4.0.0",
  "_where": "/Users/robcarvill/Development/component-library/node_modules/material-components-web",
  "bugs": {
    "url": "https://github.com/material-components/material-components-web/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "..//animation": "^4.0.0",
    "..//base": "^4.0.0",
    "..//density": "^4.0.0",
    "..//dom": "^4.0.0",
    "..//feature-targeting": "^4.0.0",
    "..//ripple": "^4.0.0",
    "..//theme": "^4.0.0",
    "..//touch-target": "^4.0.0",
    "tslib": "^1.9.3"
  },
  "deprecated": false,
  "description": "The Material Components for the web radio component",
  "gitHead": "8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72",
  "homepage": "https://github.com/material-components/material-components-web#readme",
  "keywords": [
    "material components",
    "material design",
    "radio"
  ],
  "license": "MIT",
  "main": "dist/mdc.radio.js",
  "module": "index.js",
  "name": "..//radio",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/material-components/material-components-web.git",
    "directory": "packages/acl-radio"
  },
  "sideEffects": false,
  "types": "dist/mdc.radio.d.ts",
  "version": "4.0.0"
}

URL: /components/raw/radio-buttons/package.json
Filesystem Path: src/components/radio-buttons/package.json
Size: 1.9 KB

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

No notes defined.